介绍,,//立方体
var 才能;cubeGeometry =, new THREE.Geometry (); ,,//,创建一个立方体//才能,v6——背后,v5
,,//,/|,/|//才能,v1 - - - - - - v0 |//才能,|,|,,| |//才能,|,| - - - | - - - | v4 v7版本//才能,|/,|///才能,v2 - - - - - - v3 ,,//创建立方体的顶点
var 才能;vertices =, (
,,new THREE.Vector3(10日,10日,10),//v0
,,new THREE.Vector3(-10年,10日,10),//v1
,,new THREE.Vector3 (-10,, -10,, 10),//v2
,,new THREE.Vector3(10日,-10年,10),//v3
,,new THREE.Vector3 (10, -10,, -10),//v4
,,new THREE.Vector3(10日,10日,-10年),//v5
,,new THREE.Vector3(-10年,10日,-10年),//v6
,,new THREE.Vector3 (-10,, -10,, -10),//v7
)才能;
cubeGeometry.vertices 才能=,顶点; ,,//创建立方的面
var 面临=[才能
,,new THREE.Face3 (0, 1, 2),
,,new THREE.Face3 (0、2、3),
,,new THREE.Face3 (0、3、4),
,,new THREE.Face3 (0、4、5),
,,new THREE.Face3 (1、6、7),
,,new THREE.Face3 (1、7、2),
,,new THREE.Face3 (6、5、4),
,,new THREE.Face3 (6、4、7),
,,new THREE.Face3 (5、6、1),
,,new THREE.Face3 (5、1 0),
,,new THREE.Face3 (3 2 7),
,,new THREE.Face3 (3、7、4)
)才能;
cubeGeometry.faces 才能=,面容, ,,//生成法向量
cubeGeometry.computeFaceNormals才能(); ,, var cubeMaterial =, new THREE.MeshLambertMaterial({颜色:0 x00ffff});
cube 才能=,new THREE.Mesh (cubeGeometry, cubeMaterial); & lt; ! DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
,& lt; meta charset=癠TF-8"比;
,& lt; title> Title
,& lt; style 类型=拔谋?css"比;
,,html, body {
,,,保证金:0;
,,,身高:100%;
,,}
canvas {才能
,,,显示:块;
,,}
,& lt;/style>
& lt;/head>
& lt; body onload=盎?);“比;
& lt;/body>
& lt; script src=https://www.yisu.com/zixun/"构建/three.js ">
这篇文章主要介绍三人。js如何利用顶点绘制立方体,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
示例:
首先,我创建了一个空白的形状:
立方体的形状如下:
然后添加了立方体的顶点,一共8个
接着通过顶点的坐标生成了立方体的面
<强>在这里需要注意:
(1)面是由三个顶点组成的一个三角形面,也是WebGL的实现面的方式。如果需要一个长方形,那就需要由两个三角形组合而成。
(2)如果要绘制的面是朝向相机的,那这个面的顶点的书写方式是逆时针绘制的,比如图上模型的第一个面的添加里面书写的是(0,1,2)。
(3)如果能使模型有灯光的效果,还需要设置法向量,让三人。js自动生成即可,如下
当前的这些步骤只是生成了形状,还需要和以前一样设置一个纹理,再通过THTEE.Mesh()方法生成网格
这样就实现了一个立方体的绘制:
全部代码如下:
