从 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/
最佳答案
尝试更改此行:
geometry.vertices.push( new THREE.Vertex( particle.position ) );
对此:
geometry.vertices.push( particle.position );
关于javascript - Vertex 和 Vector3 在 Three.js 中不可互换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21687397/