Three.js - 自定义形状？ [英] Three.js - Custom Shapes?

问题描述

我是新来的three.js ......到目前为止来到一个地步，我可以 创建形状和场景和放大器;玩相机视图。

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

我的问题是如何使自定形状（未球形，长方形......）？ 比如如何建立半球？

我的code现在：

  //创建纹理
    质地= THREE.ImageUtils.loadTexture（'red.png'）;

    //创建一个球体形状
    几何=新THREE.SphereGeometry（50，16，16）;

    //给一个形状红色
    材料=新THREE.MeshLambertMaterial（{图：质地}）;

    //创建一个对象
    目=新THREE.Mesh（几何形状，材料）;
 

解决方案

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

一种方法是通过创建THREE.Geometry的实例，并添加顶点，然后制定出如何将这些连接添加脸上指数，但是这并不是一个简单的方法来做到这一点。 我建议开始与现有的几何形状（在演员/几何包中找到），如THREE.CubeGeometry，THREE.CylinderGeometry，THREE.IcosahedronGeometry，THREE.OctahedronGeometry等）

此外还有一些非常好的类，使你产生挤出（THREE.ExtrudeGeometry）和车床（THREE.LatheGeometry）。对于挤压看到这例如的。

您提到创建半个球体。这对于使用LatheGeometry的理想人选。 所有你需要做的就是创建一个半圈的路径（如Vector3类型实例数组），并传递到车，因此旋转半圈成3D - 一个半球。 这里有一个例子：

 变种分= []; //点阵列 - 路径剖面点将被保存在这里
变种细节= 0.1; //半圆细节 - 多少角度增量将用于产生分
VAR半径= 200; //半径half_sphere
对于（VAR角= 0.0;角度θ; Math.PI;角+ =详细）//循环从0.0弧度PI（0  -  180度）
    pts.push（新THREE.Vector3（Math.cos（角度）*半径，0，Math.sin（角度）*半径））; //角度/半径X，Z
几何=新THREE.LatheGeometry（PTS，12）; //创建一个配置文件12径向重复车床
 

插入该几何形状到您的网格，鲍勃的你叔叔！

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

  THREE.GeometryUtils.center（几何）;
 

玩得开心！

I am new to the three.js...so far came to a point where I can create shapes and scene & play with the camera view.

In my project the shapes I created are spheres and I used image as texture for material....

My question is how to make a custom shape (not sphere,rectangle...)? For example how can I create half sphere?

My code for now:

            // 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 );

解决方案

There are multiple ways to use geometry in three.js, from exporting models via a 3D editor (like Blender, for which a nice three.js exporter already exists ), to creating geometry from scratch.

One way would by to create instance of THREE.Geometry and add vertices, then work out how those connect to add face indices, but this not an easy way to do it. I would suggest starting with the existing geometries(found in the extras/geometries package) like THREE.CubeGeometry,THREE.CylinderGeometry,THREE.IcosahedronGeometry,THREE.OctahedronGeometry, etc.)

Additionally there are some really nice classes that allow you to generate extrusions(THREE.ExtrudeGeometry) and lathes(THREE.LatheGeometry). For extrusions see this example.

You mentioned creating half a sphere. That's an ideal candidate for using LatheGeometry. All you need to do is create a half-circle path (as an array of Vector3 instances) and pass that to the lathe so it revolves the half-circle into 3D - a half sphere. Here's an example:

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

Plug that geometry into your mesh and Bob's you uncle!

Optionally you can centre the mesh/pivot using GeometryUtils:

THREE.GeometryUtils.center(geometry);

Have fun!

这篇关于Three.js - 自定义形状？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！