移动相机时屏幕变为空白

时间：2018-02-04 19:20:08

标签： three.js camera rendering renderer

我正在尝试在three.js中创建一些东西，并且我在从文本文件构建几何图形方面取得了一定的成功。首先，我设法获得一个游戏级文件，以显示完整的纹理。然后我尝试从那个游戏中加载模型，一旦我试图移动，屏幕突然变成空白。我可以环顾四周，但移动会杀死屏幕。

然后我删除了关于加载模型的部分，但仍保留在内存中的位置，同样的事情发生了。

在仔细观察之后，事实证明，在我将相机的位置设置到玩家的位置后，然后尝试移动，即屏幕变为空白时。

一些涉及相机设置方式的代码片段：

var getPlayers = document.createElement("select");
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.001, 10000 );
var LOADING_COMPLETE = false;

一大堆加载函数跟随...... 

function CompleteTheLoading()
{
    document.getElementById("mainmenu").innerHTML = "<b>Jump to </b>";
    document.getElementById("mainmenu").appendChild(getPlayers);
    yawObject.position.x = jklthings[getPlayers.value][3];
    yawObject.position.y = jklthings[getPlayers.value][4];
    yawObject.position.z = jklthings[getPlayers.value][5];
    yawObject.rotation.z = jklthings[getPlayers.value][7]*Math.PI/180;
    LOADING_COMPLETE = true;
    animate();
}
getPlayers.onchange = function()
{
    velocity.x = 0;
    velocity.y = 0;
    velocity.z = 0;
    yawObject.position.x = jklthings[getPlayers.value][3];
    yawObject.position.y = jklthings[getPlayers.value][4];
    yawObject.position.z = jklthings[getPlayers.value][5];
    yawObject.rotation.z = jklthings[getPlayers.value][7]*Math.PI/180;
    if (document.activeElement != document.body) document.activeElement.blur();
}


var mouseX = 0;
var mouseY = 0;
var mouseK = 0;
var havePointerLock = 'pointerLockElement' in document ||
    'mozPointerLockElement' in document ||
    'webkitPointerLockElement' in document;
var moveForward = false;
var moveBackward = false;
var moveLeft = false;
var moveRight = false;
var canJump = false;
var prevTime = performance.now();
var velocity = new THREE.Vector3();
var direction = new THREE.Vector3();

var onKeyDown = function ( event ) {
    switch ( event.keyCode ) {
        case 38: // up
        case 87: // w
            moveForward = true;
            break;
        case 37: // left
        case 65: // a
            moveLeft = true;
            break;
        case 40: // down
        case 83: // s
            moveBackward = true;
            break;
        case 39: // right
        case 68: // d
            moveRight = true;
            break;
    }
};
var onKeyUp = function ( event ) {
    switch( event.keyCode ) {
        case 38: // up
        case 87: // w
            moveForward = false;
            break;
        case 37: // left
        case 65: // a
            moveLeft = false;
            break;
        case 40: // down
        case 83: // s
            moveBackward = false;
            break;
        case 39: // right
        case 68: // d
            moveRight = false;
            break;
        case 78: // n
            if(getPlayers.selectedIndex==getPlayers.length-1)
                getPlayers.selectedIndex=0;
            else
                getPlayers.selectedIndex=getPlayers.selectedIndex+1;
            getPlayers.onchange();
            break;
        case 80: // p
            if(getPlayers.selectedIndex==0)
                getPlayers.selectedIndex=getPlayers.length-1;
            else
                getPlayers.selectedIndex=getPlayers.selectedIndex-1;
            getPlayers.onchange();
            break;
        case 13: // Enter
            getPlayers.onchange();
            break;
    }
};
document.addEventListener( 'keydown', onKeyDown, false );
document.addEventListener( 'keyup', onKeyUp, false );

var pitchObject = new THREE.Object3D();
pitchObject.add( camera );
var yawObject = new THREE.Object3D();
yawObject.add( pitchObject );
scene.add(yawObject);
var PI_2 = Math.PI / 2;
camera.rotation.x = 90*Math.PI/180;

