threejs案例，与静态三角形网格的基本碰撞, 鼠标环顾四周并投球游戏

1. 创建一个时钟对象:

const clock = new THREE.Clock();

这行代码创建了一个新的THREE.Clock对象，它用于跟踪经过的时间。这在动画和物理模拟中很有用。

2. 创建场景:

const scene = new THREE.Scene();

这行代码创建了一个新的3D场景。所有的物体（如模型、灯光等）都会添加到这个场景中。

3. 设置场景的背景和雾:

scene.background = new THREE.Color( 0x88ccee );
scene.fog = new THREE.Fog( 0x88ccee, 0, 50 );

这里设置了场景的背景色为浅蓝色，并添加了一个雾效果，使远处的物体看起来更模糊。

4. 创建相机:

const camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.rotation.order = 'YXZ';

这行代码创建了一个新的透视相机，它定义了观察3D场景的角度和范围。70是视野角度，window.innerWidth / window.innerHeight定义了相机的宽高比，0.1和1000是相机的近裁剪面和远裁剪面。camera.rotation.order = 'YXZ';设置了相机旋转的顺序。

5. 添加半球光:

const fillLight1 = new THREE.HemisphereLight( 0x8dc1de, 0x00668d, 1.5 );
fillLight1.position.set( 2, 1, 1 );
scene.add( fillLight1 );

这部分代码创建了一个半球光，并将其添加到场景中。半球光模拟了一个柔和的环境光，由一个天空色和一个地面色组成。

6. 添加方向光:

const directionalLight = new THREE.DirectionalLight( 0xffffff, 2.5 );
// ... (设置方向光的各种属性)
scene.add( directionalLight );

这部分代码创建了一个方向光，并设置了其颜色、强度、位置、阴影属性等。方向光是从一个特定方向照射的光，通常用于模拟太阳光。

7. 创建渲染器:

const container = document.getElementById( 'container' );

const renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.VSMShadowMap;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
container.appendChild( renderer.domElement );

这部分代码首先获取页面上的container元素，然后创建一个WebGL渲染器。渲染器用于在网页上显示3D场景。这里还设置了渲染器的抗锯齿、像素比、尺寸、阴影映射类型和色调映射。

8. 添加性能监控:

const stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );

这部分代码添加了一个性能监控器，用于显示渲染器的帧率和其他相关信息。

1. 常量定义:

const GRAVITY = 30;
const NUM_SPHERES = 100;
const SPHERE_RADIUS = 0.2;
const STEPS_PER_FRAME = 5;

这里定义了一些常量，用于控制球体的数量、半径、重力加速度和每帧的模拟步骤数。

2. 创建球体几何体和材质:

const sphereGeometry = new THREE.IcosahedronGeometry( SPHERE_RADIUS, 5 );
const sphereMaterial = new THREE.MeshLambertMaterial( { color: 0xdede8d } );

使用THREE.IcosahedronGeometry创建了一个二十面体几何体，用于作为球体的基础形状。然后，定义了一个Lambert材质，这种材质适用于模拟非直接光照的情况，并设置了球体的颜色。

3. 创建和添加球体到场景中:

const spheres = [];
let sphereIdx = 0;

for ( let i = 0; i < NUM_SPHERES; i ++ ) {
    // 创建球体网格
    const sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
    sphere.castShadow = true;
    sphere.receiveShadow = true;

    // 将球体添加到场景中
    scene.add( sphere );

    // 将球体和其他相关数据添加到数组中
    spheres.push({
        mesh: sphere,
        collider: new THREE.Sphere( new THREE.Vector3( 0, - 100, 0 ), SPHERE_RADIUS ),
        velocity: new THREE.Vector3()
    });
}

这段代码循环创建了指定数量的球体，并将它们添加到场景中。每个球体都有一个与之关联的碰撞体（一个Three.js的球体），用于物理模拟，以及一个速度向量。

4. 创建八叉树:

const worldOctree = new Octree();

八叉树（Octree）是一种用于3D空间分割的数据结构，常用于碰撞检测和空间索引。这里创建了一个新的八叉树实例，但代码中没有显示其如何使用。

5. 创建玩家碰撞体和速度向量:

