three.js 模型常用操作

 

 

 

場景：

THREE.Scene();

 

場景輔助坐標模型：

THREE.AxesHelper(20);

 

相機：

THREE.PerspectiveCamera()// 透視相機

THREE.OrthographicCamera()// 正交相機

渲染器：

THREE.WebGLRenderer() // 3D場景渲染

CSS2DRenderer(); // 2D平面渲染（用於網頁元素與場景元素綁定）

 

 

場景動畫： 不限 ，一個無限循環函數

    animate() {

      // 實時更新動畫函數

      // this.renderer.render(this.scene, this.camera);

      // this.labelRenderer.render(this.scene, this.camera);

      window. requestAnimationFrame(() => this.animate());

      //   this.update();

      TWEEN.update();

    },

 

光源：

THREE.AmbientLight(0xaffffff) // 場景光

THREE.PointLight(0xa6a6a6, 1, 1000); // 點光源

THREE.SpotLight(0xa6a6a6); // 聚光燈

 

操作控件：

this.orbitControls = new OrbitControls(this.camera,this.renderer.domElement ) // 軌道控制器

FlyControls() // 飛行控件

 

幾何體：

THREE.PlaneGeometry（長，寬，高） // 平面

THREE.BoxGeometry(長，寬，高) // 立方體

THREE.CircleGeometry() // 圓

THREE.TextGeometry() // 文字

 

 

 

材質：

THREE.MeshStandardMaterial（

color: 0xa6a6a6, // 顏色

side: THREE.BackSide // 反向貼圖

visible: false, // 顯示隱藏

） // 標准材質

 

定時器：

THREE.Clock() 

 

對象事件管理： 

this.orbitControls.addEventListener("change", this.render); // 靜態場景優化性能時常用，

 

物體：

THREE.Mesh（） // 網格

THREE.Group() // 組 （場景模型盡量分組，方便管理）

THREE.Line() // 線

THREE.Sprite() // 精靈 （精靈是一個總是面朝着攝像機的平面，通常含有使用一個半透明的紋理。）

 

 

 

模型位置：

Mesh.position.set(x,y,z）

 

模型縮放：

Mesh.scale.set(1, 1, 1)

 

分組：

THREE.Group();

 

追加模型：
scene.add(Mesh) 追加到場景
group.add(mesh) 追加到分組

 

刪除模型：
obj.geometry.dispose();
obj.material.dispose();
scene.remove(obj);

 

模型/分組查找：
場景/分組.traverse() 遍歷
scene.getObjectById() ID 查找
scene.getObjectByName() 名稱查找