yomotsu / camera-controls

A camera control for three.js, similar to THREE.OrbitControls yet supports smooth transitions and more features.
https://yomotsu.github.io/camera-controls/
MIT License
1.89k stars 241 forks source link

Collision detection is abnormal #516

Closed Jinxishihenian closed 3 weeks ago

Jinxishihenian commented 3 weeks ago

Describe the bug

Collision detection anomalies

  1. When initialized, it cannot be moved when the moving object is larger than other objects.
  2. When a moving object jumps, it can overlap with other objects.

To Reproduce

Steps to reproduce the behavior:

  1. Go to '3_camera-control.html'
  2. When I changed the rectangle in the 3_camera-control.html to be smaller than the moving object, the collision detection was abnorma
  3. I couldn't even move it after initialization

Code

<script type="module">
import * as THREE from 'three';
import * as MW from '../dist/meshwalk.module.js';
// See demo/2_keyboardInput.html first

const world = new MW.World();
const octree = new MW.Octree();
world.add( octree );

const width = window.innerWidth;
const height = window.innerHeight;
const clock = new THREE.Clock();
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 40, width / height, 1, 1000 );
camera.position.set( 0, 0, 8 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( width, height );
document.body.appendChild( renderer.domElement );

const ground = new THREE.Mesh(
    new THREE.PlaneGeometry( 30, 30, 10, 10 ),
    new THREE.MeshBasicMaterial( { color: 0xffffff,  wireframe: true } )
);
ground.rotation.x = - 90 * THREE.MathUtils.DEG2RAD;
scene.add( ground );
octree.addGraphNode( ground );

const wall = new THREE.Mesh(
    new THREE.BoxGeometry( .5, .5, .5 ),
    new THREE.MeshNormalMaterial( { wireframe: true } )
);
wall.position.set( 0, .5, 0 );
scene.add( wall );
octree.addGraphNode( wall );

const playerRadius = .75;
const playerObjectHolder = new THREE.Object3D();
scene.add( playerObjectHolder );

const sphere = new THREE.Mesh(
    new THREE.SphereGeometry( playerRadius, 16, 16 ),
    new THREE.MeshBasicMaterial( { color: 0xff0000,  wireframe: true} )
);
sphere.position.y = playerRadius;
playerObjectHolder.add( sphere );

const playerController = new MW.CharacterController( playerObjectHolder, playerRadius );
playerController.teleport( 0, 10, 0 );
world.add( playerController );

const keyInputControl = new MW.KeyInputControl();

const tpsCameraControls = new MW.TPSCameraControls(
    camera, // three.js camera
    playerObjectHolder, // tracking object
    world,
    renderer.domElement
);

// bind events
keyInputControl.addEventListener( 'movekeyon',    () => playerController.isRunning = true );
keyInputControl.addEventListener( 'movekeyoff',   () => playerController.isRunning = false );
keyInputControl.addEventListener( 'jumpkeypress', () => playerController.jump() );

// synk with keybord input and camera control input
keyInputControl.addEventListener( 'movekeychange', () => {

    const cameraFrontAngle    = tpsCameraControls.frontAngle;
    const characterFrontAngle = keyInputControl.frontAngle;
    playerController.direction = cameraFrontAngle + characterFrontAngle;

} );

// the 'updated' event is fired by `tpsCameraControls.update()`
tpsCameraControls.addEventListener( 'update', () => {

    if ( ! playerController.isRunning ) return;

    const cameraFrontAngle = tpsCameraControls.frontAngle;
    const characterFrontAngle = keyInputControl.frontAngle;
    playerController.direction = cameraFrontAngle + characterFrontAngle;

} );

( function update () {

    const delta = clock.getDelta();

    requestAnimationFrame( update );
    world.fixedUpdate();
    tpsCameraControls.update( delta );
    renderer.render( scene, camera );

} )();
</script>

Live example

No response

Expected behavior

  1. The collision detection works normally

Screenshots or Video

Snipaste_2024-06-12_11-24-39 2

Device

No response

OS

No response

Browser

No response

Jinxishihenian commented 3 weeks ago

4 I couldn't even do any moves including jumping when the two overlapped.

yomotsu commented 3 weeks ago

Sorry, but that is a different project. Could you please report it to the appropriate repo? closing.

Jinxishihenian commented 3 weeks ago

Well, of course, there is no problem