如何在THREE.JS上创建自定义网格？ [英] How to create a custom mesh on THREE.JS?

问题描述

我问了这个并得到了答案：

  var geom = new THREE。几何（）; 
 var v1 = new THREE.Vector3（0,0,0）; 
 var v2 = new THREE.Vector3（0,500,0）; 
 var v3 = new THREE.Vector3（0,500,500）; 
 
 geom.vertices.push（new THREE.Vertex（v1））; 
 geom.vertices.push（new THREE.Vertex（v2））; 
 geom.vertices.push（new THREE.Vertex（v3））; 
 
 var object = new THREE.Mesh（geom，new THREE.MeshNormalMaterial（））; 
 scene.addObject（object）; 
  

我希望这可行，但事实并非如此。

解决方案

您已添加顶点，但忘记将这些顶点放入面中并将其添加到几何体中：

< pre class =lang-js prettyprint-override> geom.faces.push（new THREE.Face3（0,1,2））;


因此您的代码段变为：

  var geom = new THREE.Geometry（）; 
 var v1 = new THREE.Vector3（0,0,0）; 
 var v2 = new THREE.Vector3（0,500,0）; 
 var v3 = new THREE.Vector3（0,500,500）; 
 
 geom.vertices.push（v1）; 
 geom.vertices.push（v2）; 
 geom.vertices.push（v3）; 
 
 geom.faces.push（new THREE.Face3（0,1,2））; 
 
 var object = new THREE.Mesh（geom，new THREE.MeshNormalMaterial（））; 
 scene.addObject（object）; 
  

想法是Face3实例引用3个顶点（x，y，z coords you's通过使用列表/数组中顶点的索引，先前添加到几何体）。目前你只有3个顶点，你想连接它们，所以你的面引用顶点数组中的索引0,1和2.

因为你正在使用网格法线材质，您可能想要计算几何的法线。此外，请确保您的物体可见（不要太大或靠近相机要被剪掉，朝向正确的方向 - 朝向相机等）
因为你画的是YZ飞机，看到你的三角形，这样的东西应该工作：

  var geom = new THREE。几何（）; 
 var v1 = new THREE.Vector3（0,0,0）; 
 var v2 = new THREE.Vector3（0,500,0）; 
 var v3 = new THREE.Vector3（0,500,500）; 
 
 geom.vertices.push（v1）; 
 geom.vertices.push（v2）; 
 geom.vertices.push（v3）; 
 
 geom.faces.push（new THREE.Face3（0,1,2））; 
 geom.computeFaceNormals（）; 
 
 var object = new THREE.Mesh（geom，new THREE.MeshNormalMaterial（））; 
 
 object.position.z = -100; //向后移动 - 大小为500有点大
 object.rotation.y = -Math.PI * .5; / / triangle指向深度，在Y 
 
 
 $ b（对象）上旋转-90度; 
  

I've asked this and got the answer:

var geom = new THREE.Geometry(); 
var v1 = new THREE.Vector3(0,0,0);
var v2 = new THREE.Vector3(0,500,0);
var v3 = new THREE.Vector3(0,500,500);

geom.vertices.push(new THREE.Vertex(v1));
geom.vertices.push(new THREE.Vertex(v2));
geom.vertices.push(new THREE.Vertex(v3));

var object = new THREE.Mesh( geom, new THREE.MeshNormalMaterial() );
scene.addObject(object);

I expected this to work but it didn't.

解决方案

You've added vertices, but forgot to put those vertices into a face and add that to the geometry:

geom.faces.push( new THREE.Face3( 0, 1, 2 ) );

so your snippet becomes:

var geom = new THREE.Geometry(); 
var v1 = new THREE.Vector3(0,0,0);
var v2 = new THREE.Vector3(0,500,0);
var v3 = new THREE.Vector3(0,500,500);

geom.vertices.push(v1);
geom.vertices.push(v2);
geom.vertices.push(v3);

geom.faces.push( new THREE.Face3( 0, 1, 2 ) );

var object = new THREE.Mesh( geom, new THREE.MeshNormalMaterial() );
scene.addObject(object);

The idea is that a Face3 instance references 3 vertices(the x,y,z coords you've added previously to the geometry) by using the indices of the vertices in the list/array. Currently you only have 3 vertices and you want to connect them,so your face references index 0,1 and 2 in the vertices array.

Since you're using a mesh normals material, you might want to compute normals for the geometry. Also, make sure your object can be visible (is not to big or to close to the camera to be clipped out, is facing the right direction - towards the camera, etc.) Since you're drawing in the YZ plane, to see your triangle, something like this should work:

var geom = new THREE.Geometry(); 
var v1 = new THREE.Vector3(0,0,0);
var v2 = new THREE.Vector3(0,500,0);
var v3 = new THREE.Vector3(0,500,500);

geom.vertices.push(v1);
geom.vertices.push(v2);
geom.vertices.push(v3);

geom.faces.push( new THREE.Face3( 0, 1, 2 ) );
geom.computeFaceNormals();

var object = new THREE.Mesh( geom, new THREE.MeshNormalMaterial() );

object.position.z = -100;//move a bit back - size of 500 is a bit big
object.rotation.y = -Math.PI * .5;//triangle is pointing in depth, rotate it -90 degrees on Y

scene.add(object);

这篇关于如何在THREE.JS上创建自定义网格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！