在线工具推荐：Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 3D数字孪生场景编辑器 几何体旋转、缩放、平移变换 通过前7节课的学习，我相信你已经对Threejs几何体内部顶点构成有了一定了解。 几何体Geometry对象有一系列的顶点属性，也封装了一系列的方法，通过.scale()、.translate()、.rotateX()等方法可以对几何体本身进行缩放、平移、旋转等几何变换。通过.scale()、.translate()、.rotateX()这些方法对几何体进行变换，注意本质上都是改变结合体顶点位置坐标数据。你可以执行测斜方法，然后在浏览器控制打印顶点位置坐标数据console.log(geometry.vertices);,然后对比几何体变化前后定点位置坐标是否变化。 var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry // 几何体xyz三个方向都放大2倍 geometry.

推荐：将NSDT场景编辑器加入你的3D工具链 其他系列工具：NSDT简石数字孪生 访问几何体对象的数据 实际开发项目的时候，可能会加载外部模型，有些时候需要获取模型几何体的顶点数据，如果想获取几何体的顶点数据首先要熟悉three.js几何体BoxGeometry和BufferGeometry的结构。 访问几何体顶点数据其实很简单，刚开始学习不用刻意记忆，直接查看threejs文档，就像访问javascript对象的属性一样。 测试BoxGeometry 调用BoxGeometry创建一个立方体，执行THREE.BoxGeometry构造函数会自动生成几何体对象的顶点位置坐标、顶点法向量等数据。 你可以通过执行下面代码，然后查看浏览器控制台打印的数据 var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry console.log(geometry); console.log('几何体顶点位置数据',geometry.vertices); console.log('三角行面数据

推荐：将NSDT场景编辑器加入你的3D工具链 其他系列工具：NSDT简石数字孪生   前面几篇文章通过缓冲类型几何体BufferGeometry给大家讲解了顶点位置、颜色、法向量、索引数据，本节课给大家引入一个新的threejs几何体APIGeometry。几何体Geometry和缓冲类型几何体BufferGeometry表达的含义相同，只是对象的结构不同，Threejs渲染的时候会先把Geometry转化为BufferGeometry再解析几何体顶点数据进行渲染。 Vector3定义顶点位置坐标数据 Vector3是threejs的三维向量对象,可以通过Vector3对象表示一个顶点的xyz坐标，顶点的法线向量。 几何体Geometry的顶点位置属性geometry.vertices和缓冲类型几何体BufferGeometry顶点位置属性BufferGeometry.attributes.position是对应的。 var geometry = new THREE.Geometry(); //声明一个几何体对象Geometry var p1 = new THREE.Ve

推荐：将NSDT场景编辑器加入你3D工具链 其他工具系列：NSDT简石数字孪生 顶点索引复用顶点数据 通过几何体BufferGeometry的顶点索引属性BufferGeometry.index可以设置几何体顶点索引数据，如果你有WebGL基础很容易理解顶点索引的概念，如果没有也没有关系，下面会通过一个简单的例子形象说明。 比如绘制一个矩形网格模型,至少需要两个三角形拼接而成，两个三角形，每个三角形有三个顶点，也就是说需要定义6个顶点位置数据。对于矩形网格模型而言，两个三角形有两个顶点位置是重合的。也就是说可以重复的位置可以定义一次，然后通过通过顶点数组的索引值获取这些顶点位置数据。 不使用顶点索引 下面通过几何体六个顶点定义了两个三角形，几何体的顶点位置数据、顶点法向量数据都是6个。 var geometry = new THREE.BufferGeometry(); //声明一个空几何体对象 //类型数组创建顶点位置position数据 var vertices = new Float32Array([ 0, 0, 0, //顶点1坐标 80, 0, 0,

推荐：将NSDT场景编辑器加入你3D工具链 其他工具系列：NSDT简石数字孪生 threejs光源 为了更好的渲染场景，threejs提供了生活中常见的一些光源的API。 你可以测试前面几节课案例中的光源代码，比如全部删除所有的光源代码，你会发现场景中的物体是黑色的，就像生活中一样没有光，物体是黑色的。 常见光源类型 本节课不会对threejs各类光源进行深入介绍，主要是简单展示下，对于初学者有一个印象就可以。 光源简介AmbientLight环境光PointLight点光源DirectionalLight平行光，比如太阳光SpotLight聚光源 环境光创建 //环境光 环境光颜色与网格模型的颜色进行RGB进行乘法运算 var ambient = new THREE.AmbientLight(0x444444); scene.add(ambient); 点光源创建 //点光源 var point = new THREE.PointLight(0xffffff); point.position.set(400, 200, 300); //点光源位置 /

推荐：将NSDT场景编辑器加入你3D工具链 其他工具系列：NSDT简石数字孪生 材质效果 前面案例中几何体对应网格模型材质只是设置了一个颜色，实际渲染的时候往往会设置其他的参数，比如实现玻璃效果要设置材质透明度，一些光亮的表面要添加高光效果。 半透明效果 更改场景中的球体材质对象构造函数THREE.MeshLambertMaterial()的参数，添加opacity和transparent属性，opacity的值是0~1之间，transparent表示是否开启透明度效果， 默认是false表示透明度设置不起作用，值设置为true，网格模型就会呈现透明的效果，使用下面的代码替换原来的球体网格模型的材质， 刷新浏览器,通过鼠标旋转操作场景,可以看到半透明的球体和立方体颜色叠加融合的效果。 var sphereMaterial=new THREE.MeshLambertMaterial({ color:0xff0000, opacity:0.7, transparent:true });//材质对象 材质对象的一些属性可以在构造函数参数中设置，也可

推荐：将NSDT场景编辑器加入你3D工具链 其他工具系列：NSDT简石数字孪生 3D场景中插入新的几何体 前面课程绘制了一个立方体效果，下面通过three.js的球体构造函数SphereGeometry()在三维场景中添加一个球几何体。 SphereGeometry构造函数 SphereGeometry(radius, widthSegments, heightSegments) 第一个参数radius约束的是球的大小，参数widthSegments、heightSegments约束的是球面的精度，球体你可以理解为正多面体，就像圆一样是正多边形，当分割的边足够多的时候，正多边形就会无限接近于圆，球体同样的的道理， 有兴趣可以研究利用WebGL实现它的算法，对于three.js就是查找文档看使用说明。 参数含义radius球体半径widthSegments控制球面精度，水平细分数 heightSegments| 控制球面精度，水平细分数| 绘制球体网格模型 使用THREE.SphereGeometry(60,40,40);替换立方体几何体代码new THREE

推荐：将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()是一个周期性函数，就像一个定时器，每隔多少毫秒