const playerCollider = new Capsule( new THREE.Vector3( 0, 0.35, 0 ), new THREE.Vector3( 0, 1, 0 ), 0.35 );
const playerVelocity = new THREE.Vector3();
const playerDirection = new THREE.Vector3();

这里创建了玩家的碰撞体（一个胶囊形状），速度向量和方向向量。注意，Capsule可能是一个自定义类，不是Three.js库的一部分。

6. 初始化其他变量:

let playerOnFloor = false;
let mouseTime = 0;
const keyStates = {};
const vector1 = new THREE.Vector3();
const vector2 = new THREE.Vector3();
const vector3 = new THREE.Vector3();

这些变量可能用于控制玩家的状态（如是否在地板上）、鼠标交互、键盘输入以及临时存储向量计算的结果。

1. 键盘按键监听:

document.addEventListener( 'keydown', ( event ) => {
    keyStates[ event.code ] = true;
} );

document.addEventListener( 'keyup', ( event ) => {
    keyStates[ event.code ] = false;
} );

这里为文档对象（整个页面）添加了两个事件监听器，分别用于处理键盘的keydown和keyup事件。keydown事件在用户按下键时触发，keyup则在键被释放时触发。event.code提供了被按下或释放的键的标识符。keyStates是一个对象，用于存储每个键的当前状态（按下或释放）。

2. 鼠标按下监听:

container.addEventListener( 'mousedown', () => {
    document.body.requestPointerLock();
    mouseTime = performance.now();
} );

当在container元素上按下鼠标时，这段代码请求将指针锁定到页面上，这样当鼠标移动时，鼠标指针将不再显示，而页面的其他部分也不会接收鼠标事件。mouseTime变量存储了鼠标按下的时间，可能是为了计算后续鼠标移动的持续时间或速度。

3. 鼠标释放监听:

document.addEventListener( 'mouseup', () => {
    if ( document.pointerLockElement !== null ) throwBall();
} );

当鼠标按钮释放时，如果指针已经被锁定（即document.pointerLockElement不为null），则调用throwBall函数。从这段代码看不出throwBall函数的实现细节，但可以猜测它的作用是抛出某种对象（可能是一个球体）。

4. 鼠标移动监听:

document.body.addEventListener( 'mousemove', ( event ) => {
    if ( document.pointerLockElement === document.body ) {
        camera.rotation.y -= event.movementX / 500;
        camera.rotation.x -= event.movementY / 500;
    }
} );

当鼠标在文档体上移动时，如果指针被锁定到文档体上，这段代码会更新相机的旋转。event.movementX和event.movementY分别表示鼠标在X和Y轴上的移动量。通过除以500，代码将鼠标的移动量转换为较小的相机旋转量，从而实现平滑的相机控制。

5. 窗口大小调整监听:

window.addEventListener( 'resize', onWindowResize );

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

这段代码监听窗口的大小调整事件。当窗口大小变化时，它会调用onWindowResize函数，该函数会更新相机的纵横比，并更新其投影矩阵。此外，它还调用renderer.setSize来确保渲染器的大小与窗口的大小相匹配。

这段代码是用于处理三维场景中的球体和玩家（或相机）的交互和移动。具体来说，它定义了三个函数：throwBall、playerCollisions和updatePlayer。以下是对这些函数的详细解析：

throwBall 函数

这个函数用于投掷一个球体（可能是一个游戏对象，如球）。

1. 获取球体:

   const sphere = spheres[ sphereIdx ];

   从spheres数组中获取一个球体，sphereIdx是当前的球体索引。

2. 设置投掷方向:

   camera.getWorldDirection( playerDirection );
   sphere.collider.center.copy( playerCollider.end ).addScaledVector( playerDirection, playerCollider.radius * 1.5 );

   首先获取相机的世界方向（玩家面向的方向），然后将球体的位置设置为玩家碰撞体的末端，并沿着玩家方向移动一定距离（玩家碰撞体半径的1.5倍）。

3. 计算投掷力度:

   const impulse = 15 + 30 * ( 1 - Math.exp( ( mouseTime - performance.now() ) * 0.001 ) );

   这里计算投掷的力度（或冲量）。力度基于鼠标按下的时间（mouseTime）和当前时间（performance.now()）的差值来计算。时间差越大，力度越大。

