Question

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

enter image description here

我尝试使用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;
}

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

Answer 1

Sprites有一种特殊的渲染方式，因此你总是直接看到它们（它们甚至不是面向相机，它们总是在屏幕上是平的）。要做你想做的事，你必须改为创建自己的对象。

Answer 2

要添加到Leeft的答案中，您还要告诉粒子“看”自己：

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

我认为你的意思是：

particle.lookAt(sphereOfSprites.position);

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

如何将一个三个精灵面向特定的向量？

2 个答案: