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

问题描述

我是 Three.js 的新手……到目前为止，我可以创建形状和场景 &玩相机视图.

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?

我现在的代码:

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

推荐答案

在 Three.js 中有多种使用几何的方法，从通过 3D 编辑器导出模型(例如 Blender，一个很好的 three.js exporter 已经存在 )，从头开始创建几何体.

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.

一种方法是创建 THREE.Geometry 的实例并添加顶点，然后计算它们如何连接以添加面索引，但这不是一种简单的方法.我建议从现有的几何图形(在 extras/geometries 包中找到)开始，例如 THREE.CubeGeometry、THREE.CylinderGeometry、THREE.IcosahedronGeometry、THREE.OctahedronGeometry 等)

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.)

此外，还有一些非常好的类允许您生成挤压(THREE.ExtrudeGeometry)和车床(THREE.LatheGeometry).对于挤压，请参阅此示例.

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

您提到创建半个球体.这是使用 LatheGeometry 的理想选择.您需要做的就是创建一个半圆路径(作为 Vector3 实例的数组)并将其传递给车床，以便将半圆旋转成 3D - 一个半球.举个例子:

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

将该几何体插入您的网格中，Bob 就是您的叔叔！

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

或者，您可以使用 GeometryUtils 使网格/枢轴居中:

Optionally you can centre the mesh/pivot using GeometryUtils:

THREE.GeometryUtils.center(geometry);

玩得开心！

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