4. 设置球体的速度和方向:

   sphere.velocity.copy( playerDirection ).multiplyScalar( impulse );
   sphere.velocity.addScaledVector( playerVelocity, 2 );

   球体的速度被设置为玩家方向，并乘以计算出的力度。然后，再基于玩家的速度进行微调。

5. 更新球体索引:

   sphereIdx = ( sphereIdx + 1 ) % spheres.length;

   更新球体索引，以便下一次投掷时可以使用下一个球体。

playerCollisions 函数

这个函数处理玩家（或相机的碰撞体）与场景中的其他物体之间的碰撞。

1. 检测碰撞:

   const result = worldOctree.capsuleIntersect( playerCollider );

   使用worldOctree（可能是一个空间划分的数据结构，用于加速碰撞检测）检测玩家的碰撞体是否与任何物体相交。

2. 判断是否在地面上:

   playerOnFloor = false;
   if ( result ) {
       playerOnFloor = result.normal.y > 0;
       // ...
   }

   如果发生碰撞，检查碰撞的法线（result.normal）的y分量是否大于0来判断玩家是否在地面上。

3. 处理非地面碰撞:

   if ( ! playerOnFloor ) {
       playerVelocity.addScaledVector( result.normal, - result.normal.dot( playerVelocity) );
   }

   如果玩家不在地面上，更新玩家的速度以反映碰撞的影响。

4. 移动碰撞体以处理穿透:

   playerCollider.translate( result.normal.multiplyScalar( result.depth) );

   移动玩家的碰撞体以处理任何可能发生的穿透。

updatePlayer 函数

这个函数用于更新玩家的位置和速度。

1. 计算阻尼:

   let damping = Math.exp( - 4 * deltaTime ) - 1;

   阻尼用于模拟玩家速度的逐渐减小（例如空气阻力或摩擦）。

2. 处理玩家在空中的移动:

   if ( ! playerOnFloor ) {
       playerVelocity.y -= GRAVITY * deltaTime;
       damping *= 0.1;
   }

   如果玩家不在地面上，更新玩家的y速度以模拟重力，并减小阻尼。

3. 更新玩家速度:

   playerVelocity.addScaledVector( playerVelocity, damping );

   根据阻尼更新玩家的速度。

4. 移动玩家碰撞体:

   const deltaPosition = playerVelocity.clone().multiplyScalar( deltaTime );
   playerCollider.translate( deltaPosition );

   计算玩家应该移动的距离，并更新玩家的碰撞体位置。

5. 检测碰撞并更新相机位置:

   playerCollisions();
   camera.position.copy( playerCollider.end );

   调用playerCollisions函数来处理可能的碰撞，然后将相机的位置设置为玩家碰撞体的末端。

playerSphereCollision 函数

这个函数处理玩家球体与另一个球体的碰撞。

1. 计算玩家碰撞体的中心:

   const center = vector1.addVectors( playerCollider.start, playerCollider.end ).multiplyScalar( 0.5 );

   玩家碰撞体可能是一个胶囊体（capsule），这里计算其中心点。

2. 获取球体的中心:

   const sphere_center = sphere.collider.center;

3. 计算碰撞半径:

   const r = playerCollider.radius + sphere.collider.radius;
   const r2 = r * r;

   这是玩家碰撞体和球体碰撞体半径之和，以及它的平方。

4. 碰撞检测:

   for ( const point of [ playerCollider.start, playerCollider.end, center ] ) {
       // ...
   }

   这里将玩家碰撞体近似为三个点（开始点、结束点和中心点）进行碰撞检测。对于每个点，它计算到球体中心的距离平方，并检查这个距离是否小于两个碰撞体半径之和的平方。

5. 碰撞响应 :

   如果发生碰撞，代码计算碰撞法线（normal），然后根据法线和两个物体的速度来计算碰撞后的新速度。同时，调整球体的位置以解决任何可能的穿透。

spheresCollisions 函数

这个函数处理球体之间的碰撞。

