我正在尝试制作太空飞行游戏, 但是有一些奇怪的事情发生了。
当相机达到-1800时,我的几何图形似乎消失了。
我做错了什么?
Three.js r87
var container, debug, renderer, camera, scene;
var geometry, particle, material, pointcloud;
var particleCount = 1000;
var keys = {up:false,down:false};
function init() {
container = document.getElementById('wrapper');
debug = document.getElementById('debug');
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 3000);
camera.position.z = 2000;
scene = new THREE.Scene();
geometry = new THREE.Geometry();
for (var p = 0; p < particleCount; p++) {
particle = new THREE.Vector3(Math.random()*2000-1000, Math.random()*2000-1000, Math.random()*2000-1000);
geometry.vertices.push(particle);
}
material = new THREE.PointsMaterial({size:2, color:0xffffff, transparent:true, depthWrite:false});
pointcloud = new THREE.Points(geometry, material);
scene.add(pointcloud);
animate();
document.addEventListener('keydown', function(e) {
if(e.keyCode == 38) keys.up = true;
if(e.keyCode == 40) keys.down = true;
});
document.addEventListener('keyup', function(e) {
if(e.keyCode == 38) keys.up = false;
if(e.keyCode == 40) keys.down = false;
});
}
function animate() {
requestAnimationFrame(animate);
if(keys.up == true) camera.position.z -= 50;
if(keys.down == true) camera.position.z += 50;
for(var i = 0; i<particleCount; i++) {
particle = geometry.vertices[i];
if(!!particle && particle.z > camera.position.z) {
particle.z = camera.position.z-(Math.random()*2000-1000);
}
}
geometry.verticesNeedUpdate = true;
geometry.elementsNeedUpdate = true;
debug.innerHTML = camera.position.z;
renderer.render(scene, camera);
}
init();
单击画布,然后按向上和向下箭头移动相机: https://jsfiddle.net/c056ahs2/2/