Three.js - 自定义形状?

时间:2011-11-27 07:25:56

标签: javascript 3d 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 );

1 个答案:

答案 0 :(得分:19)

有三种方法可以在three.js中使用几何体,从通过3D编辑器(如Blender,已经存在漂亮的three.js exporter)导出模型到从头开始创建几何体。

一种方法是创建THREE.Geometry的实例并添加顶点,然后计算出这些连接如何添加面部索引,但这不是一种简单的方法。 我建议从现有几何(在extras / 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

将这个几何体插入你的网格中,Bob就是你的叔叔!

您可以选择使用GeometryUtils中心网格/枢轴:

THREE.GeometryUtils.center(geometry);

玩得开心!