颗粒在ThreeJS中消失

时间:2017-10-12 09:06:31

标签: javascript three.js

我正在尝试制作太空飞行游戏, 但是有一些奇怪的事情发生了。

当相机达到-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/

0 个答案:

没有答案