function animate()
{
    var time = performance.now();
    var delta = ( time - prevTime ) / 1000;
    velocity.x -= velocity.x * 1.0 * delta;
    velocity.y -= velocity.y * 1.0 * delta;
    velocity.z -= velocity.z * 1.0 * delta;
    direction.z = Number( moveForward ) - Number( moveBackward );
    direction.x = Number( moveLeft ) - Number( moveRight );
    direction.normalize(); // this ensures consistent movements in all directions
    if ( moveForward || moveBackward )
    {
        velocity.y -= direction.z * 1.0 * -delta;
        velocity.z -= direction.z * pitchObject.rotation.x * 1.0 * -delta;;
    }
    if ( moveLeft || moveRight )
        velocity.x -= direction.x * 1.0 * delta;
    if(mouseK==1)
    {

        yawObject.rotation.z -= mouseX * 0.01;
        pitchObject.rotation.x -= mouseY * 0.01;
        pitchObject.rotation.x = Math.max( - PI_2, Math.min( PI_2, pitchObject.rotation.x ) );
    }
    yawObject.translateX( velocity.x * delta );
    yawObject.translateY( velocity.y * delta );
    yawObject.translateZ( velocity.z * delta );
    renderer.render( scene, camera );
    prevTime = time;
    requestAnimationFrame( animate );
}
function mouseMovement(e)
{
    mouseX = e.movementX || e.mozMovementX || e.webkitMovementX || 0;
    mouseY = e.movementY || e.mozMovementY || e.webkitMovementY || 0;
}

renderer.domElement.addEventListener( 'mousedown', function()
{
    if(LOADING_COMPLETE==true)
    {
        mouseK = 1;
        document.addEventListener("mousemove", mouseMovement, false);
    }
},false);
renderer.domElement.addEventListener( 'mouseup', function()
{
    // Ask the browser to release the pointer
    document.removeEventListener("mousemove", mouseMovement, false);
    mouseX = 0;
    mouseY = 0;
    mouseK = 0;
},false);

现在，您可能会注意到相机设置为某个角度。这是因为游戏为Z-up而three.js为Y-up。旋转和重新计算整个关卡并不好玩，所以我只是混淆了相机。

此外，在我改变getPlayers的大部分时间里，它仍会呈现，但在我移动之后，即使在getPlayers之后也无法取回它。

制作片段，奇怪的是，它在设置yawObject的位置时有效。除非它不会在此代码段中运行。但无论如何它在这里。

<html>
<head>
<title>test</title>
</head>
<body>
<script src="https://threejs.org/build/three.js"></script>
<script>
var LOADING_COMPLETE=true;

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.001, 10000 );

// A whole lot of Loading Functions removed...
// All that remains is three's Materials Example:
var geometry = new THREE.TorusKnotGeometry( 10, 3, 100, 16 );
var mesh = new THREE.Mesh( geometry, new THREE.MeshNormalMaterial({}) );
scene.add( mesh );

var mouseX = 0;
var mouseY = 0;
var mouseK = 0;
var havePointerLock = 'pointerLockElement' in document ||
	'mozPointerLockElement' in document ||
	'webkitPointerLockElement' in document;
var moveForward = false;
var moveBackward = false;
var moveLeft = false;
var moveRight = false;
var canJump = false;
var prevTime = performance.now();
var velocity = new THREE.Vector3();
var direction = new THREE.Vector3();

