关键词：
推荐：将NSDT场景编辑器加入你的3D工具链
其他系列工具：NSDT简石数字孪生
Face3对象定义Geometry的三角形面
几何体Geometry的三角面属性geometry.faces和缓冲类型几何体BufferGeometry顶点索引属性BufferGeometry.index类似都是顶点位置数据的索引值,用来组织网格模型三角形的绘制。
学习本节课最好对照2.4 顶点索引复用顶点数据学习。
下面代码自定义了一个由两个三角形构成的几何体，两个三角形有两个顶点坐标位置是重合的。
var geometry = new THREE.Geometry(); //声明一个几何体对象Geometry
var p1 = new THREE.Vector3(0, 0, 0); //顶点1坐标
var p2 = new THREE.Vector3(0, 100, 0); //顶点2坐标
var p3 = new THREE.Vector3(50, 0, 0); //顶点3坐标
var p4 = new THREE.Vector3(0, 0, 100); //顶点4坐标
//顶点坐标添加到geometry对象
geometry.vertices.push(p1, p2, p3,p4);
// Face3构造函数创建一个三角面
var face1 = new THREE.Face3(0, 1, 2);
//三角面每个顶点的法向量
var n1 = new THREE.Vector3(0, 0, -1); //三角面Face1顶点1的法向量
var n2 = new THREE.Vector3(0, 0, -1); //三角面2Face2顶点2的法向量
var n3 = new THREE.Vector3(0, 0, -1); //三角面3Face3顶点3的法向量
// 设置三角面Face3三个顶点的法向量
face1.vertexNormals.push(n1,n2,n3);
// 三角面2
var face2 = new THREE.Face3(0, 2, 3);
// 设置三角面法向量
face2.normal=new THREE.Vector3(0, -1, 0);
//三角面face1、face2添加到几何体中
geometry.faces.push(face1,face2);
设置四个顶点
两个三角形有6个顶点，但是两个顶点位置重合的，可以设置4个顶点即可。
var p1 = new THREE.Vector3(0, 0, 0); //顶点1坐标
var p2 = new THREE.Vector3(0, 100, 0); //顶点2坐标
var p3 = new THREE.Vector3(50, 0, 0); //顶点3坐标
var p4 = new THREE.Vector3(0, 0, 100); //顶点4坐标
//顶点坐标添加到geometry对象
geometry.vertices.push(p1, p2, p3,p4);
Face3构建三角形
threejs提供了Face3对象构建三角形，通过Face3构建一个三角形，不要设置顶点位置坐标数据，只需要通过数组索引值从geometry.vertices数组中获得顶点位置坐标数据。
geometry.vertices数组索引0, 1, 2对应的顶点位置坐标数据表示三角形1的三个顶点坐标，索引0, 2, 3对应的顶点位置坐标数据表示三角形2的三个顶点坐标。
// Face3构造函数创建一个三角面
var face1 = new THREE.Face3(0, 1, 2);
// 三角面2
var face2 = new THREE.Face3(0, 2, 3);
三角形法线设置
前面课程将结果网格模型Mesh的几何体Geometry本质上都是一个一个三角形拼接而成，所以可以通过设置三角形的法线方向向量来表示几何体表面各个位置的法线方向向量。
设置三角形法线方向向量有两种方式，一种是直接定义三角形面的法线方向，另一个是定义三角形三个顶点的法线方向数据来表示三角形面法线方向。
使用三维向量THREE.Vector3表示三角形法线方向数值，然后赋值给三角形对象Face3的法线属性Face3.normal。
// 三角面2
var face2 = new THREE.Face3(0, 2, 3);
// 设置三角面法向量
face2.normal=new THREE.Vector3(0, -1, 0);
换另一种方式，通过三角形面Face3的Face3.vertexNormals属性给三角形的三个顶点分别设置一个顶点法线方向数据。
// Face3构造函数创建一个三角面
var face1 = new THREE.Face3(0, 1, 2);
//三角面每个顶点的法向量
var n1 = new THREE.Vector3(0, 0, -1); //三角面Face1顶点1的法向量
var n2 = new THREE.Vector3(0, 0, -1); //三角面2Face2顶点2的法向量
var n3 = new THREE.Vector3(0, 0, -1); //三角面3Face3顶点3的法向量
// 设置三角面Face3三个顶点的法向量
face1.vertexNormals.push(n1,n2,n3);
三角形颜色设置
三角形颜色设置和三角形法线方向设置类型，可以直接设置三角形颜色，也可以设置三角形三个顶点的颜色。
// 三角形1颜色
face1.color = new THREE.Color(0xffff00);
// 设置三角面face1三个顶点的颜色
face1.color = new THREE.Color(0xff00ff);
通过三角形面Face3的.vertexColors属性设置三角形三个顶点颜色。
三个顶点颜色不同三角形面渲染的时候会进行颜色插值计算，测到一个颜色渐变效果。
face1.vertexColors = [
new THREE.Color(0xffff00),
new THREE.Color(0xff00ff),
new THREE.Color(0x00ffff),
]
使用顶点颜色数据的时候，注意设置材质的属性vertexColors属性值为THREE.VertexColors。
注意设置三角形Face3的颜色对threejs网格模型Mesh有效，对于点模型Points、线模型Line是无效果，如果想设置点、线模型对应的几何体Geometry的顶点颜色，可以通过Geometry的顶点颜色属性geometry.colors实现。
three.js2.0场景及场景中的对象
...be...)物体一个只有一个平面的简单场景中已经包含了几个对象其中包括使用Scene.add(object)加载进场景的几个对象场景渲染的时候camera对象会自动添加进来从几个函数来理解THREE.Scene()对象1、在场景中添加物体Scene.Add()2、移除物体Sc... 查看详情
three.js案例从0到1创建组合对象并让它们动起来(代码片段)
1.创建对象，创建材质，并建立几何形状//首先定义一个大海对象Sea=function()//创建一个圆柱几何体//参数为：顶面半径，底面半径，高度，半径分段，高度分段vargeom=newTHREE.CylinderGeometry(600,600,800,40,... 查看详情
Three.js 对象的“中心”是啥？
】Three.js对象的“中心”是啥？【英文标题】：Whatisthe"center"ofaThree.jsobject?Three.js对象的“中心”是什么？【发布时间】：2016-10-2801:48:15【问题描述】：当我使用Blender为对象建模时，我能够明确定义其发生平移和旋转的中... 查看详情
使用 Three.js 围绕对象旋转相机
】使用Three.js围绕对象旋转相机【英文标题】：RotatecameraaroundobjectwithThree.js【发布时间】：2013-08-3006:25:56【问题描述】：我正在使用WebGlRenderer显示带有Three.js的OBJ元素，现在我想允许用户在任何方向上围绕对象旋转相机，我找到... 查看详情
three.js教程：顶点索引复用顶点数据(代码片段)
推荐：将NSDT场景编辑器加入你3D工具链其他工具系列：NSDT简石数字孪生顶点索引复用顶点数据通过几何体BufferGeometry的顶点索引属性BufferGeometry.index可以设置几何体顶点索引数据，如果你有WebGL基础很容易理解顶点索引的概念，... 查看详情
在 Three.JS 中通过鼠标单击选择 Collada 对象
】在Three.JS中通过鼠标单击选择Collada对象【英文标题】：SelectColladaobjectsbymouseClickinThree.JS【发布时间】：2012-08-0108:00:30【问题描述】：我需要通过鼠标点击在Three.JS中选择Collada对象。我知道我可以根据他们的id选择对象，并且我... 查看详情
three.js建模基础(代码片段)
...，一个可见的物体是由几何体和材料构成的。在这个教程中，我们将学习如何从头开始创建新的网格几何体，研究Three.js为处理几何对象和材质所提供的相关支持。1、索引面集/IndexedFaceSetsThree.js中的Mesh网格对象是索... 查看详情
three.js纹理投影简明教程(代码片段)
纹理投影是一种将纹理映射到3D对象并使其看起来像是从单个点投影的方法。把它想象成投射到云上的蝙蝠侠符号，云是我们的对象，蝙蝠侠符号是我们的纹理。它用于游戏和视觉效果，以及创意世界的更多部分。工... 查看详情
更改 Three.js collada 对象的纹理和颜色
】更改Three.jscollada对象的纹理和颜色【英文标题】：ChangingtextureandcoloronThree.jscolladaobject【发布时间】：2013-02-0803:18:55【问题描述】：我最近从官方网站获得了三个使用ColladaLoader.js处理我的collada对象(.dae)的示例。现在我的问题是... 查看详情
three.js纹理投影简明教程(代码片段)
纹理投影是一种将纹理映射到3D对象并使其看起来像是从单个点投影的方法。把它想象成投射到云上的蝙蝠侠符号，云是我们的对象，蝙蝠侠符号是我们的纹理。它用于游戏和视觉效果，以及创意世界的更多部分。工... 查看详情
无法将从 Blender 导出的对象加载到 three.js 中？
...器中加载和操作混合时，我感到非常兴奋。我查找了一个教程，导出了一个简单的icosphere，然后插入了我的 查看详情
十分钟快速实战three.js
...将会分解成代码段（模块）来进行开发。模块如下：场景对象网格模型光源相机渲染器对象渲染操作1.创建html文件首先，我们得创建一个html文件，这样才有地方开发。创建完成后，我们可以引入Three.js文件，今天，它可是主角。... 查看详情
three.js
WebGL教程_Three.js教程_郭隆邦技术博客http://www.yanhuangxueyuan.com/END 查看详情
Three.js - 对象跟随鼠标位置
】Three.js-对象跟随鼠标位置【英文标题】：Three.js-Objectfollowsmouseposition【发布时间】：2016-07-0205:26:31【问题描述】：我正在Three.js中创建一个球体，它必须在鼠标移动时跟随鼠标，如thisexample中所示。处理鼠标移动的函数如下：fun... 查看详情
球体对象的three.js外发光？
】球体对象的three.js外发光？【英文标题】：three.jsouterglowforsphereobject?【发布时间】：2013-04-2214:21:04【问题描述】：我正在three.js中构建某种行星系统，我花了几个小时寻找一个合适的解决方案，以便在一个行星上获得外发光-具... 查看详情
整个对象上的 Three.js alpha
】整个对象上的Three.jsalpha【英文标题】：Three.jsalphaonentireobject【发布时间】：2015-10-2604:25:50【问题描述】：我正在创建包含多个Collada对象的Three.js场景。我希望能够在Three.js中设置每个Collada对象的不透明度（以便对象可以根据... 查看详情
无法使用 three.js 渲染 GLTF 对象
】无法使用three.js渲染GLTF对象【英文标题】：UnabletorenderGLTFobjectwiththree.js【发布时间】：2021-12-1804:48:51【问题描述】：我正在尝试渲染由three.js指南(https://github.com/mrdoob/three.js/blob/master/examples/models/gltf/DamagedHelmet)提供的GLTF对象为... 查看详情
three.js程序化建模入门(代码片段)
在这个教程中，我们将学习如何在three.js中制作自己的自定义程序几何，以及如何利用程序几何来制作吸引人的低多边形地形。学习本教程需要你具备以下基本技能：基本熟悉three.js应用的结构基础编程知识3d几何的基... 查看详情