1. 双层循环遍历球体:

   for ( let i = 0, length = spheres.length; i < length; i ++ ) {
       // ...
       for ( let j = i + 1; j < length; j ++ ) {
           // ...
       }
   }

   使用两个嵌套的循环来遍历所有球体对。这样可以确保每个球体对只被检查一次。

2. 计算球体间的距离平方:

   const d2 = s1.collider.center.distanceToSquared( s2.collider.center );

3. 检查碰撞 :

   如果两个球体中心之间的距离小于它们半径之和，则发生碰撞。

4. 碰撞响应 :

   类似于playerSphereCollision函数，根据碰撞法线和两个球体的速度来计算新的速度，并调整球体的位置。

这段代码实现了三维空间中的碰撞检测和响应。它使用了简化的碰撞检测（将玩家碰撞体近似为三个点）和基于物理的碰撞响应（改变物体的速度和位置）。这种碰撞处理在实时渲染和物理模拟中非常常见，特别是在游戏开发中。

这段代码主要实现了三维空间中多个球体的更新和碰撞处理。以下是对代码的详细解析：

updateSpheres 函数

这个函数负责更新所有球体的位置和速度，并处理它们与场景中其他物体的碰撞。

1. 更新球体位置:

   sphere.collider.center.addScaledVector( sphere.velocity, deltaTime );

   根据球体的速度和经过的时间（deltaTime）来更新球体的位置。

2. 检查球体与场景中的碰撞:

   const result = worldOctree.sphereIntersect( sphere.collider );

   使用worldOctree（可能是一个用于空间划分的数据结构）来检查球体是否与场景中的其他物体发生碰撞。

3. 处理碰撞 :

   如果发生碰撞（result为真），则调整球体的速度和位置以响应碰撞。这里使用了基于物理的碰撞响应，通过沿着碰撞法线（result.normal）反向推动球体来解决穿透问题。

4. 处理重力 :

   如果球体没有碰撞到任何东西（result为假），则球体的y轴速度（竖直方向）会受到重力的影响而减小。

5. 速度阻尼:

   const damping = Math.exp( - 1.5 * deltaTime ) - 1;
   sphere.velocity.addScaledVector( sphere.velocity, damping );

   对球体的速度应用阻尼，使其逐渐减小。这可以模拟空气阻力或其他形式的能量损失。

6. 检查与玩家的碰撞:

   playerSphereCollision( sphere );

   调用playerSphereCollision函数来检查球体是否与玩家发生碰撞，并相应地更新它们的速度和位置。

7. 处理球体间的碰撞:

   spheresCollisions();

   调用spheresCollisions函数来处理球体之间的碰撞。

8. 更新球体的视觉表示:

   sphere.mesh.position.copy( sphere.collider.center );

   将球体的视觉表示（mesh）的位置更新为其碰撞体的中心位置，以确保视觉和物理状态一致。

getForwardVector 函数

这个函数返回相机（或玩家）的前方向量。

1. 获取相机的世界方向:

   camera.getWorldDirection( playerDirection );

   获取相机在世界坐标系中的方向。

2. 调整方向并归一化:

   playerDirection.y = 0;
   playerDirection.normalize();

   将方向向量的y分量设为0（即忽略竖直方向），然后归一化向量。

getSideVector 函数

这个函数返回相机（或玩家）的侧向量。

1. 获取相机的世界方向:

   camera.getWorldDirection( playerDirection );

   同样获取相机在世界坐标系中的方向。

2. 计算侧向量:

   playerDirection.cross( camera.up );

   通过计算相机方向向量与上方向向量的叉积来得到侧向量。

3. 玩家控制（controls 函数）:

   • 根据deltaTime（上一次渲染到当前渲染的时间差）和玩家是否在地面（playerOnFloor）来设定玩家的移动速度（speedDelta）。
   • 根据按键状态（keyStates）来更新玩家的速度（playerVelocity）。具体来说，如果按下'W'键，玩家会向前移动；如果按下'S'键，玩家会向后移动；如果按下'A'键，玩家会向左移动；如果按下'D'键，玩家会向右移动。
   • 如果玩家在地面并且按下空格键，玩家的垂直速度（y轴）会设置为15，实现跳跃功能。

