javascript - Vertex 和 Vector3 在 Three.js 中不可互换

Question

从 Three.js 修订版 48 开始，我制作了通过线连接的顶点。它工作正常，但当从 48 更新到修订版 65 时，我收到一条错误消息，指出 Vertix 已弃用，应由 Vector3 替换。但是，当我将其替换为 Vector3、Vector2 或 Vector4 时，它的行为会有所不同 - 线条将不再连接到顶点。当 Canvas 是视口(viewport)的宽度时，我还会在边缘遇到一些奇怪的渲染问题。

var container = document.getElementById('container');
var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,1,10000);
var distance = 1000; 
camera.position.z = distance;

var scene = new THREE.Scene();
scene.add(camera);

renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );

camera.lookAt(new THREE.Vector3(0,0,0));

var geometry = new THREE.Geometry();

for ( var i = 0; i < 50; i ++ ) {

    particle = new THREE.Particle( new THREE.ParticleCanvasMaterial( {

        color: Math.random() * 0x808080 + 0x808080, //0x0000000,
        opacity: 1,//0.1,
        program: function ( context ) {

            context.beginPath();
            context.arc( 0, 0, 1, 0, Math.PI * 2, true );
            context.closePath();
            context.fill();

        }

    } ) );
    particle.position.x = Math.random() * 2000 - 1000;
    particle.position.y = Math.random() * 2000 - 1000;
    particle.position.z = Math.random() * 2000 - 1000;
    particle.scale.x = particle.scale.y = Math.random() * 12 + 5;
    scene.add( particle );

    geometry.vertices.push( new THREE.Vertex( particle.position ) );

}

var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.05 } ) );
scene.add( line );

renderer.render( scene, camera );

document.addEventListener( 'mousemove', onMouseMove, false );

function onMouseMove(event){
    mouseX = (event.clientX - window.innerWidth/2) / window.innerWidth/2;
    mouseY = (event.clientY - window.innerHeight/2) / window.innerHeight/2;
    camera.position.x = Math.sin(mouseX * Math.PI) * distance;
    camera.position.y = - Math.sin(mouseY * Math.PI) * distance;
    camera.lookAt(new THREE.Vector3(0,0,0));
    renderer.render( scene, camera );
}

尝试用 Vector3 替换第 42 行的 Vertex:http://jsfiddle.net/kz94z/

Answer 1

尝试更改此行:

geometry.vertices.push( new THREE.Vertex( particle.position ) );

对此:

geometry.vertices.push( particle.position );