My low poly world features gravity added with raycasting to the character. Now, I am looking to incorporate another raycaster in front of the character, specifically the pointer lock controls, to enable walking on non-flat surfaces. This raycaster would always point forwards, aligning with the camera and facing the same direction.
https://i.sstatic.net/eUa46.png
In the image provided, 'b' represents the raycaster. To determine walkability, trigonometry would be utilized to calculate the slope. If feasible, I would use the offset 'a' and the distance from the character to the intersection called 'b' to translate the camera along its local Y and Z axes.
My initial testing led to this code snippet:
#blocker {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
}
#instructions {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
font-size: 14px;
cursor: pointer;
} <div id="blocker">
<div id="instructions">
<p style="font-size:36px">
Click to play
</p>
</div>
</div>
<script type="module">
import * as THREE from "https://cdn.skypack.dev/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d3a7bba1b6b693e3fde2e0e6fde3">[email protected]</a>";
import {PointerLockControls} from "https://cdn.skypack.dev/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f2869a809797b2c2dcc3c1c7dcc2">[email protected]</a>/examples/jsm/controls/PointerLockControls";
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 8, 13);
let renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(innerWidth, innerHeight);
renderer.setClearColor(0x404040);
document.body.appendChild(renderer.domElement);
window.addEventListener("resize", () => {
camera.aspect = innerWidth / innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(innerWidth, innerHeight);
})
const controls = new PointerLockControls( camera, document.body );
const blocker = document.getElementById( 'blocker' );
const instructions = document.getElementById( 'instructions' );
instructions.addEventListener( 'click', function () {
controls.lock();
} );
controls.addEventListener( 'lock', function () {
instructions.style.display = 'none';
blocker.style.display = 'none';
} );
controls.addEventListener( 'unlock', function () {
blocker.style.display = 'block';
instructions.style.display = '';
} );
scene.add( controls.getObject() );
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
let cube = new THREE.Mesh( geometry, material );
scene.add( cube );
function animate(){
renderer.render(scene,camera)
cube.position.copy(controls.getObject().position)
cube.rotation.y = controls.getObject().rotation.y
cube.translateZ(-10)
}
animate();
</script>Difficulty with Pointer Lock not functioning in snippets led me to create a video demonstration to showcase the issue. As depicted, the cube encounters limitations with rotation, working effectively on one side but encountering issues when turning the other way. The relevant code snippets related to this problem include these 3 lines:
cube.position.copy(controls.getObject().position)
cube.rotation.y = controls.getObject().rotation.y
cube.translateZ(-10)