Question

此时我this正在工作。我尝试了很多东西。我尝试从this example中的几何体中获取顶点位置，但geometry.computeCentroids();在新的three.js中不起作用，现在我无法将精灵放到随机几何体的顶点位置。

如何让精灵变身为其他几何体？我想知道如何使精灵移动到其他几何体的顶点位置，lika a cone或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

你的问题并不难，但需要一些数学作业。这是一个想法，编写相应的代码应该不难... ...

在该示例中，对于N个粒子，N个位置被添加到position阵列。这就是为什么＆＃39;特殊＆＃39;公式是写的（而不是SphereGeometry或BoxGeometry）因为每次粒子移动到另一个形状时，它们的位置都会被补充到数组中的i + N新值，而且它不是通过要求它具有N个顶点来定期创建几何体。

如果您想使用自定义几何图形或现有几何图形类而不是自己查找其他公式，解决方法是：

创建几何
遍历其geometry.vertices数组（让我们调用它的长度＆＃39; L＆＃39;）
并应用一些数学：基本上，只复制符合每个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将精灵移动到圆锥或任何其他几何体的顶点（位置）

1 个答案: