微信小游戏开発その4:three.jsエンジンを使う
一、前言
ウィーチャットのミニゲームで最も魔性のある「ジャンプ」はthree.jsエンジンに基づいて開発された.
ここを見て!!!もうメールを送らせないで!
ソースコードはgithubに置かれました:GitHubアドレス 自分でダウンロードしてください.
二、ダウンロード
three.min.js ページを開く
三、引用
以下の方法で小さなゲームでthreeを参照します.
四、スタート
3 dgame.jsファイルの作成
注意が必要なのは、WeChatミニゲームでは「ImageBitmap」というグローバルオブジェクトがないため、テクスチャマップをロードするときにエラーが発生し、ソースコードを変更する必要があることです.
五、効果
ウィーチャットのミニゲームで最も魔性のある「ジャンプ」はthree.jsエンジンに基づいて開発された.
ここを見て!!!もうメールを送らせないで!
ソースコードはgithubに置かれました:GitHubアドレス 自分でダウンロードしてください.
二、ダウンロード
three.min.js ページを開く
三、引用
以下の方法で小さなゲームでthreeを参照します.
let THREE = require('three.min.js ')
四、スタート
3 dgame.jsファイルの作成
注意が必要なのは、WeChatミニゲームでは「ImageBitmap」というグローバルオブジェクトがないため、テクスチャマップをロードするときにエラーが発生し、ソースコードを変更する必要があることです.
let THREE = require('./three/three')
export default class Game3d {
constructor() {
//
this.scene = new THREE.Scene();
//
this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// webGL
// canvas canvas
this.renderer = new THREE.WebGLRenderer({
canvas: canvas
});
this.start()
}
start() {
this.renderer.setSize(window.innerWidth, window.innerHeight);
var geometry = new THREE.CubeGeometry(1, 1, 1);
//
var texture = new THREE.TextureLoader().load("images/metal.jpg");
var material = new THREE.MeshBasicMaterial({ map: texture });
this.cube = new THREE.Mesh(geometry, material);
this.scene.add(this.cube);
// camera ,
this.camera.position.z = 2.5;
this.cube.castShadow = true
console.log(this.cube)
window.requestAnimationFrame(this.loop.bind(this), canvas);
}
update() {
this.cube.rotation.x += 0.02;
this.cube.rotation.y += 0.04;
this.cube.rotation.z += 0.06;
}
loop() {
this.update()
this.renderer.render(this.scene, this.camera);
window.requestAnimationFrame(this.loop.bind(this), canvas);
}
}
game.jsで呼び出すimport './js/libs/weapp-adapter'
import './js/libs/symbol'
import Game3d from './3dgame'
new Game3d()
五、効果