在我的场景中，我有一层，四面墙和两个盒子。我使用fps来控制我的相机。我列出了可碰撞的objets（colmeshList）。但是当我制作一条光线时，没有击中相机和colmeshList之间的相交。我不明白我的错误在哪里以及我没有什么不妥之处。
`var scene, anbientLight, controls, camera, renderer;
var geometry, material, mesh, bbox ;
var collmeshList = [];
var prevTime = performance.now();
var velocity = new THREE.Vector3();
init();
animate();
function init() {
scene = new THREE.Scene();
ambientLight = new THREE.AmbientLight(0x020202);
scene.add(ambientLight);
//////WORLD
//FLOOR
floorGeometry = new THREE.PlaneGeometry( 500, 500 );
floorMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: false } );
floorMesh = new THREE.Mesh( floorGeometry, floorMaterial );
floorMesh.rotation.x = Math.PI/2;
floorMesh.rotation.y = Math.PI;
scene.add( floorMesh );
//WALLS
W01Geometry = new THREE.BoxGeometry( 500, 200,0.001, 8,8 );
W01Material = new THREE.MeshBasicMaterial( { color: 0xffffff, side:THREE.DoubleSide, wireframe: false } );
W01Mesh = new THREE.Mesh( W01Geometry, W01Material );
W01Mesh.position.z = -250;
collmeshList.push (W01Mesh);
scene.add( W01Mesh );
W02Geometry = new THREE.BoxGeometry( 500, 200,0.001, 8,8 );
W02Material = new THREE.MeshBasicMaterial( { color: 0xffffff, side:THREE.DoubleSide, wireframe: false } );
W02Mesh = new THREE.Mesh( W02Geometry, W02Material );
W02Mesh.rotation.y = Math.PI/2;
W02Mesh.position.x = -250;
//W01Mesh.rotation.y = Math.PI;
collmeshList.push (W02Mesh);
scene.add( W02Mesh );
W03Geometry = new THREE.BoxGeometry( 500, 200,0.001, 8,8 );
W03Material = new THREE.MeshBasicMaterial( { color: 0xffffff, side:THREE.DoubleSide, wireframe: false } );
W03Mesh = new THREE.Mesh( W03Geometry, W03Material );
W03Mesh.rotation.y = -Math.PI/2;
W03Mesh.position.x = 250;
collmeshList.push (W03Mesh);
scene.add( W03Mesh );
W04Geometry = new THREE.BoxGeometry( 500, 200,0.001, 8,8 );
W04Material = new THREE.MeshBasicMaterial( { color: 0xffffff, side:THREE.DoubleSide, wireframe: false } );
W04Mesh = new THREE.Mesh( W04Geometry, W01Material );
W04Mesh.rotation.y = Math.PI;
W04Mesh.position.z = -250;
collmeshList.push (W04Mesh);
scene.add( W04Mesh );
//wallGroup = new THREE.Group();
//wallGroup.add(W01Mesh, W02Mesh, W03Mesh, W04Mesh);
//wallGroup.position.y = 50;
//scene.add(wallGroup);
//OBSTACLES
B01Geometry = new THREE.BoxGeometry( 50, 50,50 );
B01Material = new THREE.MeshBasicMaterial( { color: 0xffffff, side:THREE.DoubleSide, wireframe: false } );
B01Mesh = new THREE.Mesh( B01Geometry, B01Material );
B01Mesh.position.z = -100;
B01Mesh.position.y = 25;
collmeshList.push (B01Mesh);
scene.add( B01Mesh );
B02Geometry = new THREE.BoxGeometry( 50, 50,50 );
B02Material = new THREE.MeshBasicMaterial( { color: 0xffffff, side:THREE.DoubleSide, wireframe: false } );
B02Mesh = new THREE.Mesh( B02Geometry, B02Material );
B02Mesh.position.z = 100;
B02Mesh.position.y = 25;
collmeshList.push (B02Mesh);
scene.add( B02Mesh );
//////PLAYER
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.x = 0;
camera.position.y = 40;
camera.position.z = 50;
camera.updateMatrix();
//////CONTROLS CAMERA
controls = new THREE.FirstPersonControls( camera );
scene.add( controls.getObject() );
//////RENDU
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
}
function clearText()
{ document.getElementById('message').innerHTML = '..........'; }
function appendText(txt)
{ document.getElementById('message').innerHTML += txt; }
function animate() {
requestAnimationFrame( animate );
playerControls();
//collupdate();
renderer.render( scene, camera );
}
function playerControls () {
//unlockAllDirection();
// Are the controls enabled? (Does the browser have pointer lock?)
if ( controls.controlsEnabled ) {
// Save the current time
var time = performance.now();
// Create a delta value based on current time
var delta = ( time - prevTime ) / 1000;
// Set the velocity.x and velocity.z using the calculated time delta
velocity.x -= velocity.x * 10.0 * delta;
velocity.z -= velocity.z * 10.0 * delta;
// As velocity.y is our "gravity," calculate delta
velocity.y -= 9.8 * 100.0 * delta; // 100.0 = mass
if ( controls.moveForward ) {
velocity.z -= 400.0 * delta;
// Nothing to do!
}
if ( controls.moveBackward ) {
velocity.z += 400.0 * delta;
}
if ( controls.moveLeft ) {
velocity.x -= 400.0 * delta;
}
if ( controls.moveRight ) {
velocity.x += 400.0 * delta;
}
// Update the position using the changed delta
controls.getObject().translateX( velocity.x * delta );
controls.getObject().translateY( velocity.y * delta );
controls.getObject().translateZ( velocity.z * delta );
// Prevent the camera/player from falling out of the 'world'
if ( controls.getObject().position.y < 10 ) {
velocity.y = 0;
controls.getObject().position.y = 10;
}
// Save the time for future delta calculations
prevTime = time;
}
}
function collupdate (){
clearText();
var cameraDirection = controls.getDirection(new THREE.Vector3(0, 0, 0)).clone();
direction.applyQuaternion( cameraDirection.quaternion );
var ray = new THREE.Raycaster(controls.getObject().position, cameraDirection);
var intersects = rayCaster.intersectObject(collmeshList, true);
if ( intersects.length > 0 && intersects[0].distance < directionVector.length() )
lockDirection();
appendText(hits);
} `
答案 0 :(得分：0)
您的代码对我有用，我只是改变了一点，我使用ray.intersectObjects代替intersectObject，它适用于three.js r85。
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js - pointerlock controls</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
html,
body {
width: 100%;
height: 100%;
}
body {
background-color: #ffffff;
margin: 0;
overflow: hidden;
font-family: arial;
}
#blocker {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
#instructions {
width: 100%;
height: 100%;
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
color: #ffffff;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/85/three.min.js"></script>
<script src="FirstPersonControls.js"></script>
<div id="blocker">
<div id="instructions">
<span style="font-size:40px"></span>
<br />
</div>
</div>
<script>
var scene, anbientLight, controls, camera, renderer;
var geometry, material, mesh, bbox;
var collmeshList = [];
var prevTime = performance.now();
var velocity = new THREE.Vector3();
init();
animate();
function init() {
scene = new THREE.Scene();
ambientLight = new THREE.AmbientLight(0x020202);
scene.add(ambientLight);
//////WORLD
//FLOOR
floorGeometry = new THREE.PlaneGeometry(500, 500);
floorMaterial = new THREE.MeshBasicMaterial({
color: 0xff0000,
wireframe: false
});
floorMesh = new THREE.Mesh(floorGeometry, floorMaterial);
floorMesh.rotation.x = Math.PI / 2;
floorMesh.rotation.y = Math.PI;
scene.add(floorMesh);
//WALLS
W01Geometry = new THREE.BoxGeometry(500, 200, 0.001, 8, 8);
W01Material = new THREE.MeshBasicMaterial({
color: 0xffffff,
side: THREE.DoubleSide,
wireframe: false
});
W01Mesh = new THREE.Mesh(W01Geometry, W01Material);
W01Mesh.position.z = -250;
collmeshList.push(W01Mesh);
scene.add(W01Mesh);
W02Geometry = new THREE.BoxGeometry(500, 200, 0.001, 8, 8);
W02Material = new THREE.MeshBasicMaterial({
color: 0xffffff,
side: THREE.DoubleSide,
wireframe: false
});
W02Mesh = new THREE.Mesh(W02Geometry, W02Material);
W02Mesh.rotation.y = Math.PI / 2;
W02Mesh.position.x = -250;
//W01Mesh.rotation.y = Math.PI;
collmeshList.push(W02Mesh);
scene.add(W02Mesh);
W03Geometry = new THREE.BoxGeometry(500, 200, 0.001, 8, 8);
W03Material = new THREE.MeshBasicMaterial({
color: 0xffffff,
side: THREE.DoubleSide,
wireframe: false
});
W03Mesh = new THREE.Mesh(W03Geometry, W03Material);
W03Mesh.rotation.y = -Math.PI / 2;
W03Mesh.position.x = 250;
collmeshList.push(W03Mesh);
scene.add(W03Mesh);
W04Geometry = new THREE.BoxGeometry(500, 200, 0.001, 8, 8);
W04Material = new THREE.MeshBasicMaterial({
color: 0xffffff,
side: THREE.DoubleSide,
wireframe: false
});
W04Mesh = new THREE.Mesh(W04Geometry, W01Material);
W04Mesh.rotation.y = Math.PI;
W04Mesh.position.z = -250;
collmeshList.push(W04Mesh);
scene.add(W04Mesh);
//wallGroup = new THREE.Group();
//wallGroup.add(W01Mesh, W02Mesh, W03Mesh, W04Mesh);
//wallGroup.position.y = 50;
//scene.add(wallGroup);
//OBSTACLES
B01Geometry = new THREE.BoxGeometry(50, 50, 50);
B01Material = new THREE.MeshBasicMaterial({
color: 0xffffff,
side: THREE.DoubleSide,
wireframe: false
});
B01Mesh = new THREE.Mesh(B01Geometry, B01Material);
B01Mesh.position.z = -100;
B01Mesh.position.y = 25;
collmeshList.push(B01Mesh);
scene.add(B01Mesh);
B02Geometry = new THREE.BoxGeometry(50, 50, 50);
B02Material = new THREE.MeshBasicMaterial({
color: 0xffffff,
side: THREE.DoubleSide,
wireframe: false
});
B02Mesh = new THREE.Mesh(B02Geometry, B02Material);
B02Mesh.position.z = 100;
B02Mesh.position.y = 25;
collmeshList.push(B02Mesh);
scene.add(B02Mesh);
//////PLAYER
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.x = 0;
camera.position.y = 40;
camera.position.z = 50;
camera.updateMatrix();
//////CONTROLS CAMERA
controls = new THREE.FirstPersonControls(camera);
scene.add(controls.getObject());
//////RENDU
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
function clearText() {
document.getElementById('message').innerHTML = '..........';
}
function appendText(txt) {
document.getElementById('message').innerHTML += txt;
}
function animate() {
requestAnimationFrame(animate);
playerControls();
collupdate();
renderer.render(scene, camera);
}
function playerControls() {
//unlockAllDirection();
// Are the controls enabled? (Does the browser have pointer lock?)
if (controls.controlsEnabled) {
// Save the current time
var time = performance.now();
// Create a delta value based on current time
var delta = (time - prevTime) / 1000;
// Set the velocity.x and velocity.z using the calculated time delta
velocity.x -= velocity.x * 10.0 * delta;
velocity.z -= velocity.z * 10.0 * delta;
// As velocity.y is our "gravity," calculate delta
velocity.y -= 9.8 * 100.0 * delta; // 100.0 = mass
if (controls.moveForward) {
velocity.z -= 400.0 * delta;
// Nothing to do!
}
if (controls.moveBackward) {
velocity.z += 400.0 * delta;
}
if (controls.moveLeft) {
velocity.x -= 400.0 * delta;
}
if (controls.moveRight) {
velocity.x += 400.0 * delta;
}
// Update the position using the changed delta
controls.getObject().translateX(velocity.x * delta);
controls.getObject().translateY(velocity.y * delta);
controls.getObject().translateZ(velocity.z * delta);
// Prevent the camera/player from falling out of the 'world'
if (controls.getObject().position.y < 10) {
velocity.y = 0;
controls.getObject().position.y = 10;
}
// Save the time for future delta calculations
prevTime = time;
}
}
function collupdate() {
//clearText();
var cameraDirection = controls.getDirection(new THREE.Vector3(0, 0, 0)).clone();
//direction.applyQuaternion(cameraDirection.quaternion);
var ray = new THREE.Raycaster(controls.getObject().position, cameraDirection);
var intersects = ray.intersectObjects(collmeshList, true);
if (intersects.length > 0)
console.log('intesected');
//appendText(hits);
}
</script>
</body>
</html>