Three.js - 自定义形状？

我是新来的three.js ...到目前为止，我可以用创建形状和场景&玩相机视图。Three.js - 自定义形状？

在我的项目，我创建的形状是球体和我使用的图像纹理为材料....

我的问题是，如何让自定义形状（不是球体，矩形......）？例如，我如何创建半球？

我现在代码：

  // create texture 
    texture = THREE.ImageUtils.loadTexture('red.png');  

    // create a sphere shape   
    geometry = new THREE.SphereGeometry(50, 16, 16); 

    // give a shape red color 
    material = new THREE.MeshLambertMaterial({map: texture}); 

    // create an object 
    mesh = new THREE.Mesh(geometry, material);

来源

2011-11-27 BorisD

有通过3D编辑器使用几何three.js所，从出口车型（如搅拌机，为此，一个漂亮的three.js exporter已经存在），创造多种方式几何从头开始。

一种方法是创建THREE.Geometry实例并添加顶点，然后找出这些连接如何添加面索引，但这不是一个简单的方法。我建议开始与现有的几何形状（在演员/几何形状包中），如THREE.CubeGeometry，THREE.CylinderGeometry，THREE.IcosahedronGeometry，THREE.OctahedronGeometry等）

此外，还有一些非常好的类，允许您生成挤出（THREE.ExtrudeGeometry）和车床（THREE.LatheGeometry）。挤压见example。

您提到了创建半个球体。这是使用LatheGeometry的理想选择。所有你需要做的就是创建一个半圆形路径（作为Vector3实例的一个数组），并将其传递给车床，以便它将半圆旋转为3D--半球。下面是一个例子：

var pts = [];//points array - the path profile points will be stored here 
var detail = .1;//half-circle detail - how many angle increments will be used to generate points 
var radius = 200;//radius for half_sphere 
for(var angle = 0.0; angle < Math.PI ; angle+= detail)//loop from 0.0 radians to PI (0 - 180 degrees) 
    pts.push(new THREE.Vector3(Math.cos(angle) * radius,0,Math.sin(angle) * radius));//angle/radius to x,z 
geometry = new THREE.LatheGeometry(pts, 12);//create the lathe with 12 radial repetitions of the profile

的塞子形状到您的网和鲍勃的你大爷！

您也可以选择使用GeometryUtils中心网/支点：

THREE.GeometryUtils.center(geometry);

玩得开心！

来源

2011-11-27 10:15:53

谢谢队友......我可以看到你知道你在说什么......所以你有一个想法，我该如何让对象可拖动？我看到一些例子，发现它与Three.Ray有关...你知道这件事吗？ – BorisD

很高兴它有帮助。每当我想用three.js做一些事时，我会检查是否有一个例子:) [webgl_interactive_draggablecubes]（http://mrdoob.github.com/three.js/examples/webgl_interactive_draggablecubes.html）是开始的地方。您需要使用mouseup/mousedown/mousemove监听器。这个想法是鼠标二维坐标转换为基于相机的3D，并且射线在空间深处“射击”。然后有一个测试来检查该射线/线上是否有任何对象（任何交叉点），如果是，SELECTED设置为列表中的第一个对象（如果有的话）..等 –

长话短说，如果您复制那些3听众进入您的项目，并在顶部有SELECTED和INTERSECTED和投影机变量，它也应该在您的文件中工作。 –

Three.js - 自定义形状？

回答

相关问题