You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
378 lines
11 KiB
HTML
378 lines
11 KiB
HTML
2 months ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<title>three.js physics - rapier3d vehicle controller</title>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
||
|
|
<link type="text/css" rel="stylesheet" href="main.css">
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div id="info">
|
||
|
|
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> physics - <a href="https://github.com/dimforge/rapier.js" target="_blank">rapier</a> vehicle controller
|
||
|
|
<p>WASD or Arrow keys to move</p>
|
||
|
|
<p>Space to brake</p>
|
||
|
|
<p>R to reset</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script type="importmap">
|
||
|
|
{
|
||
|
|
"imports": {
|
||
|
|
"three": "../build/three.module.js",
|
||
|
|
"three/addons/": "./jsm/"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script type="module">
|
||
|
|
|
||
|
|
import * as THREE from 'three';
|
||
|
|
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
|
||
|
|
import { RapierPhysics } from 'three/addons/physics/RapierPhysics.js';
|
||
|
|
import { RapierHelper } from 'three/addons/helpers/RapierHelper.js';
|
||
|
|
import Stats from 'three/addons/libs/stats.module.js';
|
||
|
|
|
||
|
|
let camera, scene, renderer, stats;
|
||
|
|
let physics, physicsHelper, controls;
|
||
|
|
let car, chassis, wheels, movement, vehicleController;
|
||
|
|
|
||
|
|
init();
|
||
|
|
|
||
|
|
async function init() {
|
||
|
|
|
||
|
|
scene = new THREE.Scene();
|
||
|
|
scene.background = new THREE.Color( 0xbfd1e5 );
|
||
|
|
|
||
|
|
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 100 );
|
||
|
|
camera.position.set( 0, 4, 10 );
|
||
|
|
|
||
|
|
const ambient = new THREE.HemisphereLight( 0x555555, 0xFFFFFF );
|
||
|
|
|
||
|
|
scene.add( ambient );
|
||
|
|
|
||
|
|
const light = new THREE.DirectionalLight( 0xffffff, 4 );
|
||
|
|
|
||
|
|
light.position.set( 0, 12.5, 12.5 );
|
||
|
|
light.castShadow = true;
|
||
|
|
light.shadow.radius = 3;
|
||
|
|
light.shadow.blurSamples = 8;
|
||
|
|
light.shadow.mapSize.width = 2048;
|
||
|
|
light.shadow.mapSize.height = 2048;
|
||
|
|
|
||
|
|
const size = 40;
|
||
|
|
light.shadow.camera.left = - size;
|
||
|
|
light.shadow.camera.bottom = - size;
|
||
|
|
light.shadow.camera.right = size;
|
||
|
|
light.shadow.camera.top = size;
|
||
|
|
light.shadow.camera.near = 1;
|
||
|
|
light.shadow.camera.far = 50;
|
||
|
|
|
||
|
|
scene.add( light );
|
||
|
|
|
||
|
|
renderer = new THREE.WebGLRenderer( { antialias: true } );
|
||
|
|
renderer.setPixelRatio( window.devicePixelRatio );
|
||
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
||
|
|
renderer.shadowMap.enabled = true;
|
||
|
|
document.body.appendChild( renderer.domElement );
|
||
|
|
renderer.setAnimationLoop( animate );
|
||
|
|
|
||
|
|
controls = new OrbitControls( camera, renderer.domElement );
|
||
|
|
controls.target = new THREE.Vector3( 0, 2, 0 );
|
||
|
|
controls.update();
|
||
|
|
|
||
|
|
const geometry = new THREE.BoxGeometry( 100, 0.5, 100 );
|
||
|
|
const material = new THREE.MeshStandardMaterial( { color: 0xFFFFFF } );
|
||
|
|
|
||
|
|
const ground = new THREE.Mesh( geometry, material );
|
||
|
|
ground.receiveShadow = true;
|
||
|
|
|
||
|
|
ground.position.set( 0, - 0.25, - 20 );
|
||
|
|
ground.userData.physics = { mass: 0 };
|
||
|
|
|
||
|
|
scene.add( ground );
|
||
|
|
|
||
|
|
new THREE.TextureLoader().load( 'textures/grid.png', function ( texture ) {
|
||
|
|
|
||
|
|
texture.wrapS = THREE.RepeatWrapping;
|
||
|
|
texture.wrapT = THREE.RepeatWrapping;
|
||
|
|
texture.repeat.set( 80, 80 );
|
||
|
|
ground.material.map = texture;
|
||
|
|
ground.material.needsUpdate = true;
|
||
|
|
|
||
|
|
} );
|
||
|
|
|
||
|
|
stats = new Stats();
|
||
|
|
document.body.appendChild( stats.dom );
|
||
|
|
|
||
|
|
initPhysics();
|
||
|
|
|
||
|
|
onWindowResize();
|
||
|
|
|
||
|
|
// Movement input
|
||
|
|
movement = {
|
||
|
|
forward: 0,
|
||
|
|
right: 0,
|
||
|
|
brake: 0,
|
||
|
|
reset: false,
|
||
|
|
accelerateForce: { value: 0, min: - 30, max: 30, step: 1 },
|
||
|
|
brakeForce: { value: 0, min: 0, max: 1, step: 0.05 }
|
||
|
|
};
|
||
|
|
|
||
|
|
window.addEventListener( 'keydown', ( event ) => {
|
||
|
|
|
||
|
|
//console.log( event.key );
|
||
|
|
if ( event.key === 'w' || event.key === 'ArrowUp' ) movement.forward = - 1;
|
||
|
|
if ( event.key === 's' || event.key === 'ArrowDown' ) movement.forward = 1;
|
||
|
|
if ( event.key === 'a' || event.key === 'ArrowLeft' ) movement.right = 1;
|
||
|
|
if ( event.key === 'd' || event.key === 'ArrowRight' ) movement.right = - 1;
|
||
|
|
if ( event.key === 'r' ) movement.reset = true;
|
||
|
|
if ( event.key === ' ' ) movement.brake = 1;
|
||
|
|
|
||
|
|
} );
|
||
|
|
|
||
|
|
window.addEventListener( 'keyup', ( event ) => {
|
||
|
|
|
||
|
|
if ( event.key === 'w' || event.key === 's' || event.key === 'ArrowUp' || event.key === 'ArrowDown' ) movement.forward = 0;
|
||
|
|
if ( event.key === 'a' || event.key === 'd' || event.key === 'ArrowLeft' || event.key === 'ArrowRight' ) movement.right = 0;
|
||
|
|
if ( event.key === 'r' ) movement.reset = false;
|
||
|
|
if ( event.key === ' ' ) movement.brake = 0;
|
||
|
|
|
||
|
|
} );
|
||
|
|
|
||
|
|
window.addEventListener( 'resize', onWindowResize, false );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
async function initPhysics() {
|
||
|
|
|
||
|
|
//Initialize physics engine using the script in the jsm/physics folder
|
||
|
|
physics = await RapierPhysics();
|
||
|
|
|
||
|
|
//Optionally display collider outlines
|
||
|
|
physicsHelper = new RapierHelper( physics.world );
|
||
|
|
scene.add( physicsHelper );
|
||
|
|
|
||
|
|
physics.addScene( scene );
|
||
|
|
|
||
|
|
createCar();
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
function createCar( ) {
|
||
|
|
|
||
|
|
const geometry = new THREE.BoxGeometry( 2, 1, 4 );
|
||
|
|
const material = new THREE.MeshStandardMaterial( { color: 0xFF0000 } );
|
||
|
|
const mesh = new THREE.Mesh( geometry, material );
|
||
|
|
mesh.castShadow = true;
|
||
|
|
scene.add( mesh );
|
||
|
|
car = mesh;
|
||
|
|
|
||
|
|
mesh.position.y = 1;
|
||
|
|
|
||
|
|
physics.addMesh( mesh, 10, 0.8 ); // addMesh places the RigidBody in the mesh.userData.physics object
|
||
|
|
chassis = mesh.userData.physics.body;
|
||
|
|
|
||
|
|
vehicleController = physics.world.createVehicleController( chassis );
|
||
|
|
|
||
|
|
wheels = [];
|
||
|
|
|
||
|
|
addWheel( 0, { x: - 1, y: 0, z: - 1.5 }, mesh );
|
||
|
|
addWheel( 1, { x: 1, y: 0, z: - 1.5 }, mesh );
|
||
|
|
addWheel( 2, { x: - 1, y: 0, z: 1.5 }, mesh );
|
||
|
|
addWheel( 3, { x: 1, y: 0, z: 1.5 }, mesh );
|
||
|
|
|
||
|
|
vehicleController.setWheelSteering( 0, Math.PI / 4 );
|
||
|
|
vehicleController.setWheelSteering( 1, Math.PI / 4 );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
function addWheel( index, pos, carMesh ) {
|
||
|
|
|
||
|
|
// Define wheel properties
|
||
|
|
const wheelRadius = 0.3;
|
||
|
|
const wheelWidth = 0.4;
|
||
|
|
const suspensionRestLength = 0.8;
|
||
|
|
const wheelPosition = pos; // Position relative to chassis
|
||
|
|
const wheelDirection = { x: 0.0, y: - 1.0, z: 0.0 }; // Downward direction
|
||
|
|
const wheelAxle = { x: - 1.0, y: 0.0, z: 0.0 }; // Axle direction
|
||
|
|
|
||
|
|
// Add the wheel to the vehicle controller
|
||
|
|
vehicleController.addWheel(
|
||
|
|
wheelPosition,
|
||
|
|
wheelDirection,
|
||
|
|
wheelAxle,
|
||
|
|
suspensionRestLength,
|
||
|
|
wheelRadius
|
||
|
|
);
|
||
|
|
|
||
|
|
// Set suspension stiffness for wheel
|
||
|
|
vehicleController.setWheelSuspensionStiffness( index, 24.0 );
|
||
|
|
|
||
|
|
// Set wheel friction
|
||
|
|
vehicleController.setWheelFrictionSlip( index, 1000.0 );
|
||
|
|
|
||
|
|
// Enable steering for the wheel
|
||
|
|
vehicleController.setWheelSteering( index, pos.z < 0 );
|
||
|
|
|
||
|
|
// Create a wheel mesh
|
||
|
|
const geometry = new THREE.CylinderGeometry( wheelRadius, wheelRadius, wheelWidth, 16 );
|
||
|
|
geometry.rotateZ( Math.PI * 0.5 );
|
||
|
|
const material = new THREE.MeshStandardMaterial( { color: 0x000000 } );
|
||
|
|
const wheel = new THREE.Mesh( geometry, material );
|
||
|
|
|
||
|
|
wheel.castShadow = true;
|
||
|
|
|
||
|
|
wheel.position.copy( pos );
|
||
|
|
|
||
|
|
wheels.push( wheel );
|
||
|
|
carMesh.add( wheel );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
function updateWheels() {
|
||
|
|
|
||
|
|
if ( vehicleController === undefined ) return;
|
||
|
|
|
||
|
|
const wheelSteeringQuat = new THREE.Quaternion();
|
||
|
|
const wheelRotationQuat = new THREE.Quaternion();
|
||
|
|
const up = new THREE.Vector3( 0, 1, 0 );
|
||
|
|
|
||
|
|
//const chassisPosition = chassis.translation();
|
||
|
|
|
||
|
|
wheels.forEach( ( wheel, index ) => {
|
||
|
|
|
||
|
|
const wheelAxleCs = vehicleController.wheelAxleCs( index );
|
||
|
|
const connection = vehicleController.wheelChassisConnectionPointCs( index ).y || 0;
|
||
|
|
const suspension = vehicleController.wheelSuspensionLength( index ) || 0;
|
||
|
|
const steering = vehicleController.wheelSteering( index ) || 0;
|
||
|
|
const rotationRad = vehicleController.wheelRotation( index ) || 0;
|
||
|
|
|
||
|
|
wheel.position.y = connection - suspension;
|
||
|
|
|
||
|
|
wheelSteeringQuat.setFromAxisAngle( up, steering );
|
||
|
|
wheelRotationQuat.setFromAxisAngle( wheelAxleCs, rotationRad );
|
||
|
|
|
||
|
|
wheel.quaternion.multiplyQuaternions( wheelSteeringQuat, wheelRotationQuat );
|
||
|
|
|
||
|
|
} );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
function updateCarControl() {
|
||
|
|
|
||
|
|
if ( movement.reset ) {
|
||
|
|
|
||
|
|
chassis.setTranslation( new physics.RAPIER.Vector3( 0, 1, 0 ), true );
|
||
|
|
chassis.setRotation( new physics.RAPIER.Quaternion( 0, 0, 0, 1 ), true );
|
||
|
|
chassis.setLinvel( new physics.RAPIER.Vector3( 0, 0, 0 ), true );
|
||
|
|
chassis.setAngvel( new physics.RAPIER.Vector3( 0, 0, 0 ), true );
|
||
|
|
|
||
|
|
movement.accelerateForce.value = 0;
|
||
|
|
movement.brakeForce.value = 0;
|
||
|
|
|
||
|
|
return;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
let accelerateForce = 0;
|
||
|
|
|
||
|
|
if ( movement.forward < 0 ) {
|
||
|
|
|
||
|
|
//if (movement.accelerateForce.value === 0) chassis.wakeUp();
|
||
|
|
accelerateForce = movement.accelerateForce.value - movement.accelerateForce.step;
|
||
|
|
if ( accelerateForce < movement.accelerateForce.min ) accelerateForce = movement.accelerateForce.min;
|
||
|
|
|
||
|
|
} else if ( movement.forward > 0 ) {
|
||
|
|
|
||
|
|
//if (movement.accelerateForce.value === 0) chassis.wakeUp();
|
||
|
|
accelerateForce = movement.accelerateForce.value + movement.accelerateForce.step;
|
||
|
|
|
||
|
|
if ( accelerateForce > movement.accelerateForce.max ) accelerateForce = movement.accelerateForce.max;
|
||
|
|
|
||
|
|
} else {
|
||
|
|
|
||
|
|
if ( chassis.isSleeping() ) chassis.wakeUp();
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
movement.accelerateForce.value = accelerateForce;
|
||
|
|
|
||
|
|
//console.log(accelerateForce);
|
||
|
|
|
||
|
|
let brakeForce = 0;
|
||
|
|
|
||
|
|
if ( movement.brake > 0 ) {
|
||
|
|
|
||
|
|
brakeForce = movement.brakeForce.value + movement.brakeForce.step;
|
||
|
|
if ( brakeForce > movement.brakeForce.max ) brakeForce = movement.brakeForce.max;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
movement.brakeForce.value = brakeForce;
|
||
|
|
|
||
|
|
const engineForce = accelerateForce;
|
||
|
|
|
||
|
|
vehicleController.setWheelEngineForce( 0, engineForce );
|
||
|
|
vehicleController.setWheelEngineForce( 1, engineForce );
|
||
|
|
|
||
|
|
const currentSteering = vehicleController.wheelSteering( 0 );
|
||
|
|
const steerDirection = movement.right;
|
||
|
|
const steerAngle = Math.PI / 4;
|
||
|
|
|
||
|
|
const steering = THREE.MathUtils.lerp( currentSteering, steerAngle * steerDirection, 0.25 );
|
||
|
|
|
||
|
|
vehicleController.setWheelSteering( 0, steering );
|
||
|
|
vehicleController.setWheelSteering( 1, steering );
|
||
|
|
|
||
|
|
const wheelBrake = movement.brake * brakeForce;
|
||
|
|
vehicleController.setWheelBrake( 0, wheelBrake );
|
||
|
|
vehicleController.setWheelBrake( 1, wheelBrake );
|
||
|
|
vehicleController.setWheelBrake( 2, wheelBrake );
|
||
|
|
vehicleController.setWheelBrake( 3, wheelBrake );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
function onWindowResize( ) {
|
||
|
|
|
||
|
|
camera.aspect = window.innerWidth / window.innerHeight;
|
||
|
|
camera.updateProjectionMatrix();
|
||
|
|
|
||
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function animate() {
|
||
|
|
|
||
|
|
if ( vehicleController ) {
|
||
|
|
|
||
|
|
updateCarControl();
|
||
|
|
vehicleController.updateVehicle( 1 / 60 );
|
||
|
|
updateWheels();
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
if ( controls && car ) {
|
||
|
|
|
||
|
|
controls.target.copy( car.position );
|
||
|
|
controls.update();
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
if ( physicsHelper ) physicsHelper.update();
|
||
|
|
|
||
|
|
renderer.render( scene, camera );
|
||
|
|
|
||
|
|
stats.update();
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|