如何使 three.js 精灵面向特定矢量？答案

【问题标题】：How can I make a three.js sprite face towards a specific vector?如何使 three.js 精灵面向特定矢量？
【发布时间】：2014-10-10 04:46:36
【问题描述】：

我正在使用 Three.JS 修订版 68。我想制作一个由小圆形精灵组成的球体，就好像这些小圆形精灵是球体的“皮肤”一样。问题是我使用画布创建的圆形精灵应该都面向这个（不存在的）球体的中心，但它们平行于屏幕：

我尝试使用 Sprites 应该理解的 lookAt(vector) 方法，因为它们是 Object3D 的子类，但它被完全忽略了，并且精灵不会改变它们所面对的方向：

sphereOfSprites = new THREE.Object3D(),

camera, scene, renderer;

init();
animate();

function init() {

    var container, particles, particle;

    container = document.createElement('div');
    document.body.appendChild(container);

    camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
    camera.position.z = 1000;

    scene = new THREE.Scene();

    renderer = new THREE.CanvasRenderer();
    renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
    container.appendChild( renderer.domElement );


    var radius = 250;
    var numOfSpikes = 200;
    var vector = new THREE.Vector3(1,0,0);
    for (var i = 0; i < numOfSpikes; i++) {

        particle = new THREE.Sprite( new THREE.SpriteMaterial( {
            map: new THREE.Texture( generateCircularSprite("white") ),
        blending: THREE.AdditiveBlending    } ) );
        particle.position.x = Math.random() * 2 - 1;
        particle.position.y = Math.random() * 2 - 1;
        particle.position.z = Math.random() * 2 - 1;
        particle.position.normalize();
        particle.position.multiplyScalar( radius );
        particle.scale.multiplyScalar( 25 );

        // HERE IS WHERE I TRY TO MAKE THE SPRITE PARTICLE LOOK TOWARDS THE CENTER OF THE SPHERE
        vector.copy( particle.position );
        particle.lookAt(vector);
        sphereOfSprites.add( particle );
    }
    scene.add(sphereOfSprites)
}


function generateCircularSprite(color) {
    var canvas = document.createElement('canvas');
    canvas.height = 100;
    canvas.width = 100;
    var context = canvas.getContext('2d');
    var centerX = canvas.width / 2;
    var centerY = canvas.height / 2;
    var radius = 50;

    context.beginPath();
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
    context.fillStyle = 'green';
    context.fill();
    return canvas;
}

我可以使用什么来使精灵面向我想要的方向？

【问题讨论】：

标签： canvas three.js sprite

【解决方案1】：

为了补充 Leeft 的答案，您还告诉粒子“看”自己：

vector.copy( particle.position );
    particle.lookAt(vector);

我想你的意思是：

particle.lookAt(sphereOfSprites.position);

我创建了一个 jsfiddle，它使用 Leeft 建议的 planeGeometry 以及我上面建议的小改动。
在这里查看小提琴：http://jsfiddle.net/yxtp8g4q/

【讨论】：

感谢您的宝贵时间！顺便说一句，我使用particle.position 是因为我认为lookAt 期望将“方向”作为参数，而不是我希望对象查看的“实际目标点”。也谢谢你！

【解决方案2】：

Sprite 具有一种特殊的渲染方式，因此您始终可以直接看到它们（它们甚至不面向相机，它们始终平放在屏幕上）。要做你想做的事，你必须创建自己的对象。

【讨论】：