4. 模型加载和场景设置:

   • 使用GLTFLoader来加载一个名为collision-world.glb的3D模型。
   • 将加载的模型（gltf.scene）添加到场景（scene）中。
   • 创建一个worldOctree数据结构来存储场景的碰撞信息，并通过gltf.scene来初始化它。
   • 遍历模型的每一个子节点，如果它是网格（isMesh），则设置它的阴影投射和接收属性，并优化其贴图的采样（通过设置anisotropy）。
   • 创建一个OctreeHelper对象，这是一个用于可视化worldOctree的辅助对象，但默认是隐藏的。
   • 使用GUI库来创建一个界面元素，用户可以通过这个界面来切换OctreeHelper的可见性。

5. 玩家位置重置（teleportPlayerIfOob 函数）:

   • 如果相机（代表玩家）的位置在y轴上的值小于或等于-25（可能表示玩家掉出了世界边界），则将玩家的碰撞体（playerCollider）的位置和大小重置，并将相机位置设置为新的碰撞体位置，同时将相机的旋转重置。这实际上是将玩家"传送"回世界中的某个安全位置。

整体上，这段代码为3D场景中的玩家控制、模型加载和场景设置以及玩家位置重置提供了实现。其中，controls函数负责根据玩家的输入更新玩家的速度，而模型加载和场景设置部分则通过加载一个3D模型并设置其相关属性来初始化场景。最后，teleportPlayerIfOob函数提供了一个机制来确保玩家不会掉出世界的边界。

animate 函数是3D渲染应用中常见的动画循环函数，用于在每个动画帧中更新场景的状态并渲染场景。以下是对这段代码的详细解析：

代码功能概述

1. 计算时间差（deltaTime） : 通过 clock.getDelta() 获取从上一次动画帧到现在的时间差（以秒为单位），并限制其最大值为0.05秒。之后，将这个时间差除以 STEPS_PER_FRAME，得到一个子步长的时间差。

2. 碰撞检测的子步处理 : 通过一个循环，执行 STEPS_PER_FRAME 次更新操作，每次循环中都会调用玩家控制和更新函数，以此来降低物体快速移动导致碰撞检测失败的风险。

3. 更新函数:

   • controls( deltaTime ): 根据当前的时间差 deltaTime 更新玩家的速度和位置。
   • updatePlayer( deltaTime ): 更新玩家的状态或位置，可能还包括与环境的交互。
   • updateSpheres( deltaTime ): 更新场景中的球体（或其他物体）的状态。
   • teleportPlayerIfOob(): 如果玩家超出边界，则将其传送回安全位置。

4. 渲染场景 : 使用 renderer.render( scene, camera ) 渲染当前的场景和相机视图。

5. 更新性能统计 : stats.update() 可能用于更新一些性能统计信息，比如帧率等。

6. 请求下一帧 : 使用 requestAnimationFrame( animate ) 请求浏览器的下一帧动画，并将 animate 函数作为回调函数，从而形成一个连续的动画循环。

细节分析

• deltaTime 的计算考虑了 STEPS_PER_FRAME，这通常用于减少快速移动物体错过碰撞检测的机会。通过将总的 deltaTime 分割成多个子步，每个子步中更新物体的位置，可以提高碰撞检测的准确性。

• controls 函数负责根据用户的输入和当前的时间差来更新玩家的移动状态。

• updatePlayer 和 updateSpheres 函数分别更新玩家和场景中球体的状态。这些更新可能包括位置、速度、动画状态等。

• teleportPlayerIfOob 函数用于处理玩家超出边界的情况，确保玩家不会离开游戏世界。

• renderer.render( scene, camera ) 是渲染命令，它使用当前的场景和相机状态来生成图像。

• stats.update() 可能是用于更新性能统计信息的，例如帧率、渲染时间等，这对于调试和优化非常有用。

• requestAnimationFrame( animate ) 确保 animate 函数在每个浏览器动画帧被调用，从而保持动画的流畅性和同步性。

总结

这段代码定义了一个 animate 函数，它是3D应用中典型的动画循环。它首先计算时间差，并在多个子步中更新玩家和场景中物体的状态，然后进行渲染和性能统计的更新。最后，它使用 requestAnimationFrame 来请求下一帧的动画，从而形成一个连续的动画循环。这个循环确保了游戏或应用的流畅运行和实时交互。

