[英]Rendering custom geometry in Three.js
I am trying to draw a quad between four vertices in the space using three.js. 我试图使用three.js在空间中的四个顶点之间绘制一个四边形。 I have written the following code but it doesn't work:
我写了以下代码,但它不起作用:
var a = { x:10,
y:10}
var b = {x:50,
y:50}
var geometry = new THREE.Geometry();
geometry.vertices.push( new THREE.Vector3( a.x, a.y, 2 ) );
geometry.vertices.push( new THREE.Vector3( b.x, b.y, 2 ) );
geometry.vertices.push( new THREE.Vector3( b.x, b.y - 60, 2 ) );
geometry.vertices.push( new THREE.Vector3( a.x, a.y, 2 ) );
geometry.faces.push( new THREE.Face3(0,1,2) );
geometry.computeFaceNormals();
var material = new THREE.MeshBasicMaterial({ color: "0xff1100"});
var mesh = new THREE.Mesh( geometry, material );
scene.add(mesh);
where am I making a mistake? 我在哪里弄错了? By the way, to render quads, can I use Face4 or do I have to use Face3?
顺便说一下,要渲染四边形,我可以使用Face4还是必须使用Face3? Is there any good source for learning webgl features all in one place?
是否有任何好的资源可以在一个地方学习webgl功能? Three.js documentation is very well organized and complete.
Three.js文档组织完整,完整。
Quads are no longer supported. 不再支持四边形。 You need to use two
Face3
s, like so: 你需要使用两个
Face3
,如下所示:
var a = { x:10,
y:10 }
var b = { x:50,
y:50 }
var geometry = new THREE.Geometry();
geometry.vertices.push( new THREE.Vector3( a.x, a.y, 2 ) );
geometry.vertices.push( new THREE.Vector3( b.x, a.y, 2 ) );
geometry.vertices.push( new THREE.Vector3( b.x, b.y, 2 ) );
geometry.vertices.push( new THREE.Vector3( a.x, b.y, 2 ) );
geometry.faces.push( new THREE.Face3( 0, 1, 2 ) ); // counter-clockwise winding order
geometry.faces.push( new THREE.Face3( 0, 2, 3 ) );
geometry.computeFaceNormals();
geometry.computeVertexNormals();
Tip: set material.side = THREE.DoubleSide
so both sides of your geometry render. 提示:设置
material.side = THREE.DoubleSide
以便渲染几何体的两侧。 You can set it back to THREE.FrontSide
when you are sure your geometry is correct. 当您确定几何图形正确时,可以将其设置回
THREE.FrontSide
。
For advice on learning three.js and WebGL see Learning WebGL and three.js 有关学习three.js和WebGL的建议,请参阅学习WebGL和three.js
three.js r.70 three.js r.70
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.