Three.js - 在另一个的顶点定位对象

I have an IcosahedronGeometry defined like this (with all the code about colors and non-position stuff omitted):

我有一个像这样定义的IcosahedronGeometry(包含有关颜色和非位置内容的所有代码):

var radius = 200;
geometry = new THREE.IcosahedronGeometry(radius, 2);

var materials = [
    new THREE.MeshPhongMaterial({}),
    new THREE.MeshBasicMaterial({})
];
group1 = THREE.SceneUtils.createMultiMaterialObject(geometry, materials);
group1.position.x = 0;
// rotate a bit just so it spins off-axis
group1.rotation.x = -1.87;

Which creates an almost spherical, many-sided shape. I want to place little spheres at just a few of the vertices of this shape. Let's say 10 spheres. I do this by copying 10 vertices into an array, like this:

这创造了几乎球形,多边形状。我想在这个形状的几个顶点放置小球体。让我们说10个球体。我这样做是通过将10个顶点复制到一个数组中,如下所示:

var vertexArray = [];
for (var i = 0; i < 10; i++) {
    vertexArray.push(geometry4.vertices[i])
}

then, I use the Vectors copied into vertexArray to set the positions off Sprites:

然后,我使用复制到vertexArray中的Vectors来设置Sprite的位置:

for (var i = 0; i < vertexArray.length; i++) {
    var loader = new THREE.TextureLoader()
    var spriteMaterial = new THREE.SpriteMaterial(
        {
            map: loader.load('/glow.png'),
            blending: THREE.AdditiveBlending,
            side: THREE.BackSide
        })
    var sprite = new THREE.Sprite(spriteMaterial)

    sprite.position.set(vertexArray[i].x, vertexArray[i].y, vertexArray[i].z)
    // do i need rotate these by the same amount?
    sprite.rotation.x = -1.87
    scene.add(sprite)
}

This all works fine, except that the Sprites don't line up with the actual vertices on the Icosahedron, they just sit randomly (seemingly) somewhere on the faces. Occasionally a Sprite will sit exactly on a vertex.

这一切都很好,除了Sprites不与二十面体上的实际顶点对齐,它们只是随意地(看似)坐在脸上的某个地方。偶尔Sprite会精确地坐在顶点上。

Am I copying the vertices wrong, or missing a step in here?

我是否错误地复制了顶点,或者错过了这里的一个步骤?

1 个解决方案

#1

Add an object as a child of a parent object, and the child object will rotate with the parent.

将对象添加为父对象的子对象,子对象将与父对象一起旋转。

Use this pattern, instead:

使用此模式,而不是:

var sprite = new THREE.Sprite( spriteMaterial );

sprite.position.copy( vertexArray[i] );

group1.add( sprite );

three.js r.76

#1