Examples: Use FirstPersonControls in webgpu_compute_rasterizer.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

examples/webgpu_compute_rasterizer.html

@@ -38,7 +38,7 @@
 			import * as THREE from 'three/webgpu';
 			import { Fn, If, Loop, vec4, vec2, uvec4, mat4, uint, float, int, min, max, atomicMax, atomicAdd, atomicStore, atomicLoad, floor, cos, sin, dot, bool, storage, uniform, uniformArray, uv, instanceIndex, vertexIndex, distance, screenSize, time, texture, varyingProperty, sqrt } from 'three/tsl';
 
-			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+			import { FirstPersonControls } from 'three/addons/controls/FirstPersonControls.js';
 			import { TeapotGeometry } from 'three/addons/geometries/TeapotGeometry.js';
 
 			import { Inspector } from 'three/addons/inspector/Inspector.js';
@@ -53,7 +53,7 @@
 
 			}
 
-			let camera, renderer, controls;
+			let camera, renderer, controls, timer;
 			let computeRasterize, computeClear, computeFrustum, computeDispatch, computeHWArgs;
 			let quadMesh, hwScene, hwMesh;
 			let cameraPos, projScreenMatrixUniform, frustumPlanesUniform, cotHalfFovUniform;
@@ -95,12 +95,12 @@
 				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, .25, 1000000 );
 				camera.position.set( 0, 15, 50 );
 
-				controls = new OrbitControls( camera, renderer.domElement );
-				controls.target.y = - 1.5;
-				controls.enableDamping = true;
-				controls.zoomSpeed = .5;
-				controls.maxDistance = 1000;
-				controls.maxPolarAngle = Math.PI / 2;
+				timer = new THREE.Timer();
+
+				controls = new FirstPersonControls( camera, renderer.domElement );
+				controls.movementSpeed = 30;
+				controls.lookSpeed = 0.2;
+				controls.lookAt( 0, - 1.5, 0 );
 
 				// Generate LOD Geometries
 				const lods = [
@@ -1083,7 +1083,8 @@
 
 			function animate() {
 
-				controls.update();
+				timer.update();
+				controls.update( timer.getDelta() );
 
 				camera.updateMatrixWorld();
 

examples/webgpu_compute_rasterizer_ibl.html

@@ -38,7 +38,7 @@
 			import * as THREE from 'three/webgpu';
 			import { Fn, If, Loop, vec2, vec4, uvec2, uvec4, mat4, uint, float, int, min, max, clamp, ceil, log2, length, dFdx, dFdy, atomicMax, atomicAdd, atomicStore, atomicLoad, floor, cos, sin, dot, bool, storage, uniform, uniformArray, instanceIndex, vertexIndex, distance, screenSize, screenCoordinate, time, texture, varyingProperty, sqrt, normalize, cross, sign, positionGeometry, cameraViewMatrix, Discard, context, positionView, positionViewDirection, overrideNodes } from 'three/tsl';
 
-			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+			import { FirstPersonControls } from 'three/addons/controls/FirstPersonControls.js';
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 			import { UltraHDRLoader } from 'three/addons/loaders/UltraHDRLoader.js';
 			import { MeshoptClusterizer } from 'three/addons/libs/meshopt_clusterizer.module.js';
@@ -56,7 +56,7 @@
 
 			}
 
-			let camera, scene, renderer, controls;
+			let camera, scene, renderer, controls, timer;
 			let computeRasterize, computeClear, computeFrustum, computeDispatch, computeHWArgs;
 			let resolveMesh, hwMesh;
 			let cameraPos, projScreenMatrixUniform, frustumPlanesUniform, cotHalfFovUniform;
@@ -159,10 +159,11 @@
 
 				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, .25, 1000000 );
 
-				controls = new OrbitControls( camera, renderer.domElement );
-				controls.enableDamping = true;
-				controls.zoomSpeed = .5;
-				controls.maxDistance = 1000;
+				timer = new THREE.Timer();
+
+				controls = new FirstPersonControls( camera, renderer.domElement );
+				controls.movementSpeed = 10;
+				controls.lookSpeed = 0.2;
 
 				// Load assets
 				const [ gltf, envTexture ] = await Promise.all( [
@@ -449,7 +450,7 @@
 
 						//camera.position.set( 0, 800, 3000 );
 						camera.position.set( 0, 8, 30 );
-						controls.target.set( 0, - 1, 0 );
+						controls.lookAt( 0, - 1, 0 );
 
 					} else {
 
@@ -471,7 +472,7 @@
 						}
 
 						camera.position.set( 2, 2, 40 );
-						controls.target.set( 0, 0, 0 );
+						controls.lookAt( 0, 0, 0 );
 
 					}
 
@@ -1693,9 +1694,11 @@
 
 			function animate() {
 
+				timer.update();
+
 				if ( resolveMesh === undefined ) return; // still loading
 
-				controls.update();
+				controls.update( timer.getDelta() );
 
 				camera.updateMatrixWorld();