Three.js 将精灵移动到圆锥体或任何其他几何体的顶点（位置）

Question

此时我有 this working. I tryed many things. I tryed to get vertices positions from a geometry like in this example，但 geometry.computeCentroids(); 在新的 three.js 中不起作用，现在我无法将我的精灵设置到随机几何体的顶点位置。

如何让精灵变形为其他几何体？我想知道如何让精灵移动到其他几何体的顶点位置，比如圆锥体或 OBJ 模型。在此先感谢您的所有帮助！

var camera, scene, renderer,controls;

var particlesTotal = 512,
    positions = [],
    objects = [],
    current = 0;

init();
animate();

function init() {
    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 5000 );
    camera.position.set( 600, 400, 1500 );
    camera.lookAt( new THREE.Vector3() );
    scene = new THREE.Scene();



    var material=new THREE.SpriteMaterial({
        //map:THREE.ImageUtils.loadTexture('http://threejs.org/examples/textures/sprite.png'),
        color:0xffffff
    });

    for ( var i = 0; i < particlesTotal; i ++ ) {
        var object = new THREE.Sprite(material);
       // object.scale.x = 0.1;
       // object.scale.y = 0.1;
        object.position.x = Math.random() * 4000 - 2000,
            object.position.y = Math.random() * 4000 - 2000,
            object.position.z = Math.random() * 4000 - 2000
        scene.add( object );
        objects.push( object );

    }


        transition();

    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    controls = new THREE.TrackballControls( camera, renderer.domElement );
    controls.rotateSpeed = 0.5;

    window.addEventListener( 'resize', onWindowResize, false );

}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( window.innerWidth, window.innerHeight );
}

function transition() {


    // Plane
    var amountX = 16;
    var amountZ = 32;
    var separation = 150;
    var offsetX = ( ( amountX - 1 ) * separation ) / 2;
    var offsetZ = ( ( amountZ - 1 ) * separation ) / 2;
    for ( var i = 0; i < particlesTotal; i ++ ) {
        var x = ( i % amountX ) * separation;
        var z = Math.floor( i / amountX ) * separation;
        var y = ( Math.sin( x * 0.5 ) + Math.sin( z * 0.5 ) ) * 200;
        positions.push( x - offsetX, y, z - offsetZ );
    }

    // Cube
    var amount = 8;
    var separation = 150;
    var offset = ( ( amount - 1 ) * separation ) / 2;
    for ( var i = 0; i < particlesTotal; i ++ ) {
        var x = ( i % amount ) * separation;
        var y = Math.floor( ( i / amount ) % amount ) * separation;
        var z = Math.floor( i / ( amount * amount ) ) * separation;
        positions.push( x - offset, y - offset, z - offset );
    }

    // Random
    for ( var i = 0; i < particlesTotal; i ++ ) {
        positions.push(
            Math.random() * 4000 - 2000,
            Math.random() * 4000 - 2000,
            Math.random() * 4000 - 2000
        );
    }

    // Sphere
    var radius = 750;
    for ( var i = 0; i < particlesTotal; i ++ ) {
        var phi = Math.acos( -1 + ( 2 * i ) / particlesTotal );
        var theta = Math.sqrt( particlesTotal * Math.PI ) * phi;
        positions.push(
            radius * Math.cos( theta ) * Math.sin( phi ),
            radius * Math.sin( theta ) * Math.sin( phi ),
            radius * Math.cos( phi )
        );
    }

    var offset = current * particlesTotal * 3;
    var duration = 2000;

    for ( var i = 0, j = offset; i < particlesTotal; i ++, j += 3 ) {
        var object = objects[ i ];
        new TWEEN.Tween( object.position )
            .to( {
            x: positions[ j ],
            y: positions[ j + 1 ],
            z: positions[ j + 2 ]
        }, Math.random() * duration + duration )
            .easing( TWEEN.Easing.Exponential.InOut )
            .start();
    }
    new TWEEN.Tween( this )
        .to( {}, duration * 3 )
        .onComplete( transition )
        .start();

    current = ( current + 1 ) % 4;
}

function animate() {
    requestAnimationFrame( animate );

    TWEEN.update();
    controls.update();

    var time = performance.now();
    for ( var i = 0, l = objects.length; i < l; i ++ ) {
        var object = objects[ i ];
        var scale = Math.sin( ( Math.floor( object.position.x ) + time ) * 0.002 ) * 0.3 + 1;
        scale*=100;
        object.scale.set( scale, scale, scale );


    }

    renderer.render( scene, camera );
     renderer.autoClear = false;
}

Answer 1

你的问题不难，但需要一些数学作业。思路是这样的，写出相应的代码应该不难吧...:[=17=]

在示例中，对于 N 个粒子，将 N 个位置添加到 position 数组。这就是编写 'special' 公式（而不是 SphereGeometry 或 BoxGeometry）的原因，因为每次粒子移动到其他形状时，它们的位置都会补间到它们在数组中的 i+N 个新值，并且通过要求它有N个顶点来创建几何体是不规则的。

如果您想使用自定义几何或现有几何 class 而不是自己寻找其他公式，解决方案是：

创建几何图形
遍历其 geometry.vertices 数组（我们称其长度为 'L'）
并应用一些数学：基本上，只复制遇到每个 L/N 个顶点的位置。
```
for(var i=0;i<L;i+=L/N)position.push(geometry.vertices[i].clone());
```
但是大多数时候 L/N 不会产生整数：它会有余数。所以你需要更多的数学。让我们举个例子。

您有 50 个粒子，因此您需要在 position 数组中推入 50 个新值，以设计您的新形状。

如果这个形状有 111 个顶点你不能复制每个位置，有超过 50 个。你可以很容易地想象只复制每个 111 / 50 = 2.22（所以每个 2）个顶点。问题，余数是 11：当你到达 2 * 50 = 100 时，你的形状将有一个 11 / 2 ~= 5 个顶点的洞，在这种情况下它是复制形状的 10%。所以有时你必须复制每 2 个而不是每 3 个顶点以获得平均偏移量和你的精灵在你的形状上的正确分布。多少次？ 11 / 3 = 3.6666.. ~= 3 倍。这些时间也必须在循环中传播，不要一个接一个地发生：50 / 3 ~= 17。第一次必须在 17/2 = 8 或 9（你决定）行动，删除一般转移。我们完了。

结论，你必须写一个检查所有顶点的循环。它每 2 个顶点推送 position 数组中的值，直到第 8 个循环（因此在第 16 个位置），在复制之后它跳转到第 16 + 3 = 19 个位置。它每 2 个值重新开始....

直到第19 + 17 * 2 =第53个位置跳到第56个....

56 + 17 * 2 = 第 90 个位置相同，它在第 93 个位置跳转....

就是这样:)

Three.js 将精灵移动到圆锥体或任何其他几何体的顶点（位置）

Three.js moving sprites to vertices (positions) of cone or any other geometry

animation

sprite

three.js