毕业设计网站最容易做什莫类型,羊了个羊开发公司,企业网站建设进度,有做数学题的网站吗个人简介 #x1f440;个人主页#xff1a; 前端杂货铺 ⚡开源项目#xff1a; rich-vue3 #xff08;基于 Vue3 TS Pinia Element Plus Spring全家桶 MySQL#xff09; #x1f64b;♂️学习方向#xff1a; 主攻前端方向#xff0c;正逐渐往全干发展 #x1…个人简介 个人主页 前端杂货铺 ⚡开源项目 rich-vue3 基于 Vue3 TS Pinia Element Plus Spring全家桶 MySQL ♂️学习方向 主攻前端方向正逐渐往全干发展 个人状态 研发工程师现效力于中国工业软件事业 人生格言 积跬步至千里积小流成江海 推荐学习开源 rich-vue3 前端面试宝典 Vue2 Vue3 Vue2/3项目实战 Node.js实战 Three.js 个人推广每篇文章最下方都有加入方式旨在交流学习资源分享快加入进来吧 内容参考链接WebGL专栏WebGL 入门Three.js一创建场景、渲染三维对象、添加灯光、添加阴影、添加雾化Three.js二scene场景、几何体位置旋转缩放、正射投影相机、透视投影相机Three.js三聚光灯、环境光、点光源、平行光、半球光Three.js四基础材质、深度材质、法向材质、面材质、朗伯材质、Phong材质、着色器材质、直线和虚线、联合材质 文章目录 前言一、二维平面二、二维圆三、自定义二维图形四、立方体五、球体六、圆柱体七、圆环八、扭结九、多面体十、文字GUI 控制文件总结 前言
大家好这里是前端杂货铺。
上篇文章我们学习了 基础材质、深度材质、法向材质、面材质、朗伯材质、Phong材质、着色器材质、直线和虚线、联合材质。接下来我们继续我们 three.js 的学习
在学习的过程中如若需要深入了解或扩展某些知识可以自行查阅 three.js官方文档。 一、二维平面
PlaneBufferGeometry 一个用于生成平面几何体的类。相较于于 PlaneGeometry 更加轻量化。
new THREE.PlaneBufferGeometry(width : Float, height : Float, widthSegments : Integer, heightSegments : Integer)参数名称描述width平面沿着 X 轴的宽度。默认值是 1height平面沿着 Y 轴的高度。默认值是 1widthSegments可选平面的宽度分段数默认值是 1heightSegments可选平面的高度分段数默认值是 1
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src../lib/three/three.js/scriptscript src../lib/three/dat.gui.js/scriptscript src../controls/index.js/script
/headbodyscript// 创建场景const scene new THREE.Scene();// 创建相机 视野角度FOV、长宽比、近截面、远截面const camera new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);// 设置相机位置camera.position.set(0, 0, 20);// 创建渲染器const renderer new THREE.WebGLRenderer();// 设置渲染器尺寸renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 添加平面 平面沿着 X 轴的宽度 | 平面沿着 Y 轴的高度 | 平面的宽度分段数 | 平面的高度分段数const geometry new THREE.PlaneBufferGeometry(10, 10, 2, 2);const lambert new THREE.MeshLambertMaterial({color: 0xff0000});const basic new THREE.MeshBasicMaterial({wireframe: true});const mesh {pointer: new THREE.SceneUtils.createMultiMaterialObject(geometry, [lambert, basic])};// 添加到场景scene.add(mesh.pointer);// 添加灯光const spotLight new THREE.SpotLight(0xffffff);spotLight.position.set(-10, 10, 90);scene.add(spotLight);initControls(geometry, camera, mesh, scene);const animation () {mesh.pointer.rotation.x 0.01;mesh.pointer.rotation.y 0.01;// 渲染renderer.render(scene, camera);requestAnimationFrame(animation);}animation();/script
/body/html二维平面 二、二维圆
CircleGeometry 是欧式几何的一个简单形状它由围绕着一个中心点的三角分段的数量所构造由给定的半径来延展。 同时它也可以用于创建规则多边形其分段数量取决于该规则多边形的边数。
new MeshDepthMaterial(parameters: Object);参数名称描述radius圆形的半径默认值为1segments分段三角面的数量最小值为3默认值为 32thetaStart第一个分段的起始角度默认为0thetaLength圆形扇区的中心角通常被称为“θ”西塔。默认值是2*Pi这使其成为一个完整的圆
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src../lib/three/three.js/scriptscript src../lib/three/dat.gui.js/scriptscript src../controls/index.js/script
/headbody
script// 创建场景const scene new THREE.Scene();// 创建相机 视野角度FOV、长宽比、近截面、远截面const camera new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);// 设置相机位置camera.position.set(0, 0, 20);// 创建渲染器const renderer new THREE.WebGLRenderer();// 设置渲染器尺寸renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 添加二维圆 半径 | 指定创建圆需要的面的数量最少3个 | 开始画的角度0-Math.PI * 2 | 角度定义圆要画多大const geometry new THREE.CircleGeometry(4, 10, 0, Math.PI * 2);const lambert new THREE.MeshLambertMaterial({color: 0xff0000});const basic new THREE.MeshBasicMaterial({wireframe: true});const mesh {pointer: new THREE.SceneUtils.createMultiMaterialObject(geometry, [lambert, basic])};// 添加到场景scene.add(mesh.pointer);// 添加灯光const spotLight new THREE.SpotLight(0xffffff);spotLight.position.set(-10, 10, 90);scene.add(spotLight);initControls(geometry, camera, mesh, scene);const animation () {mesh.pointer.rotation.x 0.01;mesh.pointer.rotation.y 0.01;// 渲染renderer.render(scene, camera);requestAnimationFrame(animation);}animation();
/script
/body/html二维圆 三、自定义二维图形
自定义二维图形需要使用到 Shape 对象 和 ShapeGeometry 对象。
Shpae 使用路径以及可选的孔洞来定义一个二维形状平面。 它可以和 ExtrudeGeometry、ShapeGeometry 一起使用获取点或者获取三角面。
new THREE.Shape( points : Array );参数名称描述points一个 Vector2 数组
ShapeGeometry 形状缓冲几何体用于从一个或多个路径形状中创建一个单面多边形几何体。
new THREE.ShapeGeometry(shapes : Array, curveSegments : Integer)参数名称描述shapes一个单独的shape或者一个包含形状的ArraycurveSegments每一个形状的分段数默认值为12
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src../lib/three/three.js/scriptscript src../lib/three/dat.gui.js/scriptscript src../controls/index.js/script
/headbody
script// 创建场景const scene new THREE.Scene();// 创建相机 视野角度FOV、长宽比、近截面、远截面const camera new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);// 设置相机位置camera.position.set(0, 0, 20);// 创建渲染器const renderer new THREE.WebGLRenderer();// 设置渲染器尺寸renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);const shape new THREE.Shape();// 将绘制点移动到某处shape.moveTo(0, 0);// 从起始位置开始绘制绘制到xy处停止shape.lineTo(0, 3);shape.lineTo(2, 3);shape.lineTo(5, 0);shape.lineTo(0, 0);// 绘制圆// shape.arc(1, 1, Math.PI * 2, Math.PI * 2, 100);const geometry new THREE.ShapeGeometry(shape);const lambert new THREE.MeshLambertMaterial({color: 0xff0000});const basic new THREE.MeshBasicMaterial({wireframe: true});const mesh {pointer: new THREE.SceneUtils.createMultiMaterialObject(geometry, [lambert, basic])};// 添加到场景scene.add(mesh.pointer);// 添加灯光const spotLight new THREE.SpotLight(0xffffff);spotLight.position.set(-10, 10, 90);scene.add(spotLight);const animation () {mesh.pointer.rotation.x 0.01;mesh.pointer.rotation.y 0.01;// 渲染renderer.render(scene, camera);requestAnimationFrame(animation);}animation();
/script
/body/html自定义二维图形 四、立方体
BoxGeometry 是四边形的原始几何类它通常使用构造函数所提供的 “width”、“height”、“depth” 参数来创建立方体或者不规则四边形。
new THREE.BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer)参数名称描述widthX 轴上面的宽度默认值为 1heightY 轴上面的高度默认值为 1depthZ 轴上面的深度默认值为 1widthSegments可选宽度的分段数默认值是 1heightSegments可选高度的分段数默认值是 1depthSegments可选深度的分段数默认值是 1
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src../lib/three/three.js/scriptscript src../lib/three/dat.gui.js/scriptscript src../controls/index.js/script
/headbody
script// 创建场景const scene new THREE.Scene();// 创建相机 视野角度FOV、长宽比、近截面、远截面const camera new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);// 设置相机位置camera.position.set(0, 0, 20);// 创建渲染器const renderer new THREE.WebGLRenderer();// 设置渲染器尺寸renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 宽度 x轴方向 | 高度 y轴方向 | 深度 z轴方向 | x轴方向将面分成多少份 | y... | z...const geometry new THREE.BoxGeometry(3, 3, 3, 1, 1, 1);const lambert new THREE.MeshLambertMaterial({color: 0xff0000});const basic new THREE.MeshBasicMaterial({wireframe: true});const mesh {pointer: new THREE.SceneUtils.createMultiMaterialObject(geometry, [lambert, basic])};// 添加到场景scene.add(mesh.pointer);// 添加灯光const spotLight new THREE.SpotLight(0xffffff);spotLight.position.set(-10, 10, 90);scene.add(spotLight);initControls(geometry, camera, mesh, scene);const animation () {mesh.pointer.rotation.x 0.01;mesh.pointer.rotation.y 0.01;// 渲染renderer.render(scene, camera);requestAnimationFrame(animation);}animation();
/script
/body/html立方体 五、球体
SphereGeometry 是 一个用于生成球体的类。
new THREE.SphereGeometry(radius : Float, widthSegments : Integer, heightSegments : Integer, phiStart : Float, phiLength : Float, thetaStart : Float, thetaLength : Float)参数名称描述radius球体半径默认为 1widthSegments水平分段数沿着经线分段最小值为 3默认值为 32heightSegments垂直分段数沿着纬线分段最小值为 2默认值为 16phiStart指定水平经线起始角度默认值为 0phiLength指定水平经线扫描角度的大小默认值为 Math.PI * 2thetaStart指定垂直纬线起始角度默认值为0thetaLength指定垂直纬线扫描角度大小默认值为 Math.PI
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src../lib/three/three.js/scriptscript src../lib/three/dat.gui.js/scriptscript src../controls/index.js/script
/headbody
script// 创建场景const scene new THREE.Scene();// 创建相机 视野角度FOV、长宽比、近截面、远截面const camera new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);// 设置相机位置camera.position.set(0, 0, 20);// 创建渲染器const renderer new THREE.WebGLRenderer();// 设置渲染器尺寸renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 半径 | x轴方向将面分成多少份 | y轴方向将面分成多少份 | 从x轴什么位置开始回值 | 绘制多少 | 从y轴什么位置开始回值 | 绘制多少const geometry new THREE.SphereGeometry(2, 20, 20, Math.PI * 2, Math.PI * 2, Math.PI * 2, Math.PI * 2);const lambert new THREE.MeshLambertMaterial({color: 0xff0000});const basic new THREE.MeshBasicMaterial({wireframe: true});const mesh {pointer: new THREE.SceneUtils.createMultiMaterialObject(geometry, [lambert, basic])};// 添加到场景scene.add(mesh.pointer);// 添加灯光const spotLight new THREE.SpotLight(0xffffff);spotLight.position.set(-10, 10, 90);scene.add(spotLight);initControls(geometry, camera, mesh, scene);const animation () {mesh.pointer.rotation.x 0.01;mesh.pointer.rotation.y 0.01;// 渲染renderer.render(scene, camera);requestAnimationFrame(animation);}animation();
/script
/body/html球体 六、圆柱体
CylinderGeometry 是 一个用于生成圆柱几何体的类。
new THREE.CylinderGeometry(radiusTop : Float, radiusBottom : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float);参数名称描述radiusTop圆柱的顶部半径默认值是 1radiusBottom圆柱的底部半径默认值是 1height圆柱的高度默认值是 1radialSegments圆柱侧面周围的分段数默认为 32heightSegments圆柱侧面沿着其高度的分段数默认值为 1openEnded一个 Boolean 值指明该圆锥的底面是开放的还是封顶的。默认值为 false即其底面默认是封顶的thetaStart第一个分段的起始角度默认为 0thetaLength圆柱底面圆扇区的中心角通常被称为“θ”西塔。默认值是2*Pi这使其成为一个完整的圆柱
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src../lib/three/three.js/scriptscript src../lib/three/dat.gui.js/scriptscript src../controls/index.js/script
/headbody
script// 创建场景const scene new THREE.Scene();// 创建相机 视野角度FOV、长宽比、近截面、远截面const camera new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);// 设置相机位置camera.position.set(0, 0, 20);// 创建渲染器const renderer new THREE.WebGLRenderer();// 设置渲染器尺寸renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 半径 | x轴方向将面分成多少份 | y轴方向将面分成多少份 | 从x轴什么位置开始回值 | 绘制多少 | 从y轴什么位置开始回值 | 绘制多少const geometry new THREE.CylinderGeometry(2, 2, 2, 20, 4, false);const lambert new THREE.MeshLambertMaterial({color: 0xff0000});const basic new THREE.MeshBasicMaterial({wireframe: true});const mesh {pointer: new THREE.SceneUtils.createMultiMaterialObject(geometry, [lambert, basic])};// 添加到场景scene.add(mesh.pointer);// 添加灯光const spotLight new THREE.SpotLight(0xffffff);spotLight.position.set(-10, 10, 90);scene.add(spotLight);initControls(geometry, camera, mesh, scene);const animation () {mesh.pointer.rotation.x 0.01;mesh.pointer.rotation.y 0.01;// 渲染renderer.render(scene, camera);requestAnimationFrame(animation);}animation();
/script
/body/html圆柱体 七、圆环
TorusGeometry 是 一个用于生成圆环几何体的类。
new THREE.TorusGeometry(radius : Float, tube : Float, radialSegments : Integer, tubularSegments : Integer, arc : Float);参数名称描述radius环面的半径从环面的中心到管道横截面的中心。默认值是 1tube管道的半径默认值为 0.4radialSegments管道横截面的分段数默认值为 12tubularSegments管道的分段数默认值为 48arc圆环的圆心角单位是弧度默认值为 Math.PI * 2
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src../lib/three/three.js/scriptscript src../lib/three/dat.gui.js/scriptscript src../controls/index.js/script
/headbody
script// 创建场景const scene new THREE.Scene();// 创建相机 视野角度FOV、长宽比、近截面、远截面const camera new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);// 设置相机位置camera.position.set(0, 0, 20);// 创建渲染器const renderer new THREE.WebGLRenderer();// 设置渲染器尺寸renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 半径 | 管子的半径 | 沿圆环长度分为多少段 | 宽度分成多少段 | 是否形成一个完整的闭环 |const geometry new THREE.TorusGeometry(2, 1, 10, 10, Math.PI * 2);const lambert new THREE.MeshLambertMaterial({color: 0xff0000});const basic new THREE.MeshBasicMaterial({wireframe: true});const mesh {pointer: new THREE.SceneUtils.createMultiMaterialObject(geometry, [lambert, basic])};// 添加到场景scene.add(mesh.pointer);// 添加灯光const spotLight new THREE.SpotLight(0xffffff);spotLight.position.set(-10, 10, 90);scene.add(spotLight);initControls(geometry, camera, mesh, scene);const animation () {mesh.pointer.rotation.x 0.01;mesh.pointer.rotation.y 0.01;// 渲染renderer.render(scene, camera);requestAnimationFrame(animation);}animation();
/script
/body/html圆环 八、扭结
TorusKnotGeometry 用于创建一个圆环扭结其特殊形状由一对互质的整数p和q所定义。如果p和q不互质创建出来的几何体将是一个环面链接。。
new THREE.TorusKnotGeometry(radius : Float, tube : Float, tubularSegments : Integer, radialSegments : Integer, p : Integer, q : Integer);参数名称描述radius圆环的半径默认值为 1tube管道的半径默认值为 0.4tubularSegments管道的分段数量默认值为 64radialSegments横截面分段数量默认值为 8p这个值决定了几何体将绕着其旋转对称轴旋转多少次默认值是 2q这个值决定了几何体将绕着其内部圆环旋转多少次默认值是 3
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src../lib/three/three.js/scriptscript src../lib/three/dat.gui.js/scriptscript src../controls/index.js/script
/headbody
script// 创建场景const scene new THREE.Scene();// 创建相机 视野角度FOV、长宽比、近截面、远截面const camera new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);// 设置相机位置camera.position.set(0, 0, 20);// 创建渲染器const renderer new THREE.WebGLRenderer();// 设置渲染器尺寸renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 半径 | 管子的半径 | 沿圆环长度分为多少段 | 宽度分成多少段 | 定义结的形状 | 定义结的形状 | 拉伸纽结 |const geometry new THREE.TorusKnotGeometry(2, 1, 20, 6, 1, 3, 1);const lambert new THREE.MeshLambertMaterial({color: 0xff0000});const basic new THREE.MeshBasicMaterial({wireframe: true});const mesh {pointer: new THREE.SceneUtils.createMultiMaterialObject(geometry, [lambert, basic])};// 添加到场景scene.add(mesh.pointer);// 添加灯光const spotLight new THREE.SpotLight(0xffffff);spotLight.position.set(-10, 10, 90);scene.add(spotLight);initControls(geometry, camera, mesh, scene);const animation () {mesh.pointer.rotation.x 0.01;mesh.pointer.rotation.y 0.01;// 渲染renderer.render(scene, camera);requestAnimationFrame(animation);}animation();
/script
/body/html扭结 九、多面体
PolyhedronGeometry 多面体在三维空间中具有一些平面的立体图形。这个类将一个顶点数组投射到一个球面上之后将它们细分为所需的细节级别。
new THREE.PolyhedronGeometry(vertices : Array, indices : Array, radius : Float, detail : Integer);
参数名称描述vertices一个顶点Array数组[1,1,1, -1,-1,-1, … ]indices一个构成面的索引Array数组 [0,1,2, 2,3,0, … ]radius最终形状的半径detail将对这个几何体细分多少个级别。细节越多形状就越平滑
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src../lib/three/three.js/scriptscript src../lib/three/dat.gui.js/scriptscript src../controls/index.js/script
/headbody
script// 创建场景const scene new THREE.Scene();// 创建相机 视野角度FOV、长宽比、近截面、远截面const camera new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);// 设置相机位置camera.position.set(0, 0, 20);// 创建渲染器const renderer new THREE.WebGLRenderer();// 设置渲染器尺寸renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 构成多面体的顶点 | 创建出的面 | 指定多面的大小 | 处理多面体细节 |const geometry new THREE.PolyhedronGeometry(vertices, indices, 4, 0);// 正四面体// const geometry new THREE.TetrahedronGeometry(4, 0);// 正八面体// const geometry new THREE.OctahedronGeometry(4, 0);// 正二十面体// const geometry new THREE.IcosahedronGeometry(4, 0);const lambert new THREE.MeshLambertMaterial({color: 0xff0000});const basic new THREE.MeshBasicMaterial({wireframe: true});const mesh {pointer: new THREE.SceneUtils.createMultiMaterialObject(geometry, [lambert, basic])};// 添加到场景scene.add(mesh.pointer);// 添加灯光const spotLight new THREE.SpotLight(0xffffff);spotLight.position.set(-10, 10, 90);scene.add(spotLight);initControls(geometry, camera, mesh, scene);const animation () {mesh.pointer.rotation.x 0.01;mesh.pointer.rotation.y 0.01;// 渲染renderer.render(scene, camera);requestAnimationFrame(animation);}animation();
/script
/body/html多面体 十、文字
TextGeometry 是一个用于将文本生成为单一的几何体的类。 它是由一串给定的文本以及由加载的font字体和该几何体 ExtrudeGeometry 父类中的设置所组成的参数来构造的。
// text 将要显示的文本
new THREE.TextGeometry(text : String, parameters : Object);参数名称描述fontTHREE.Font 的实例size字体大小默认值为100depth挤出文本的厚度。默认值为 50curveSegments表示文本的曲线上点的数量。默认值为 12bevelEnabled是否开启斜角默认为 falsebevelThickness文本上斜角的深度默认值为 20bevelSize斜角与原始文本轮廓之间的延伸距离。默认值为 8bevelSegments斜角的分段数。默认值为 3
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src../lib/three/three.js/scriptscript src../lib/three/dat.gui.js/scriptscript src../controls/index.js/scriptscript src../assets/font/font.js/script
/headbody
script// 创建场景const scene new THREE.Scene();// 创建相机 视野角度FOV、长宽比、近截面、远截面const camera new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);// 设置相机位置camera.position.set(0, 0, 20);// 创建渲染器const renderer new THREE.WebGLRenderer();// 设置渲染器尺寸renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 文字const geometry new THREE.TextGeometry(THREE, textOptions);const lambert new THREE.MeshLambertMaterial({color: 0xff0000});const basic new THREE.MeshBasicMaterial({wireframe: true});const mesh {pointer: new THREE.SceneUtils.createMultiMaterialObject(geometry, [lambert, basic])};// 添加到场景scene.add(mesh.pointer);// 添加灯光const spotLight new THREE.SpotLight(0xffffff);spotLight.position.set(-10, 10, 90);scene.add(spotLight);initControls(geometry, camera, mesh, scene);const animation () {mesh.pointer.rotation.x 0.01;mesh.pointer.rotation.y 0.01;// 渲染renderer.render(scene, camera);requestAnimationFrame(animation);}animation();
/script
/body/html文字 GUI 控制文件
老规矩我们把本篇文章需要使用的 ./controls/index.js 补充完毕
const basicType {// 颜色。默认为一个白色0xffffff的 Color 对象。color: {method: addColor,getValue: item item.color.getStyle(),setValue: (item, value) item.color.setStyle(value),},// skyColor: {method: addColor,getValue: item item.skyColor.getStyle(),setValue: (item, value) item.skyColor.setStyle(value),},// 光照强度。默认值为 1intensity: {method: add,extends: [0, 2],getValue: item item.intensity,setValue: (item, value) item.intensity value,},// 光源照射的最大距离。默认值为 0无限远distance: {method: add,extends: [0, 1],getValue: item item.distance,setValue: (item, value) item.distance value,},// 光线照射范围的角度。默认值为 Math.PI/3angle: {method: add,extends: [0, Math.PI / 2],getValue: item item.angle,setValue: (item, value) item.angle value,},// 决定了光线强度递减的速度。exponent: {method: add,extends: [0, 20],getValue: item item.exponent,setValue: (item, value) item.exponent value,},// 亮度opacity: {extends: [0, 1],getValue: item item.opacity,setValue: (item, value) item.opacity value},// 透明度transparent: {getValue: item item.transparent,setValue: (item, value) item.transparent value},// 线框wireframe: {getValue: item item.wireframe,setValue: (item, value) item.wireframe value},// 显隐visible: {getValue: item item.visible,setValue: (item, value) item.visible value},cameraNear: {extends: [0, 50],getValue: (item, camera) camera.near,setValue: (item, value, camera) camera.near value},cameraFar: {extends: [50, 200],getValue: (item, camera) camera.far,setValue: (item, value, camera) camera.far value},side: {extends: [[font, back, double]],getValue: (item, camera) font,setValue: (item, value) {switch (value) {case font:item.side THREE.FrontSide;break;case back:item.side THREE.BackSide;break;case double:item.side THREE.DoubleSide;break;}}},// 材料的环境颜色ambient: {method: addColor,getValue: (item) item.ambient.getHex(),setValue: (item, value) item.ambient new THREE.Color(value),},// 物体材料本身发出的颜色emissive: {method: addColor,getValue: (item) item.emissive.getHex(),setValue: (item, value) item.emissive new THREE.Color(value),},// 设置高亮部分的颜色specular: {method: addColor,getValue: (item) item.specular.getHex(),setValue: (item, value) item.specular new THREE.Color(value),},// 设置高亮部分的亮度shininess: {extends: [0, 100],getValue: (item) item.shininess,setValue: (item, value) item.shininess value,},red: {extends: [0, 1],getValue: (item) item.uniforms.r.value,setValue: (item, value) item.uniforms.r.value value,},alpha: {extends: [0, 1],getValue: (item) item.uniforms.a.value,setValue: (item, value) item.uniforms.a.value value,},dashSize: {extends: [0, 5],getValue: (item) item.dashSize,setValue: (item, value) item.dashSize value,},width: getMeshValue([0, 20], width),height: getMeshValue([0, 20], height),widthSegments: getMeshValue([0, 20], widthSegments),heightSegments: getMeshValue([0, 20], heightSegments),radius: getMeshValue([1, 20], radius),segments: getMeshValue([3, 80], segments),thetaStart: getMeshValue([0, Math.PI * 2], thetaStart),thetaLength: getMeshValue([0, Math.PI * 2], thetaLength),depth: getMeshValue([0, 20], depth),depthSegments: getMeshValue([0, 20], depthSegments),phiStart: getMeshValue([0, Math.PI * 2], phiStart),radiusTop: getMeshValue([-20, 20], radiusTop),radiusBottom: getMeshValue([-20, 20], radiusBottom),radialSegments: getMeshValue([1, 60], radialSegments),openEnded: getMeshValue([], openEnded),tube: getMeshValue([1, 6], tube),tubularSegments: getMeshValue([0, Math.PI * 2], tubularSegments),arc: getMeshValue([1, 20], arc),p: getMeshValue([1, 10], p),q: getMeshValue([1, 10], q),detail: getMeshValue([0, 5], detail),heightScale: getMeshValue([0, 5], heightScale),size: getMeshValue([0, 10], size),bevelThickness: getMeshValue([1, 30], bevelThickness),bevelEnabled: getMeshValue([], bevelEnabled),bevelSegments: getMeshValue([1, 30], bevelSegments),curveSegments: getMeshValue([1, 30], curveSegments),steps: getMeshValue([0, 10], steps),
}const vertices [1, 1, 1, -1, -1, 1, -1, 1, -1, 1, -1, -1];
const indices [2, 1, 0, 0, 3, 2, 1, 3, 0, 2, 3, 1];function createMaterial(geometry) {const lambert new THREE.MeshLambertMaterial({color: 0xff0000});const basic new THREE.MeshBasicMaterial({wireframe: true});return new THREE.SceneUtils.createMultiMaterialObject(geometry, [lambert, basic]);
}// 字体配置
const textOptions {size: 1,height: 1,weight: normal,font: helvetiker,bevelThickness: 1,bevelEnabled: false,bevelSegments: 1,curveSegments: 1,steps: 1
}const roundValue {width: 1,height: 1,depth: 1,widthSegments: 1,heightSegments: 1,depthSegments: 1, // 不能为 undefinedradialSegments: 1,tubularSegments: 1,detail: 1,size: 1,bevelSegments: 1,curveSegments: 1,steps: 1
}const isPolyhedron item item.type PolyhedronGeometry;const isFont item item.type TextGeometry;function removeAndAdd(item, value, camera, mesh, scene, controls) {const {x,y,z} mesh.pointer.rotation;scene.remove(mesh.pointer);const arg [];for (const key in controls) {if (roundValue[key]) {// ~~位运算符转为数字controls[key] ~~controls[key];}arg.push(controls[key]);}// 多面体if (isPolyhedron(item)) {arg.unshift(vertices, indices);}if (isFont(item)) {mesh.pointer createMaterial(new THREE[item.type](THREE, Object.assign(textOptions, controls)));} else {mesh.pointer createMaterial(new THREE[item.type](...arg));}mesh.pointer.rotation.set(x, y, z);scene.add(mesh.pointer);
}function getMeshValue(extend, name) {return {extends: extend,getValue: (item, camera, mesh) isFont(item) textOptions[name] ! undefined ? textOptions[name] : mesh.children[0].geometry.parameters[name],setValue: (...arg) removeAndAdd(...arg)}
}const itemType {SpotLight: [color, intensity, distance, angle, exponent], // 聚光灯AmbientLight: [color], // 环境光PointLight: [color, intensity, distance], // 点光源DirectionalLight: [color, intensity], // 平行光HemisphereLight: [groundColor, intensity], // 半球光MeshBasicMaterial: [color, opacity, transparent, wireframe, visible], // 基础网格材质MeshDepthMaterial: [wireframe, cameraNear, cameraFar], // 深度网格材质MeshNormalMaterial: [opacity, transparent, wireframe, visible, side],MeshLambertMaterial: [opacity, transparent, wireframe, visible, side, ambient, emissive, color], // 朗伯材质MeshPhongMaterial: [opacity, transparent, wireframe, visible, side, ambient, emissive, color, specular, shininess], // Phong材质ShaderMaterial: [red, alpha], // 着色器材质LineBasicMaterial: [color], // 直线LineDashedMaterial: [dashSize, gapSize], // 虚线PlaneBufferGeometry: [width, height, widthSegments, heightSegments], // 二维屏幕CircleGeometry: [radius, segments, thetaStart, thetaLength], // 二维圆BoxGeometry: [width, height, depth, widthSegments, heightSegments, depthSegments], // 立方体SphereGeometry: [radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength], // 球体CylinderGeometry: [radiusTop, radiusBottom, height, radialSegments, heightSegments, openEnded], // 圆柱体TorusGeometry: [radius, tube, radialSegments, tubularSegments, arc], // 圆环TorusKnotGeometry: [radius, tube, radialSegments, tubularSegments, p, q, heightScale], // 纽结PolyhedronGeometry: [radius, detail], // 多面缓冲几何体TetrahedronGeometry: [radius, detail], // 四面缓冲几何体OctahedronGeometry: [radius, detail], // 八面缓冲几何体IcosahedronGeometry: [radius, detail], // 二十面缓冲几何体TextGeometry: [size, bevelThickness, bevelEnabled, bevelSegments, curveSegments, steps],
}function initControls(item, camera, mesh, scene) {console.log(item, item)const typeList itemType[item.type];const controls {};if (!typeList || !typeList.length) {return;}const gui new dat.GUI();for (let i 0; i typeList.length; i) {const child basicType[typeList[i]];if (child) {controls[typeList[i]] child.getValue(item, camera, mesh.pointer);const childExtends child.extends || [];gui[child.method || add](controls, typeList[i], ...childExtends).onChange((value) {child.setValue(item, value, camera, mesh, scene, controls);})}}
}总结
本篇文章我们讲解了几种常见几何体的基本使用包括二维平面、二维圆、自定义二维图形、立方体、球体、圆柱体、圆环、扭结、多面体、文字。
更多内容扩展请大家自行查阅 three.js官方文档真心推荐读一读
好啦本篇文章到这里就要和大家说再见啦祝你这篇文章阅读愉快你下篇文章的阅读愉快留着我下篇文章再祝 参考资料 Three.js 官方文档WebGLThree.js 入门与实战【作者慕课网_yancy】
