three.js物体旋转移动

1.导入lib 可以直接到源码 https://github.com/mrdoob/three.js/tree/dev/src 即src文件夹下文件
也可以使用编译好的，three.js three.min.js three.module.js tween.js
2.创建场景
http://www.webgl3d.cn/Three.js/?_blank 教程网址

  	<script src="libs/three.js"></script>
    <script src="libs/FBXLoader.js"></script>
    <script src="libs/inflate.min.js"></script>
    <script src="js/controls/OrbitControls.js"></script>

        var scene = new THREE.Scene();
        var axisHelper = new THREE.AxisHelper(500);//参考线
        var group = new THREE.Group();//打组
        
        var directionalLight = new THREE.DirectionalLight(0xffffff, 1);//平行光
        directionalLight.position.set(60, 100, 40);
        directionalLight.castShadow = true;
        scene.add(directionalLight);
        var ambient = new THREE.AmbientLight(0x444444);//环境光
        scene.add(ambient);
        scene.castShadow = true;
        directionalLight.shadow.camera.near = 0.5;
        directionalLight.shadow.camera.far = 300;
        directionalLight.shadow.camera.left = -50;
        directionalLight.shadow.camera.right = 50;
        directionalLight.shadow.camera.top = 200;
        directionalLight.shadow.camera.bottom = -100;
        directionalLight.shadow.mapSize.set(1024, 1024);
        
        var planeGeometry = new THREE.PlaneGeometry(300, 200);
        var planeMaterial = new THREE.MeshLambertMaterial({
    
    
            color: 0xffffff
        });
        var planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);//平面
        planeMesh.name = "平面"
        planeMesh.rotateX(-Math.PI / 2);//x方向旋转
        planeMesh.translateZ(-15);//z方向移动
        
        var geometry = new THREE.BoxGeometry(10, 10, 100); //立方体几何对象
        var material = new THREE.MeshLambertMaterial({
    
    //MeshLambertMaterial漫反射 MeshPhongMaterial镜面反射/高光
            color: 0x00ffff,
            // opacity: 0.7,//Alah
            // specular: 0x4488ee,
            // shininess: 12,//光滑
            // wireframe: true,//uv线
            // transparent: true//透明
        }); 
        var mesh = new THREE.Mesh(geometry, material);
        mesh.position.set(0, 0, 0);
        group.add(planeMesh, mesh);
        scene.add(axisHelper, group);
        // scene.remove(light,group)//移除对象
        mesh.castShadow = true;
        planeMesh.castShadow = true;
        planeMesh.receiveShadow = true;
        
        var width = window.innerWidth; //窗口宽度
        var height = window.innerHeight; //窗口高度
        var k = width / height; //窗口宽高比
        var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
        var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
        camera.position.set(200, 300, 200); //相机位置
        camera.lookAt(scene.position); //相机方向(看向的场景对象)
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height);//设置渲染区域尺寸
        renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
        document.body.appendChild(renderer.domElement); //body元素中插入canvas对象

		/*var loader = new THREE.FBXLoader();
		var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
        loader.load("./model/battery.fbx", function (obj) {
            // 控制台查看返回结构：包含一个网格模型Mesh的组Group
            console.log(obj);
            mesh = obj.children[1];
            mesh.scale.set(100, 100, 100);
            // var textureLoader = new THREE.TextureLoader();
            // var texture = textureLoader.load('./heart/color.png');
            // mesh.material.map = texture;
            // var textureNormal = textureLoader.load('./heart/normal.png');
            // mesh.material.normalMap = textureNormal
            // mesh.material.normalScale.set(1.5, 1.5)
            // var textureSpecular = textureLoader.load('./heart/Specular.png');
            // mesh.material.specularMap = textureSpecular;
            // mesh.material.specular.set(0xffffff);// 高光反射颜色
            // mesh.material.shininess = 100;// 高光高亮程度，默认30

            // 设置环境贴图，反射周围环境，渲染更逼真
            // var textureCube = new THREE.CubeTextureLoader()
            //     .setPath('环境贴图/')
            //     .load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']);
            // var material11 = new THREE.MeshPhongMaterial({
            //     envMap: textureCube, //设置环境贴图
            // });
            // var mesh11 = new THREE.Mesh(geometry11, material11);
            scene.add(mesh);
        })*/

        let T0 = new Date();//上帧时间
        let a = 0;  //默认约等于60fps   requestAnimationFrame
        function render() {
    
    
            let T1 = new Date();//本次时间
            let delta = T1 - T0;//时间差
            T0 = T1;//把本次时间赋值给上次时间
            requestAnimationFrame(render);//请求再次执行渲染函数render
            renderer.render(scene, camera);//执行渲染操作
            // mesh.rotateY(0.001 * delta);//每次绕y轴旋转0.01弧度
            mesh.scale.set(1, 1, 2);//缩放
            var axis = new THREE.Vector3(0, 0, 1);
            // a = a + 0.001 * delta;
            // texture.offset.x -= 0.0001 * delta;
            mesh.translateOnAxis(axis, a);//位移  方向，距离   //沿着axis轴表示方向平移a
            // mesh.translateX(100)// 等价于mesh.position = mesh.position + 100;
        }
        render();
        var controls = new THREE.OrbitControls(camera, render.domElement);

//持续更新…