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() 名称查找