Three-js 学习笔记（5）——仿射变换

仿射变换。

1，变换模型对象

      var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
      // 几何体xyz三个方向都放大2倍
      geometry.scale(2, 2, 2);
      // 几何体沿着x轴平移50
      geometry.translate(50, 0, 0);
      // 几何体绕着x轴旋转45度
      geometry.rotateX(Math.PI / 1);
      // 居中：偏移的几何体居中
      geometry.center();

2，变换材质对象

      this.mesh = new THREE.Mesh(geometry, material);
      // 平移 X、Y、Z分别设置
      this.mesh.position.set(0,0,0);
      this.mesh.position.x = 100;
      // 缩放 X、Y、Z分别设置
      this.mesh.scale.x = 1.5;
      // 旋转 X、Y、Z分别设置
      this.mesh.rotation.x = Math.PI / 4;
      this.scene.add(this.mesh);

3，变换相机位置

      // 正投影相机 (左边界，右边界，上边界，下边界，近面，远面)
      this.camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 0.1, 1000);
      // 平移
      this.camera.position.set(200, 100, 200); 
      this.camera.position.x = 400;
      // 缩放
      this.camera.scale.set(2,1,1);
      this.camera.scale.x = 1;
      // 旋转
      this.camera.rotation.set(0, 0, Math.PI / 4);
      this.camera.rotation.z = Math.PI / 2;
      
      this.camera.lookAt(this.scene.position); 
      this.renderer = new THREE.WebGLRenderer({ antialias: true });
      this.renderer.setSize(container.clientWidth, container.clientHeight);
      this.renderer.setClearColor(0x000, 1);
      container.appendChild(this.renderer.domElement);
      this.controls = new OrbitControls(this.camera, this.renderer.domElement);