Examples: Improved games_fps.

dd7bd0f2 · Mr.doob · 98f4e4c6 · dd7bd0f2 · 98f4e4c6 · dd7bd0f2
隐藏空白更改
内联并排

Showing with 40 addition and 23 deletion

examples/games_fps.html examples/games_fps.html +40 -23

examples/screenshots/games_fps.jpg examples/screenshots/games_fps.jpg +0 -0

未找到文件。
--- a/examples/games_fps.html
+++ b/examples/games_fps.html
@@ -7,7 +7,11 @@
 		<link type="text/css" rel="stylesheet" href="main.css">
 	</head>
 	<body>
-		<div id="info">Octree threejs demo - basic collisions with static triangle mesh<br />WASD to move, space to jump, use mouse to throw balls and move the camera.</div>
+		<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>

 		<!-- Import maps polyfill -->
@@ -31,29 +35,26 @@
 			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';

 			import { Octree } from './jsm/math/Octree.js';
+			import { OctreeHelper } from './jsm/helpers/OctreeHelper.js';
+
 			import { Capsule } from './jsm/math/Capsule.js';

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

 			const clock = new THREE.Clock();

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

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

-			const ambientlight = new THREE.AmbientLight( 0x6688cc );
-			scene.add( ambientlight );
-
-			const fillLight1 = new THREE.DirectionalLight( 0xff9999, 0.5 );
-			fillLight1.position.set( - 1, 1, 2 );
+			const fillLight1 = new THREE.HemisphereLight( 0x4488bb, 0x002244, 0.5 );
+			fillLight1.position.set( 2, 1, 1 );
 			scene.add( fillLight1 );

-			const fillLight2 = new THREE.DirectionalLight( 0x8888ff, 0.2 );
-			fillLight2.position.set( 0, - 1, 0 );
-			scene.add( fillLight2 );
-
-			const directionalLight = new THREE.DirectionalLight( 0xffffaa, 1.2 );
+			const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
 			directionalLight.position.set( - 5, 25, - 1 );
 			directionalLight.castShadow = true;
 			directionalLight.shadow.camera.near = 0.01;
@@ -68,20 +69,20 @@
 			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;
-
-			const container = document.getElementById( 'container' );
-
+			renderer.outputEncoding = THREE.sRGBEncoding;
+			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;
@@ -91,8 +92,8 @@

 			const STEPS_PER_FRAME = 5;

-			const sphereGeometry = new THREE.SphereGeometry( SPHERE_RADIUS, 32, 32 );
-			const sphereMaterial = new THREE.MeshStandardMaterial( { color: 0x888855, roughness: 0.8, metalness: 0.5 } );
+			const sphereGeometry = new THREE.IcosahedronGeometry( SPHERE_RADIUS, 5 );
+			const sphereMaterial = new THREE.MeshLambertMaterial( { color: 0xbbbb44 } );

 			const spheres = [];
 			let sphereIdx = 0;
@@ -105,7 +106,11 @@

 				scene.add( sphere );

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

 			}

@@ -137,7 +142,7 @@

 			} );

-			document.addEventListener( 'mousedown', () => {
+			container.addEventListener( 'mousedown', () => {

 				document.body.requestPointerLock();

@@ -147,7 +152,7 @@

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

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

 			} );

@@ -422,7 +427,7 @@

 						if ( child.material.map ) {

-							child.material.map.anisotropy = 8;
+							child.material.map.anisotropy = 4;

 						}

@@ -430,6 +435,18 @@

 				} );

+				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();

 			} );

--- a/examples/screenshots/games_fps.jpg
+++ b/examples/screenshots/games_fps.jpg