推荐：将NSDT场景编辑器加入你3D工具链 其他工具系列：NSDT简石数字孪生 为了使用鼠标操作三维场景，可以借助three.js众多控件之一OrbitControls.js，可以在下载的three.js-master文件中找到(three.js-master\examples\js\controls)。 然后和引入three.js文件一样在html文件中引入控件OrbitControls.js。本节课的目的不是为了深入讲解OrbitControls.js，主要目的一方面向大家展示下threejs的功能，另一方面后面课程学习过程中经常会通过鼠标旋转、缩放模型进行代码调试。 代码实现 OrbitControls.js控件支持鼠标左中右键操作和键盘方向键操作，具体代码如下，使用下面的代码替换1.1节中renderer.render(scene,camera);即可。 function render() { renderer.render(scene,camera);//执行渲染操作 } render(); var controls = new THREE.OrbitCont

推荐：将NSDT场景编辑器加入你3D工具链 其他工具系列：NSDT简石数字孪生 基于WebGL技术开发在线游戏、商品展示、室内漫游往往都会涉及到动画，初步了解three.js可以做什么，深入讲解three.js动画之前，本节课先制作一个简单的立方体旋转动画。 本节课是在1.1节 第一个3D场景已绘制好的立方体代码基础上进行更改。 周期性渲染 在1.1节中讲解过，每执行一次渲染器对象WebGLRenderer的渲染方法.render()，浏览器就会渲染出一帧图像并显示在Web页面上，这就是说你按照一定的周期不停地调用渲染方法.render()就可以不停地生成新的图像覆盖原来的图像。这也就是说只要一边旋转立方体，一边执行渲染方法.render()重新渲染，就可以实现立方体的旋转效果。 为了实现周期性渲染可以通过浏览器全局对象window对象的一个方法setInterval(),可以通过window对象调用该方法window.setInterval()，也可以直接以函数形式调用setInterval()。 setInterval()是一个周期性函数，就像一个定时器，每隔多少毫秒