模型在执行路径过程中的三.js 动画（tween.js）

function createScene() { scene = new THREE.Scene(); } function createLight() { //点光源 var point = new THREE.PointLight(0xffffff); point.position.set(400, 200, 300); //点光源位置 scene.add(point); //点光源添加到场景中 //环境光 // var ambient = new THREE.AmbientLight(0x444444); var ambient = new THREE.AmbientLight("#ffffff", 1); scene.add(ambient); } function createCamera(width, height) { var k = width / height; //窗口宽高比 var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大 // //创建相机对象 // 正交相机 // camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000); // 透视相机（此处需要全景和透视） camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 20000 ); // camera.position.set(200, 300, 200); //设置相机位置 camera.position.set(0, 300, 200); //设置相机位置 camera.lookAt(scene.position); //设置相机方向(指向的场景对象) } // 创建相机动画 function createCameraAnimation() { var obj = { x: 0, y: 200, z: 300, }; let tween = new TWEEN.Tween(obj); tween.to( { x: 400, y: 200, z: 300, }, 5000 ); tween.onUpdate(function () { // 动态更新相机位置 camera.position.set(obj.x, obj.y, obj.z); //设置相机位置 camera.lookAt(0, 0, 0); //保持相机目标观察点不变 }); tween.start(); //tween动画开始执行 } function createRender() { renderer = new THREE.WebGLRenderer(); renderer.setSize(width, height); //设置渲染区域尺寸 // renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色 // renderer.setClearColor(0xffffff, 1); //设置背景颜色 renderer.outputEncoding = THREE.sRGBEncoding; // 模型颜色偏差 renderer.shadowMap.enabled = true; //开启渲染气阴影效果。 document.querySelector(".import_model").appendChild(renderer.domElement); } function createControls() { //创建控件对象 相机对象camera作为参数 控件可以监听鼠标的变化，改变相机对象的属性 controls = new THREE.OrbitControls(camera); //监听鼠标事件，触发渲染函数，更新canvas画布渲染效果 controls.addEventListener("change", () => { renderer.render(scene, camera); }); } function createGrid() { grid = new THREE.GridHelper(600, 15, 0xffffff, 0xffffff); grid.material.opacity = 0.2; grid.material.depthWrite = false; grid.material.transparent = true; scene.add(grid); } function createAxesHelper() { axesHelper = new THREE.AxesHelper(250); scene.add(axesHelper); } function render() { controls.update(); TWEEN.update(); //更新TWEEN requestAnimationFrame(render); //请求再次执行渲染函数render，渲染下一帧 renderer.render(scene, camera); //执行渲染操作 }