Examples: Added OrbitControls to webgpu_postprocessing_dof_basic.

examples/webgpu_postprocessing_dof_basic.html

@@ -9,6 +9,7 @@
 			body {
 				touch-action: none;
 				color: #000000;
+				background: #90D5FF;
 			}
 			a {
 				color: #2983ff;
@@ -42,6 +43,7 @@
 			import { gaussianBlur } from 'three/addons/tsl/display/GaussianBlurNode.js';
 			import { fxaa } from 'three/addons/tsl/display/FXAANode.js';
 
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 			import { UltraHDRLoader } from 'three/addons/loaders/UltraHDRLoader.js';
 			import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
@@ -49,7 +51,7 @@
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 			import TWEEN from 'three/addons/libs/tween.module.js';
 
-			let camera, scene, timer, renderer, model, mixer, raycaster, postProcessing;
+			let camera, controls, scene, timer, renderer, model, mixer, raycaster, postProcessing;
 
 			const pointerCoords = new THREE.Vector2();
 			const focusPoint = new THREE.Vector3( 1, 1.75, - 0.4 );
@@ -60,8 +62,12 @@
 			async function init() {
 
 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 100 );
-				camera.position.set( - 5, 4, 5 );
-				camera.lookAt( 0, 1.5, 0 );
+				camera.position.set( - 6, 5, 6 );
+
+				controls = new OrbitControls( camera );
+				controls.target.set( 0, 2, 0 );
+				controls.enableDamping = true;
+				controls.update();
 
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0x90D5FF );
@@ -138,6 +144,8 @@
 
 				//
 
+				controls.connect( renderer.domElement );
+
 				renderer.domElement.addEventListener( 'pointerdown', onPointerDown );
 
 				window.addEventListener( 'resize', onWindowResize );
@@ -181,6 +189,8 @@
 
 				TWEEN.update();
 
+				controls.update();
+
 				timer.update();
 
 				mixer.update( timer.getDelta() );