（四）Threejs基础-对象的缩放、移动、旋转和动画

1、对象的缩放、移动和动画

1）通过上节的对象、辅助坐标轴、轨道控制器的创建内容，对象的创建如下：

//创建box图形形状
const geometry= new THREE.BoxGeometry( 1, 1, 1);
//赋予基础材质
const material= new THREE.MeshBasicMaterial({color: 0xffff00});
//基于图形形状和材质创建ThreeJS三维对象
const cube=new THREE.Mesh(geometry,material);

2)文档中关于Mesh的部分属性和方法继承于Object3D,缩放、移动、旋转均在父类对象实现：

• Mesh
  
• Object3D
  

2、代码实现

main.js

//导入threejs框架
import * as THREE from "three"
//导入轨道控制器 允许相机围绕着目标对象旋转
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls"

//1创建场景 threejs对象及对象位置的渲染是在场景中完成的，场景中可渲染配置对象、灯光、相机
const scene=new THREE.Scene();

//2创建相机 perspective projection 模拟人眼所看到的景象，它是3D场景的渲染中使用得最普遍的投影模式。详见第3部分相机类型
const camera=new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);

//3设置相机位置 详见第3部分其它相机位置说明
camera.position.set(0,0,10)

//4添加相机到场景
scene.add(camera);


//5场景中添加物体
const geometry= new THREE.BoxGeometry( 1, 1, 1);
const material= new THREE.MeshBasicMaterial({color: 0xffff00});
const cube=new THREE.Mesh(geometry,material);
scene.add(cube);

//6初始化渲染器
const renderer=new THREE.WebGLRenderer();

//7设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight);

//8将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);

//9创建轨道控制器
const controls=new OrbitControls(camera,renderer.domElement);

//10创建辅助坐标轴
const axesHelper=new THREE.AxesHelper(5);
scene.add(axesHelper);

//11缩放
cube.scale.x=2;

//12动画实现
animate();
var flag=true;

function animate(){
//13旋转
    cube.rotation.x+=0.01;
    if(flag){
    //移动 cube.position.set( 0, 20,20 );
        cube.position.x +=0.01;
    }else{
        cube.position.x -=0.01;
    }
   
    console.info( cube.position.x);
    if( cube.position.x >5){
        flag=false;
    }else if( cube.position.x <0){
        flag=true;
    }
 requestAnimationFrame(animate);
//使用渲染器，通过相机将场景渲染进来
renderer.render(scene,camera);
}