小遊戲使用three.js

微信小遊戲學習記錄：Threejs

剛剛才發現小遊戲是可以使用WebGL進行開發的。最近正好又有點時間，利用下班時間，嘗試一下使用threejs開發小遊戲。

接下來的每一天我都會做一下記錄。

今天是第一天：

使用時發現 2點問題：

1. 無法使用three.module.js 我退而求其次選擇引入three.min.js,成功展示出立方體

 var geometry = new THREE.BoxGeometry(100, 100, 100);
 var material = new THREE.MeshBasicMaterial({
     color: 0x00ff00
 });
 var cube = new THREE.Mesh(geometry, material);
 this.scene.add(cube);

2.使用OrbitControls.js 控制元件時只要觸發移動事件，螢幕就黑屏，後來百度發現：

panLeft( 2 * deltaX * targetDistance / element.clientHeight , scope.object.matrix );
panUp( 2 * deltaY * targetDistance / element.clientHeight, scope.object.matrix );
} else if ( scope.object.isOrthographicCamera ) {
// orthographic
panLeft( deltaX * ( scope.object.right - scope.object.left ) / scope.object.zoom / element.clientWidth, scope.object.matrix );
panUp( deltaY * ( scope.object.top - scope.object.bottom ) / scope.object.zoom / element.clientHeight, scope.object.matrix );
var element = scope.domElement === document ? scope.domElement.body:scope.domElement;

是element.clientWidth不存在 修改為window.innerWidth即可成功，程式碼如下：

rotateLeft( 2 * Math.PI * rotateDelta.x / window.innerWidth * scope.rotateSpeed );
rotateUp( 2 * Math.PI * rotateDelta.y / window.innerHeight * scope.rotateSpeed );

最新版OrbitControls.js 需要修改7處地方 上述程式碼為其中一處

百度出來的參考連結：https://indienova.com/indie-game-development/wechat-mini-game-notes-threejs-load-model-and-interaction/

推薦文章：https://blog.csdn.net/xcg132566/article/details/104999400?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-3.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-3.control