var onKeyDown = function ( event ) {
	switch ( event.keyCode ) {
		case 38: // up
		case 87: // w
			moveForward = true;
			break;
		case 37: // left
		case 65: // a
			moveLeft = true;
			break;
		case 40: // down
		case 83: // s
			moveBackward = true;
			break;
		case 39: // right
		case 68: // d
			moveRight = true;
			break;
	}
};
var onKeyUp = function ( event ) {
	switch( event.keyCode ) {
		case 38: // up
		case 87: // w
			moveForward = false;
			break;
		case 37: // left
		case 65: // a
			moveLeft = false;
			break;
		case 40: // down
		case 83: // s
			moveBackward = false;
			break;
		case 39: // right
		case 68: // d
			moveRight = false;
			break;
		case 78: // n
			if(getPlayers.selectedIndex==getPlayers.length-1)
				getPlayers.selectedIndex=0;
			else
				getPlayers.selectedIndex=getPlayers.selectedIndex+1;
			getPlayers.onchange();
			break;
		case 80: // p
			if(getPlayers.selectedIndex==0)
				getPlayers.selectedIndex=getPlayers.length-1;
			else
				getPlayers.selectedIndex=getPlayers.selectedIndex-1;
			getPlayers.onchange();
			break;
		case 13: // Enter
			getPlayers.onchange();
			break;
	}
};
document.addEventListener( 'keydown', onKeyDown, false );
document.addEventListener( 'keyup', onKeyUp, false );

var pitchObject = new THREE.Object3D();
pitchObject.add( camera );
var yawObject = new THREE.Object3D();
yawObject.add( pitchObject );
scene.add(yawObject);
var PI_2 = Math.PI / 2;
camera.rotation.x = 90*Math.PI/180;

	yawObject.position.x = 10.7;
	yawObject.position.y = 20.2;
	yawObject.position.z = 0;
	yawObject.rotation.z = 135*Math.PI/180;

animate();

function animate()
{
	var time = performance.now();
	var delta = ( time - prevTime ) / 1000;
	velocity.x -= velocity.x * 1.0 * delta;
	velocity.y -= velocity.y * 1.0 * delta;
	velocity.z -= velocity.z * 1.0 * delta;
	direction.z = Number( moveForward ) - Number( moveBackward );
	direction.x = Number( moveLeft ) - Number( moveRight );
	direction.normalize(); // this ensures consistent movements in all directions
	if ( moveForward || moveBackward )
	{
		velocity.y -= direction.z * 1.0 * -delta;
		velocity.z -= direction.z * pitchObject.rotation.x * 1.0 * -delta;;
	}
	if ( moveLeft || moveRight )
		velocity.x -= direction.x * 1.0 * delta;
	if(mouseK==1)
	{

		yawObject.rotation.z -= mouseX * 0.01;
		pitchObject.rotation.x -= mouseY * 0.01;
		pitchObject.rotation.x = Math.max( - PI_2, Math.min( PI_2, pitchObject.rotation.x ) );
	}
	yawObject.translateX( velocity.x * delta );
	yawObject.translateY( velocity.y * delta );
	yawObject.translateZ( velocity.z * delta );
	renderer.render( scene, camera );
	prevTime = time;
	requestAnimationFrame( animate );
}
function mouseMovement(e)
{
	mouseX = e.movementX || e.mozMovementX || e.webkitMovementX || 0;
	mouseY = e.movementY || e.mozMovementY || e.webkitMovementY || 0;
}

renderer.domElement.addEventListener( 'mousedown', function()
{
	if(LOADING_COMPLETE==true)
	{
		mouseK = 1;
		document.addEventListener("mousemove", mouseMovement, false);
	}
},false);
renderer.domElement.addEventListener( 'mouseup', function()
{
	document.removeEventListener("mousemove", mouseMovement, false);
	mouseX = 0;
	mouseY = 0;
	mouseK = 0;
},false);

window.onresize = function()
{
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize( window.innerWidth, window.innerHeight );
}

</script>
</body>
</html>

编辑： 按照Jim的建议，我一点一点地重建了代码，保留了“远程传送”部分，并将其调用到一些任意数字。即使在最后一次加载jklthings之后，一切似乎都能正常工作。只要我将任意数字更改为代表玩家的jklthings的坐标，它就会像上面那样断开。

使用console.log(jklthings[getPlayers.value][3] + "\t" + jklthings[getPlayers.value][4] + "\t" + jklthings[getPlayers.value][5] + "\t" + jklthings[getPlayers.value][7]*Math.PI/180);我得到值-4.9 5.9 .1 0。手动提供这些，一切正常。

0 个答案:

没有答案
相关问题
最新问题