全部源码

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js - misc - octree collisions</title>
		<meta charset=utf-8 />
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>
	<body>
		<div id="info">
			Octree threejs demo - basic collisions with static triangle mesh<br />
			MOUSE to look around and to throw balls<br/>
			WASD to move and SPACE to jump
		</div>
		<div id="container"></div>

		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<script type="module">

			import * as THREE from 'three';

			import Stats from 'three/addons/libs/stats.module.js';

			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

			import { Octree } from 'three/addons/math/Octree.js';
			import { OctreeHelper } from 'three/addons/helpers/OctreeHelper.js';

			import { Capsule } from 'three/addons/math/Capsule.js';

			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

			const clock = new THREE.Clock();

			const scene = new THREE.Scene();
			scene.background = new THREE.Color( 0x88ccee );
			scene.fog = new THREE.Fog( 0x88ccee, 0, 50 );

			const camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 1000 );
			camera.rotation.order = 'YXZ';

			const fillLight1 = new THREE.HemisphereLight( 0x8dc1de, 0x00668d, 1.5 );
			fillLight1.position.set( 2, 1, 1 );
			scene.add( fillLight1 );

			const directionalLight = new THREE.DirectionalLight( 0xffffff, 2.5 );
			directionalLight.position.set( - 5, 25, - 1 );
			directionalLight.castShadow = true;
			directionalLight.shadow.camera.near = 0.01;
			directionalLight.shadow.camera.far = 500;
			directionalLight.shadow.camera.right = 30;
			directionalLight.shadow.camera.left = - 30;
			directionalLight.shadow.camera.top	= 30;
			directionalLight.shadow.camera.bottom = - 30;
			directionalLight.shadow.mapSize.width = 1024;
			directionalLight.shadow.mapSize.height = 1024;
			directionalLight.shadow.radius = 4;
			directionalLight.shadow.bias = - 0.00006;
			scene.add( directionalLight );

			const container = document.getElementById( 'container' );

			const renderer = new THREE.WebGLRenderer( { antialias: true } );
			renderer.setPixelRatio( window.devicePixelRatio );
			renderer.setSize( window.innerWidth, window.innerHeight );
			renderer.shadowMap.enabled = true;
			renderer.shadowMap.type = THREE.VSMShadowMap;
			renderer.toneMapping = THREE.ACESFilmicToneMapping;
			container.appendChild( renderer.domElement );

			const stats = new Stats();
			stats.domElement.style.position = 'absolute';
			stats.domElement.style.top = '0px';
			container.appendChild( stats.domElement );

			const GRAVITY = 30;

			const NUM_SPHERES = 100;
			const SPHERE_RADIUS = 0.2;

			const STEPS_PER_FRAME = 5;

			const sphereGeometry = new THREE.IcosahedronGeometry( SPHERE_RADIUS, 5 );
			const sphereMaterial = new THREE.MeshLambertMaterial( { color: 0xdede8d } );

			const spheres = [];
			let sphereIdx = 0;

			for ( let i = 0; i < NUM_SPHERES; i ++ ) {

				const sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
				sphere.castShadow = true;
				sphere.receiveShadow = true;

				scene.add( sphere );

				spheres.push( {
					mesh: sphere,
					collider: new THREE.Sphere( new THREE.Vector3( 0, - 100, 0 ), SPHERE_RADIUS ),
					velocity: new THREE.Vector3()
				} );

			}

			const worldOctree = new Octree();

			const playerCollider = new Capsule( new THREE.Vector3( 0, 0.35, 0 ), new THREE.Vector3( 0, 1, 0 ), 0.35 );

			const playerVelocity = new THREE.Vector3();
			const playerDirection = new THREE.Vector3();

			let playerOnFloor = false;
			let mouseTime = 0;

			const keyStates = {};

			const vector1 = new THREE.Vector3();
			const vector2 = new THREE.Vector3();
			const vector3 = new THREE.Vector3();

			document.addEventListener( 'keydown', ( event ) => {

				keyStates[ event.code ] = true;

			} );

			document.addEventListener( 'keyup', ( event ) => {

				keyStates[ event.code ] = false;

			} );

			container.addEventListener( 'mousedown', () => {

				document.body.requestPointerLock();

				mouseTime = performance.now();

			} );

			document.addEventListener( 'mouseup', () => {

				if ( document.pointerLockElement !== null ) throwBall();

			} );

			document.body.addEventListener( 'mousemove', ( event ) => {

				if ( document.pointerLockElement === document.body ) {

					camera.rotation.y -= event.movementX / 500;
					camera.rotation.x -= event.movementY / 500;

				}

			} );

			window.addEventListener( 'resize', onWindowResize );

			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			function throwBall() {

				const sphere = spheres[ sphereIdx ];

				camera.getWorldDirection( playerDirection );

				sphere.collider.center.copy( playerCollider.end ).addScaledVector( playerDirection, playerCollider.radius * 1.5 );

				// throw the ball with more force if we hold the button longer, and if we move forward

				const impulse = 15 + 30 * ( 1 - Math.exp( ( mouseTime - performance.now() ) * 0.001 ) );

				sphere.velocity.copy( playerDirection ).multiplyScalar( impulse );
				sphere.velocity.addScaledVector( playerVelocity, 2 );

				sphereIdx = ( sphereIdx + 1 ) % spheres.length;

			}

			function playerCollisions() {

				const result = worldOctree.capsuleIntersect( playerCollider );

				playerOnFloor = false;

				if ( result ) {

					playerOnFloor = result.normal.y > 0;

					if ( ! playerOnFloor ) {

						playerVelocity.addScaledVector( result.normal, - result.normal.dot( playerVelocity ) );

					}

					playerCollider.translate( result.normal.multiplyScalar( result.depth ) );

				}

			}

			function updatePlayer( deltaTime ) {

				let damping = Math.exp( - 4 * deltaTime ) - 1;

				if ( ! playerOnFloor ) {

					playerVelocity.y -= GRAVITY * deltaTime;

					// small air resistance
					damping *= 0.1;

				}

				playerVelocity.addScaledVector( playerVelocity, damping );

				const deltaPosition = playerVelocity.clone().multiplyScalar( deltaTime );
				playerCollider.translate( deltaPosition );

				playerCollisions();

				camera.position.copy( playerCollider.end );

			}

			function playerSphereCollision( sphere ) {

				const center = vector1.addVectors( playerCollider.start, playerCollider.end ).multiplyScalar( 0.5 );

				const sphere_center = sphere.collider.center;

				const r = playerCollider.radius + sphere.collider.radius;
				const r2 = r * r;

				// approximation: player = 3 spheres

				for ( const point of [ playerCollider.start, playerCollider.end, center ] ) {

					const d2 = point.distanceToSquared( sphere_center );

					if ( d2 < r2 ) {

						const normal = vector1.subVectors( point, sphere_center ).normalize();
						const v1 = vector2.copy( normal ).multiplyScalar( normal.dot( playerVelocity ) );
						const v2 = vector3.copy( normal ).multiplyScalar( normal.dot( sphere.velocity ) );

						playerVelocity.add( v2 ).sub( v1 );
						sphere.velocity.add( v1 ).sub( v2 );

						const d = ( r - Math.sqrt( d2 ) ) / 2;
						sphere_center.addScaledVector( normal, - d );

					}

				}

			}

			function spheresCollisions() {

				for ( let i = 0, length = spheres.length; i < length; i ++ ) {

					const s1 = spheres[ i ];

					for ( let j = i + 1; j < length; j ++ ) {

						const s2 = spheres[ j ];

						const d2 = s1.collider.center.distanceToSquared( s2.collider.center );
						const r = s1.collider.radius + s2.collider.radius;
						const r2 = r * r;

						if ( d2 < r2 ) {

							const normal = vector1.subVectors( s1.collider.center, s2.collider.center ).normalize();
							const v1 = vector2.copy( normal ).multiplyScalar( normal.dot( s1.velocity ) );
							const v2 = vector3.copy( normal ).multiplyScalar( normal.dot( s2.velocity ) );

							s1.velocity.add( v2 ).sub( v1 );
							s2.velocity.add( v1 ).sub( v2 );

							const d = ( r - Math.sqrt( d2 ) ) / 2;

							s1.collider.center.addScaledVector( normal, d );
							s2.collider.center.addScaledVector( normal, - d );

						}

					}

				}

			}

			function updateSpheres( deltaTime ) {

				spheres.forEach( sphere => {

					sphere.collider.center.addScaledVector( sphere.velocity, deltaTime );

					const result = worldOctree.sphereIntersect( sphere.collider );

					if ( result ) {

						sphere.velocity.addScaledVector( result.normal, - result.normal.dot( sphere.velocity ) * 1.5 );
						sphere.collider.center.add( result.normal.multiplyScalar( result.depth ) );

					} else {

						sphere.velocity.y -= GRAVITY * deltaTime;

					}

					const damping = Math.exp( - 1.5 * deltaTime ) - 1;
					sphere.velocity.addScaledVector( sphere.velocity, damping );

					playerSphereCollision( sphere );

				} );

				spheresCollisions();

				for ( const sphere of spheres ) {

					sphere.mesh.position.copy( sphere.collider.center );

				}

			}

			function getForwardVector() {

				camera.getWorldDirection( playerDirection );
				playerDirection.y = 0;
				playerDirection.normalize();

				return playerDirection;

			}

			function getSideVector() {

				camera.getWorldDirection( playerDirection );
				playerDirection.y = 0;
				playerDirection.normalize();
				playerDirection.cross( camera.up );

				return playerDirection;

			}

			function controls( deltaTime ) {

				// gives a bit of air control
				const speedDelta = deltaTime * ( playerOnFloor ? 25 : 8 );

				if ( keyStates[ 'KeyW' ] ) {

					playerVelocity.add( getForwardVector().multiplyScalar( speedDelta ) );

				}

				if ( keyStates[ 'KeyS' ] ) {

					playerVelocity.add( getForwardVector().multiplyScalar( - speedDelta ) );

				}

				if ( keyStates[ 'KeyA' ] ) {

					playerVelocity.add( getSideVector().multiplyScalar( - speedDelta ) );

				}

				if ( keyStates[ 'KeyD' ] ) {

					playerVelocity.add( getSideVector().multiplyScalar( speedDelta ) );

				}

				if ( playerOnFloor ) {

					if ( keyStates[ 'Space' ] ) {

						playerVelocity.y = 15;

					}

				}

			}

			const loader = new GLTFLoader().setPath( './models/gltf/' );

			loader.load( 'collision-world.glb', ( gltf ) => {

				scene.add( gltf.scene );

				worldOctree.fromGraphNode( gltf.scene );

				gltf.scene.traverse( child => {

					if ( child.isMesh ) {

						child.castShadow = true;
						child.receiveShadow = true;

						if ( child.material.map ) {

							child.material.map.anisotropy = 4;

						}

					}

				} );

				const helper = new OctreeHelper( worldOctree );
				helper.visible = false;
				scene.add( helper );

				const gui = new GUI( { width: 200 } );
				gui.add( { debug: false }, 'debug' )
					.onChange( function ( value ) {

						helper.visible = value;

					} );

				animate();

			} );

			function teleportPlayerIfOob() {

				if ( camera.position.y <= - 25 ) {

					playerCollider.start.set( 0, 0.35, 0 );
					playerCollider.end.set( 0, 1, 0 );
					playerCollider.radius = 0.35;
					camera.position.copy( playerCollider.end );
					camera.rotation.set( 0, 0, 0 );

				}

			}


			function animate() {

				const deltaTime = Math.min( 0.05, clock.getDelta() ) / STEPS_PER_FRAME;

				// we look for collisions in substeps to mitigate the risk of
				// an object traversing another too quickly for detection.

				for ( let i = 0; i < STEPS_PER_FRAME; i ++ ) {

					controls( deltaTime );

					updatePlayer( deltaTime );

					updateSpheres( deltaTime );

					teleportPlayerIfOob();

				}

				renderer.render( scene, camera );

				stats.update();

				requestAnimationFrame( animate );

			}

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

本内容来源于小豆包，想要更多内容请跳转小豆包 》