< / style > < ! -- 引入three . js三维引擎 -- > < script src = "http://www.yanhuangxueyuan.com/threejs/build/three.js" > < / script > < script src = "http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js" > < / script > < script src = "http://www.yanhuangxueyuan.com/threejs/build/three.min.js" > < / script > < ! -- < script src = "http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/STLLoader.js" > < / script > < script src = "http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/STLLoader.js" > < / script > < script src = "http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/STLLoader.js" > < / script > -- > < ! -- < script src = "./three.js" > < / script > -- > < ! -- < script src = "http://www.yanhuangxueyuan.com/threejs/build/three.js" > < / script > -- > < / head > < script > * 创建场景对象Scene var scene = new THREE . Scene ( ) ; * 创建网格模型 //1 声明对象---Geometry var geometry = new THREE . Geometry ( ) ; //2 设定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 //3 顶点坐标---添加到---geometry对象 geometry . vertices . push ( p1 , p2 , p3 , p4 ) ; // 4 第1个面：Face3构造函数创建一个三角面 var face1 = new THREE . Face3 ( 0 , 1 , 2 ) ; var face2 = new THREE . Face3 ( 0 , 2 , 3 ) ; var face3 = new THREE . Face3 ( 0 , 1 , 3 ) ; //5三角面每个顶点的法向量 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 ) ; face2 . normal = new THREE . Vector3 ( 0 , - 1 , 0 ) ; face3 . normal = new THREE . Vector3 ( 0 , 0 , - 1 ) ; // 三角形1颜色 < ! -- face1 . color = new THREE . Color ( 0xffff00 ) ; -- > < ! -- // 设置三角面face1三个顶点的颜色 --> face2 . color = new THREE . Color ( 0xff00ff ) ; face3 . color = new THREE . Color ( 0xfff0ff ) ; face1 . vertexColors = [ new THREE . Color ( 0xffff00 ) , new THREE . Color ( 0xff00ff ) , new THREE . Color ( 0x00ffff ) , //三角面face1、face2添加到几何体中 geometry . faces . push ( face1 , face2 , face3 ) ; //材质对象 var material = new THREE . MeshLambertMaterial ( { // color: 0xffff00, vertexColors : THREE . VertexColors , //以顶点颜色为准 side : THREE . DoubleSide , //两面可见 } ) ; var mesh = new THREE . Mesh ( geometry , material ) ; //网格模型对象Mesh scene . add ( mesh ) ; //点对象添加到场景中 // 点渲染模式 < ! -- var material = new THREE . PointsMaterial ( { -- > < ! -- color : 0xff0000 , -- > < ! -- size : 10.0 //点对象像素尺寸 --> < ! -- } ) ; //材质对象 --> < ! -- var points = new THREE . Points ( geometry , material ) ; //点模型对象 --> < ! -- scene . add ( points ) ; //点对象添加到场景中 --> // 线条渲染模式 < ! -- var material = new THREE . LineBasicMaterial ( { -- > < ! -- color : 0xff0000 //线条颜色 --> < ! -- } ) ; //材质对象 --> < ! -- var line = new THREE . Line ( geometry , material ) ; //线条模型对象 --> < ! -- scene . add ( line ) ; //线条对象添加到场景中 --> var geometry = new THREE . BoxGeometry ( 100 , 100 , 100 ) ; //创建一个立方体几何对象Geometry console . log ( geometry ) ; console . log ( '几何体顶点位置数据' , geometry . vertices ) ; console . log ( '三角行面数据' , geometry . faces ) ; var geometrybox = new THREE . BoxGeometry ( 20 , 200 , 100 ) ; //创建一个立方体几何对象Geometry // 遍历几何体的face属性 geometrybox . faces . forEach ( face = > { // 设置三角面face三个顶点的颜色 face . vertexColors = [ new THREE . Color ( 0xffff00 ) , new THREE . Color ( 0xff00ff ) , new THREE . Color ( 0x00ffff ) , } ) ; var materialbox = new THREE . MeshBasicMaterial ( { // color: 0x0000ff, vertexColors : THREE . FaceColors , // wireframe:true,//线框模式渲染 } ) ; //材质对象Material < ! -- var geometry = new THREE . BoxGeometry ( 100 , 100 , 100 ) ; //创建一个立方体几何对象Geometry --> // pop()：删除数组的最后一个元素 shift：删除数组的第一个元素 < ! -- geometry . faces . pop ( ) ; -- > < ! -- geometry . faces . pop ( ) ; -- > < ! -- geometry . faces . shift ( ) ; -- > < ! -- geometry . faces . shift ( ) ; -- > < ! -- var material = new THREE . MeshLambertMaterial ( { -- > < ! -- color : 0x0000ff , -- > < ! -- side : THREE . DoubleSide , //两面可见 --> < ! -- } ) ; //材质对象Material --> < ! -- var geometry = new THREE . BoxGeometry ( 100 , 100 , 100 ) ; //创建一个立方体几何对象Geometry --> // 几何体xyz三个方向都放大2倍 geometrybox . scale ( 2 , 2 , 2 ) ; // 几何体沿着x轴平移50 geometrybox . translate ( 50 , 0 , 0 ) ; // 几何体绕着x轴旋转45度 geometrybox . rotateX ( Math . PI / 4 ) ; // 居中：偏移的几何体居中 geometrybox . center ( ) ; console . log ( geometrybox . vertices ) ; var mesh2 = new THREE . Mesh ( geometrybox , materialbox ) ; //网格模型对象Mesh scene . add ( mesh2 ) ; //点对象添加到场景中 * 光源设置 //点光源 var point = new THREE . PointLight ( 0xffffff ) ; point . position . set ( 400 , 200 , 300 ) ; //点光源位置 scene . add ( point ) ; //点光源添加到场景中 //环境光 var ambient = new THREE . AmbientLight ( 0x444444 ) ; scene . add ( ambient ) ; // console.log(scene) // console.log(scene.children) * 相机设置 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对象 //执行渲染操作 指定场景、相机作为参数 renderer . render ( scene , camera ) ; x轴 渐变 从圆点向右，由0到1，越来越不透明，vPosition.x的-1到0的部分，透明度按0处理。[-1,0]的部分相乘的结果和[0,1]相乘的结果是一样的，会得到对称的从两边到中间越来越透明，x*x得到x镜像叠加x*x==-x*-x；x相加，透明度超过1的,按1处理,所以范围只有x的一半。[0,1]透明度由0到1，超过1的透明度都按1处理。x+y的基础上范围缩小，透明度超过1的,按1处理。x*y的基础上范围缩小，透明度超过1的,按1处理。................................. 着色器材质可以自定义几何体面的 颜色 。进一步学习后就会知道， thre e.js就是对GLSL语言进行了多方面的封装，下面我们就使用着色器语言来绘制一个正方体。 绘制一个有着色器材质的几何体 <!DOCTYPE html> <html lang="en"> <meta charset="UTF-8" /> <title>学习</title> </head> THRE E.js仅提供了创建粒子系统的基础，但是要真正拥有有效的粒子，需要大量的工作。 这就是这个库的目的。 那里有 THRE E.js的许多替代方案和更强大的粒子系统，但是在编写这些行（2019年12月15日）时，我发现这些行都没有适用于最新的三个版本（r111）。 要开始使用Partykals， dist/partykals.js在HTML页面中包含脚本dist/partykals.js ，或通过NPM导入： npm install partykals Partykals将尝试在全局空间（在window对象下）或使用require（' thre e'）查找 THRE E.js。 这些选项之一必须可用才能正常工作。 与“导入”一起使用 要与“导入”一起使用，请参见此处的讨论： Thre e.js访问几何体 顶点 数据 本文是 Thre e.js电子书的2.7节 实际开发项目的时候，可能会加载外部模型，有些时候需要获取模型几何体的 顶点 数据，如果想获取几何体的 顶点 数据首先要熟悉 thre e.js几何体的结构。 访问几何体 顶点 数据其实很简单，刚开始学习不用刻意记忆，直接查看 thre ejs 文档，就像访问javascript对象的属性一样。 测试BoxGeometry 调用BoxGeomet...