Home Explore Help
Register Sign In
samien
/
three.js
mirror of https://github.com/mrdoob/three.js.git
1
0
Fork 0
Files Issues 0 Wiki
Browse Source

Examples: More inspector usage. (#31954)

* Examples: More inspector usage.

* Update webgpu_animation_retargeting.html

* Update webgpu_animation_retargeting.html
Michael Herzog 5 months ago
parent
6ba3cbef70
commit
5baffdb7b5
12 changed files with 225 additions and 194 deletions
Split View Show Diff Stats
  1. 16 14
      examples/webgpu_animation_retargeting.html
  2. 14 12
      examples/webgpu_animation_retargeting_readyplayer.html
  3. 8 2
      examples/webgpu_backdrop.html
  4. 15 7
      examples/webgpu_backdrop_area.html
  5. 9 8
      examples/webgpu_camera.html
  6. 12 11
      examples/webgpu_camera_array.html
  7. 34 36
      examples/webgpu_caustics.html
  8. 11 16
      examples/webgpu_clearcoat.html
  9. 59 59
      examples/webgpu_clipping.html
  10. 15 7
      examples/webgpu_cubemap_adjustments.html
  11. 17 13
      examples/webgpu_cubemap_dynamic.html
  12. 15 9
      examples/webgpu_cubemap_mix.html

+ 16 - 14
examples/webgpu_animation_retargeting.html
View File 

@@ -3,12 +3,20 @@
 
 		<title>three.js webgpu - animation retargeting</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">
 
+		<link type="text/css" rel="stylesheet" href="example.css">
 
 	</head>
 
 	<body>
 
 
 		<div id="info">
 
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - animation retargeting
 
+			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>
 
+
 
+			<div class="title-wrapper">
 
+				<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a><span>Animation Retargeting</span>
 
+			</div>
 
+
 
+			<small>
 
+				Basic Animation Retargeting demo.
 
+			</small>
 
 		</div>
 
 
 		<script type="importmap">
 
@@ -27,11 +35,9 @@
 
 			import * as THREE from 'three/webgpu';
 
 			import { color, screenUV, hue, reflector, time, Fn, vec2, length, atan, float, sin, cos, vec3, sub, mul, pow, blendDodge, normalWorldGeometry } from 'three/tsl';
 
 
-			import Stats from 'three/addons/libs/stats.module.js';
 
-
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
-			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
+			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 
 			import * as SkeletonUtils from 'three/addons/utils/SkeletonUtils.js';
 
 
@@ -55,9 +61,6 @@
 
 
 			const clock = new THREE.Clock();
 
 
-			const stats = new Stats();
 
-			document.body.appendChild( stats.dom );
 
-
 
 			export const lightSpeed = /*#__PURE__*/ Fn( ( [ suv_immutable ] ) => {
 
 
 				// forked from https://www.shadertoy.com/view/7ly3D1
 
@@ -145,10 +148,11 @@
 
 
 			// renderer
 
 			const renderer = new THREE.WebGPURenderer( { antialias: true } );
 
-			renderer.toneMapping = THREE.NeutralToneMapping;
 
-			renderer.setAnimationLoop( animate );
 
 			renderer.setPixelRatio( window.devicePixelRatio );
 
 			renderer.setSize( window.innerWidth, window.innerHeight );
 
+			renderer.setAnimationLoop( animate );
 
+			renderer.toneMapping = THREE.NeutralToneMapping;
 
+			renderer.inspector = new Inspector();
 
 			document.body.appendChild( renderer.domElement );
 
 
 			const controls = new OrbitControls( camera, renderer.domElement );
 
@@ -157,8 +161,8 @@
 
 			controls.target.set( 0, 1, 0 );
 
 			controls.maxPolarAngle = Math.PI / 2;
 
 
-			const gui = new GUI();
 
-			gui.add( helpers, 'visible' ).name( 'helpers' );
 
+			const gui = renderer.inspector.createParameters( 'Scene settings' );
 
+			gui.add( helpers, 'visible' ).name( 'show helpers' );
 
 
 			//
 
 
@@ -290,8 +294,6 @@
 
 
 				controls.update();
 
 
-				stats.update();
 
-
 
 				renderer.render( scene, camera );
 
 
 			}

+ 14 - 12
examples/webgpu_animation_retargeting_readyplayer.html
View File 

@@ -3,13 +3,20 @@
 
 		<title>three.js webgpu - animation retargeting</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">
 
+		<link type="text/css" rel="stylesheet" href="example.css">
 
 	</head>
 
 	<body>
 
 
 		<div id="info">
 
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - animation retargeting<br />
 
-			<a href="https://www.mixamo.com/" target="_blank" rel="noopener">mixamo</a> to <a href="https://readyplayer.me/" target="_blank" rel="noopener">readyplayer.me</a>
 
+			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>
 
+
 
+			<div class="title-wrapper">
 
+				<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a><span>Animation Retargeting</span>
 
+			</div>
 
+
 
+			<small>
 
+				Animation Retargeting from <a href="https://www.mixamo.com/" target="_blank" rel="noopener">Mixamo</a> to <a href="https://readyplayer.me/" target="_blank" rel="noopener">readyplayer.me</a>.
 
+			</small>
 
 		</div>
 
 
 		<script type="importmap">
 
@@ -28,11 +35,10 @@
 
 			import * as THREE from 'three/webgpu';
 
 			import { screenUV, color, vec2, vec4, reflector, positionWorld } from 'three/tsl';
 
 
-			import Stats from 'three/addons/libs/stats.module.js';
 
-
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
 			import { FBXLoader } from 'three/addons/loaders/FBXLoader.js';
 
+			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 
 			import * as SkeletonUtils from 'three/addons/utils/SkeletonUtils.js';
 
 
@@ -56,9 +62,6 @@
 
 
 			const clock = new THREE.Clock();
 
 
-			const stats = new Stats();
 
-			document.body.appendChild( stats.dom );
 
-
 
 			// scene
 
 
 			const scene = new THREE.Scene();
 
@@ -103,10 +106,11 @@
 
 
 			// renderer
 
 			const renderer = new THREE.WebGPURenderer( { antialias: true } );
 
-			renderer.toneMapping = THREE.NeutralToneMapping;
 
-			renderer.setAnimationLoop( animate );
 
 			renderer.setPixelRatio( window.devicePixelRatio );
 
 			renderer.setSize( window.innerWidth, window.innerHeight );
 
+			renderer.setAnimationLoop( animate );
 
+			renderer.inspector = new Inspector();
 
+			renderer.toneMapping = THREE.NeutralToneMapping;
 
 			document.body.appendChild( renderer.domElement );
 
 
 			const controls = new OrbitControls( camera, renderer.domElement );
 
@@ -200,8 +204,6 @@
 
 
 				controls.update();
 
 
-				stats.update();
 
-
 
 				renderer.render( scene, camera );
 
 
 			}

+ 8 - 2
examples/webgpu_backdrop.html
View File 

@@ -4,12 +4,18 @@
 
 		<title>three.js - WebGPU - Backdrop</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">
 
+		<link type="text/css" rel="stylesheet" href="example.css">
 
 	</head>
 
 	<body>
 
 
 		<div id="info">
 
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> WebGPU - Backdrop
 
+			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>
 
+
 
+			<div class="title-wrapper">
 
+				<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a><span>Backdrop</span>
 
+			</div>
 
+
 
+			<small>Backdrop objects can apply blend, overlay or filter effects on occluded 3D objects.</small>
 
 		</div>
 
 
 		<script type="importmap">

+ 15 - 7
examples/webgpu_backdrop_area.html
View File 

@@ -4,12 +4,20 @@
 
 		<title>three.js - WebGPU - Backdrop Area</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">
 
+		<link type="text/css" rel="stylesheet" href="example.css">
 
 	</head>
 
 	<body>
 
 
 		<div id="info">
 
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> WebGPU - Backdrop Area
 
+			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>
 
+
 
+			<div class="title-wrapper">
 
+				<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a><span>Backdrop Area</span>
 
+			</div>
 
+
 
+			<small>
 
+				Backdrop area effect.
 
+			</small>
 
 		</div>
 
 
 		<script type="importmap">
 
@@ -29,7 +37,7 @@
 
 			import { color, positionWorld, linearDepth, viewportLinearDepth, viewportSharedTexture, screenUV, hue, time, checker, uv, modelScale } from 'three/tsl';
 
 			import { hashBlur } from 'three/addons/tsl/display/hashBlur.js';
 
 
-			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
+			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
 
@@ -124,6 +132,7 @@
 
 				renderer.setAnimationLoop( animate );
 
 				renderer.toneMapping = THREE.NeutralToneMapping;
 
 				renderer.toneMappingExposure = .9;
 
+				renderer.inspector = new Inspector();
 
 				document.body.appendChild( renderer.domElement );
 
 
 				const controls = new OrbitControls( camera, renderer.domElement );
 
@@ -141,13 +150,12 @@
 
 					'pixel': pixelMaterial
 
 				};
 
 
-				const gui = new GUI();
 
 				const options = { material: 'blurred' };
 
-
 
 				box.material = materials[ options.material ];
 
 
-				gui.add( box.scale, 'x', 0.1, 2, 0.01 );
 
-				gui.add( box.scale, 'z', 0.1, 2, 0.01 );
 
+				const gui = renderer.inspector.createParameters( 'Scene settings' );
 
+				gui.add( box.scale, 'x', 0.1, 2 ).step( 0.01 ).name( 'box scale x' );
 
+				gui.add( box.scale, 'y', 0.1, 2 ).step( 0.01 ).name( 'box scale y' );
 
 				gui.add( options, 'material', Object.keys( materials ) ).onChange( name => {
 
 
 					box.material = materials[ name ];

+ 9 - 8
examples/webgpu_camera.html
View File 

@@ -4,16 +4,17 @@
 
 		<title>three.js webgpu - cameras</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">
 
-		<style>
 
-			b {
 
-				color: lightgreen;
 
-			}
 
-		</style>
 
+		<link type="text/css" rel="stylesheet" href="example.css">
 
 	</head>
 
 	<body>
 
-		<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - cameras<br/>
 
-		<b>O</b> orthographic <b>P</b> perspective
 
+		<div id="info">
 
+			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>
 
+
 
+			<div class="title-wrapper">
 
+				<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a><span>Camera</span>
 
+			</div>
 
+
 
+			<small>Press the "O" key for using an orthographic and "P" key for a perspective camera.</small>
 
 		</div>
 
 
 		<script type="importmap">

+ 12 - 11
examples/webgpu_camera_array.html
View File 

@@ -4,10 +4,21 @@
 
 		<title>three.js webgpu - arraycamera</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">
 
+		<link type="text/css" rel="stylesheet" href="example.css">
 
 	</head>
 
 	<body>
 
 
+		<div id="info">
 
+			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>
 
+
 
+			<div class="title-wrapper">
 
+				<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a><span>Array Camera</span>
 
+			</div>
 
+
 
+			<small>Array cameras allow to render the scene with multiple sub cameras but with a single render call.</small>
 
+		</div>
 
+
 
+
 
 		<script type="importmap">
 
 			{
 
 				"imports": {
 
@@ -23,11 +34,8 @@
 
 
 			import * as THREE from 'three/webgpu';
 
 
-			import Stats from 'three/addons/libs/stats.module.js';
 
-
 
 			let camera, scene, renderer;
 
 			let mesh;
 
-			let stats;
 
 
 			const AMOUNT = 6;
 
 
@@ -89,11 +97,6 @@
 
 
 				window.addEventListener( 'resize', onWindowResize );
 
 
-				//
 
-
 
-				stats = new Stats();
 
-				document.body.appendChild( stats.dom );
 
-
 
 			}
 
 
 			function updateCameras() {
 
@@ -144,8 +147,6 @@
 
 
 				renderer.render( scene, camera );
 
 
-				stats.update();
 
-
 
 			}
 
 
 		</script>

+ 34 - 36
examples/webgpu_caustics.html
View File 

@@ -4,12 +4,18 @@
 
 		<title>three.js webgpu - caustics</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">
 
+		<link type="text/css" rel="stylesheet" href="example.css">
 
 	</head>
 
 	<body>
 
 
 		<div id="info">
 
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js webgpu</a> - realtime caustics
 
+			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>
 
+
 
+			<div class="title-wrapper">
 
+				<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a><span>Caustics</span>
 
+			</div>
 
+
 
+			<small>Realtime caustics effect.</small>
 
 		</div>
 
 
 		<script type="importmap">
 
@@ -33,12 +39,9 @@
 
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
 			import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
 
 
-			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
-
 
-			import Stats from 'three/addons/libs/stats.module.js';
 
+			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 
 			let camera, scene, renderer, controls;
 
-			let stats;
 
 			let gltf;
 
 
 			init();
 
@@ -155,30 +158,6 @@
 
 				glass.visible = false;
 
 				scene.add( glass );
 
 
-				// gui
 
-
 
-				const gui = new GUI();
 
-				gui.add( causticOcclusion, 'value', 0, 20 ).name( 'caustic occlusion' );
 
-				gui.addColor( duck.material, 'color' ).name( 'material color' );
 
-				gui.add( { model: 'duck' }, 'model', [
 
-					'duck',
 
-					'glass'
 
-				] ).onChange( model => {
 
-
 
-					duck.visible = glass.visible = false;
 
-
 
-					if ( model === 'duck' ) {
 
-
 
-						duck.visible = true;
 
-
 
-					} else if ( model === 'glass' ) {
 
-
 
-						glass.visible = true;
 
-
 
-					}
 
-
 
-				} );
 
-
 
 				// ground
 
 
 				const map = textureLoader.load( 'textures/hardwood2_diffuse.jpg' );
 
@@ -196,16 +175,37 @@
 
 				// renderer
 
 
 				renderer = new THREE.WebGPURenderer( { antialias: true } );
 
-				renderer.shadowMap.enabled = true;
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setAnimationLoop( animate );
 
+				renderer.shadowMap.enabled = true;
 
+				renderer.inspector = new Inspector();
 
 				document.body.appendChild( renderer.domElement );
 
 
-				// stats
 
+				// gui
 
+
 
+				const gui = renderer.inspector.createParameters( 'Settings' );
 
+				gui.add( causticOcclusion, 'value', 0, 20 ).name( 'caustic occlusion' );
 
+				gui.addColor( duck.material, 'color' ).name( 'material color' );
 
+				gui.add( { model: 'duck' }, 'model', [
 
+					'duck',
 
+					'glass'
 
+				] ).onChange( model => {
 
+
 
+					duck.visible = glass.visible = false;
 
+
 
+					if ( model === 'duck' ) {
 
+
 
+						duck.visible = true;
 
+
 
+					} else if ( model === 'glass' ) {
 
+
 
+						glass.visible = true;
 
+
 
+					}
 
+
 
+				} );
 
 
-				stats = new Stats();
 
-				document.body.appendChild( stats.dom );
 
 
 				// controls
 
 
@@ -228,8 +228,6 @@
 
 
 			function animate() {
 
 
-				stats.update();
 
-
 
 				for ( const mesh of gltf.children ) {
 
 
 					mesh.rotation.y -= .01;

+ 11 - 16
examples/webgpu_clearcoat.html
View File 

@@ -4,11 +4,17 @@
 
 		<title>three.js webgpu - materials - clearcoat</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">
 
+		<link type="text/css" rel="stylesheet" href="example.css">
 
 	</head>
 
 	<body>
 
 		<div id="info">
 
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - clearcoat
 
+			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>
 
+
 
+			<div class="title-wrapper">
 
+				<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a><span>Clearcoat</span>
 
+			</div>
 
+
 
+			<small>PBR Clearcoat effect.</small>
 
 		</div>
 
 
 		<script type="importmap">
 
@@ -26,15 +32,13 @@
 
 
 			import * as THREE from 'three/webgpu';
 
 
-			import Stats from 'three/addons/libs/stats.module.js';
 
+			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 			import { HDRCubeTextureLoader } from 'three/addons/loaders/HDRCubeTextureLoader.js';
 
 
 			import { FlakesTexture } from 'three/addons/textures/FlakesTexture.js';
 
 
-			let container, stats;
 
-
 
 			let camera, scene, renderer;
 
 
 			let particleLight;
 
@@ -44,9 +48,6 @@
 
 
 			function init() {
 
 
-				container = document.createElement( 'div' );
 
-				document.body.appendChild( container );
 
-
 
 				camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 0.25, 50 );
 
 				camera.position.z = 10;
 
 
@@ -178,17 +179,13 @@
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setAnimationLoop( animate );
 
-				container.appendChild( renderer.domElement );
 
+				document.body.appendChild( renderer.domElement );
 
 
 				//
 
 
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 
 				renderer.toneMappingExposure = 1.25;
 
-
 
-				//
 
-
 
-				stats = new Stats();
 
-				container.appendChild( stats.dom );
 
+				renderer.inspector = new Inspector();
 
 
 				// EVENTS
 
 
@@ -220,8 +217,6 @@
 
 
 				render();
 
 
-				stats.update();
 
-
 
 			}
 
 
 			function render() {

+ 59 - 59
examples/webgpu_clipping.html
View File 

@@ -4,12 +4,19 @@
 
 		<title>three.js webgpu - clipping planes</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">
 
+		<link type="text/css" rel="stylesheet" href="example.css">
 
 	</head>
 
 	<body>
 
 		<div id="info">
 
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - clipping
 
+			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>
 
+
 
+			<div class="title-wrapper">
 
+				<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a><span>Clipping Planes</span>
 
+			</div>
 
+
 
+			<small>Clipping 3D objects via Clipping Planes.</small>
 
 		</div>
 
+
 
 		<script type="importmap">
 
 			{
 
 				"imports": {
 
@@ -25,13 +32,11 @@
 
 
 			import * as THREE from 'three/webgpu';
 
 
-			import Stats from 'three/addons/libs/stats.module.js';
 
-
 
-			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
+			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 
-			let camera, scene, renderer, startTime, object, stats;
 
+			let camera, scene, renderer, startTime, object;
 
 
 			init();
 
 
@@ -119,11 +124,6 @@
 
 				ground.receiveShadow = true;
 
 				globalClippingGroup.add( ground );
 
 
-				// Stats
 
-
 
-				stats = new Stats();
 
-				document.body.appendChild( stats.dom );
 
-
 
 				// Renderer
 
 
 				renderer = new THREE.WebGPURenderer( { antialias: true } );
 
@@ -131,6 +131,7 @@
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setAnimationLoop( animate );
 
+				renderer.inspector = new Inspector();
 
 				window.addEventListener( 'resize', onWindowResize );
 
 				document.body.appendChild( renderer.domElement );
 
 
@@ -142,86 +143,87 @@
 
 
 				// GUI
 
 
-				const gui = new GUI(),
 
-					props = {
 
-						alphaToCoverage: true,
 
-					},
 
-					folderKnot = gui.addFolder( 'Knot Clipping Group' ),
 
-					propsKnot = {
 
+				const gui = renderer.inspector.createParameters( 'Clipping settings' );
 
+				const props = {
 
+					alphaToCoverage: true,
 
+				};
 
+			
+				const folderKnot = gui.addFolder( 'Knot Clipping Group' );
 
+				const propsKnot = {
 
 
-						get 'Enabled'() {
 
+					get 'Enabled'() {
 
 
-							return knotClippingGroup.enabled;
 
+						return knotClippingGroup.enabled;
 
 
-						},
 
-						set 'Enabled'( v ) {
 
+					},
 
+					set 'Enabled'( v ) {
 
 
-							knotClippingGroup.enabled = v;
 
+						knotClippingGroup.enabled = v;
 
 
-						},
 
+					},
 
 
-						get 'Shadows'() {
 
+					get 'Shadows'() {
 
 
-							return knotClippingGroup.clipShadows;
 
+						return knotClippingGroup.clipShadows;
 
 
-						},
 
-						set 'Shadows'( v ) {
 
+					},
 
+					set 'Shadows'( v ) {
 
 
-							knotClippingGroup.clipShadows = v;
 
+						knotClippingGroup.clipShadows = v;
 
 
-						},
 
+					},
 
 
-						get 'Intersection'() {
 
+					get 'Intersection'() {
 
 
-							return knotClippingGroup.clipIntersection;
 
+						return knotClippingGroup.clipIntersection;
 
 
-						},
 
+					},
 
 
-						set 'Intersection'( v ) {
 
+					set 'Intersection'( v ) {
 
 
-							knotClippingGroup.clipIntersection = v;
 
+						knotClippingGroup.clipIntersection = v;
 
 
-						},
 
+					},
 
 
-						get 'Plane'() {
 
+					get 'Plane'() {
 
 
-							return localPlane1.constant;
 
+						return localPlane1.constant;
 
 
-						},
 
-						set 'Plane'( v ) {
 
+					},
 
+					set 'Plane'( v ) {
 
 
-							localPlane1.constant = v;
 
+						localPlane1.constant = v;
 
 
-						}
 
+					}
 
 
-					},
 
+				};
 
 
-					folderGlobal = gui.addFolder( 'Global Clipping Group' ),
 
-					propsGlobal = {
 
+				const folderGlobal = gui.addFolder( 'Global Clipping Group' );
 
+				const propsGlobal = {
 
 
-						get 'Enabled'() {
 
+					get 'Enabled'() {
 
 
-							return globalClippingGroup.enabled;
 
+						return globalClippingGroup.enabled;
 
 
-						},
 
-						set 'Enabled'( v ) {
 
+					},
 
+					set 'Enabled'( v ) {
 
 
-							globalClippingGroup.enabled = v;
 
+						globalClippingGroup.enabled = v;
 
 
-						},
 
+					},
 
 
-						get 'Plane'() {
 
+					get 'Plane'() {
 
 
-							return globalPlane.constant;
 
+						return globalPlane.constant;
 
 
-						},
 
-						set 'Plane'( v ) {
 
+					},
 
+					set 'Plane'( v ) {
 
 
-							globalPlane.constant = v;
 
+						globalPlane.constant = v;
 
 
-						}
 
+					}
 
 
-					};
 
+				};
 
 
 				gui.add( props, 'alphaToCoverage' ).onChange( function ( value ) {
 
 
@@ -265,9 +267,7 @@
 
 				object.rotation.y = time * 0.2;
 
 				object.scale.setScalar( Math.cos( time ) * 0.125 + 0.875 );
 
 
-				stats.begin();
 
 				renderer.render( scene, camera );
 
-				stats.end();
 
 
 			}

+ 15 - 7
examples/webgpu_cubemap_adjustments.html
View File 

@@ -1,17 +1,24 @@
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js webgpu - cubemap adjustments</title>
 
+		<title>three.js webgpu - envmap adjustments</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">
 
+		<link type="text/css" rel="stylesheet" href="example.css">
 
 	</head>
 
 	<body>
 
 
 		<div id="info">
 
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - Env. Adjustments<br />
 
-			Battle Damaged Sci-fi Helmet by
 
-			<a href="https://sketchfab.com/theblueturtle_" target="_blank" rel="noopener">theblueturtle_</a><br />
 
+			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>
 
+
 
+			<div class="title-wrapper">
 
+				<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a><span>EnvMap Adjustments</span>
 
+			</div>
 
+
 
+			<small>
 
+				Adjust/modify the scene's background and environment.<br/>
 
+				Battle Damaged Sci-fi Helmet by <a href="https://sketchfab.com/theblueturtle_" target="_blank" rel="noopener">theblueturtle_</a>
 
+			</small>
 
 		</div>
 
 
 		<script type="importmap">
 
@@ -35,7 +42,7 @@
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
 
-			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
+			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 
 			let camera, scene, renderer;
 
 
@@ -136,6 +143,7 @@
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.toneMapping = THREE.LinearToneMapping;
 
+				renderer.inspector = new Inspector();
 
 				renderer.setAnimationLoop( render );
 
 				container.appendChild( renderer.domElement );
 
 
@@ -147,7 +155,7 @@
 
 
 				// gui
 
 
-				const gui = new GUI();
 
+				const gui = renderer.inspector.createParameters( 'Settings' );
 
 
 				gui.add( { blurBackground: blurNode.value }, 'blurBackground', 0, 1, 0.01 ).onChange( value => {

+ 17 - 13
examples/webgpu_cubemap_dynamic.html
View File 

@@ -4,7 +4,7 @@
 
 		<title>three.js webgpu - dynamic cube reflection</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">
 
+		<link type="text/css" rel="stylesheet" href="example.css">
 
 		<style>
 
 			body {
 
 				touch-action: none;
 
@@ -13,7 +13,17 @@
 
 	</head>
 
 	<body>
 
 
-		<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js webgpu</a> - dynamic cube reflection</div>
 
+		<div id="info">
 
+			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>
 
+
 
+			<div class="title-wrapper">
 
+				<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a><span>Dynamic Cube Reflections</span>
 
+			</div>
 
+
 
+			<small>
 
+				Realtime reflections rendered with a cube camera.
 
+			</small>
 
+		</div>
 
 
 		<script type="importmap">
 
 			{
 
@@ -32,11 +42,9 @@
 
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 			import { HDRCubeTextureLoader } from 'three/addons/loaders/HDRCubeTextureLoader.js';
 
+			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 
-			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
-			import Stats from 'three/addons/libs/stats.module.js';
 
-
 
-			let camera, scene, renderer, stats;
 
+			let camera, scene, renderer;
 
 			let cube, sphere, torus, material;
 
 
 			let cubeCamera, cubeRenderTarget;
 
@@ -47,9 +55,6 @@
 
 
 			async function init() {
 
 
-				stats = new Stats();
 
-				document.body.appendChild( stats.dom );
 
-
 
 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
 
 				camera.position.z = 75;
 
 
@@ -111,11 +116,12 @@
 
 
 				//
 
 
-				renderer = new THREE.WebGPURenderer( { antialias: true, forceWebGL: false } );
 
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setAnimationLoop( animation );
 
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 
+				renderer.inspector = new Inspector();
 
 				document.body.appendChild( renderer.domElement );
 
 
 				window.addEventListener( 'resize', onWindowResized );
 
@@ -123,7 +129,7 @@
 
 				controls = new OrbitControls( camera, renderer.domElement );
 
 				controls.autoRotate = true;
 
 
-				const gui = new GUI();
 
+				const gui = renderer.inspector.createParameters( 'Settings' );
 
 				gui.add( material, 'roughness', 0, 1 );
 
 				gui.add( material, 'metalness', 0, 1 );
 
 				gui.add( renderer, 'toneMappingExposure', 0, 2 ).name( 'exposure' );
 
@@ -169,8 +175,6 @@
 
 
 				renderer.render( scene, camera );
 
 
-				stats.update();
 
-
 
 			}
 
 
 		</script>

+ 15 - 9
examples/webgpu_cubemap_mix.html
View File 

@@ -4,16 +4,22 @@
 
 		<title>three.js webgpu - cubemap mix</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">
 
+		<link type="text/css" rel="stylesheet" href="example.css">
 
 	</head>
 
 	<body>
 
 
 		<div id="info">
 
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - Mix Two CubeMaps<br />
 
-			Battle Damaged Sci-fi Helmet by
 
-			<a href="https://sketchfab.com/theblueturtle_" target="_blank" rel="noopener">theblueturtle_</a><br />
 
-		</div>
 
+			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>
 
+
 
+			<div class="title-wrapper">
 
+				<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a><span>Cubemap Mix</span>
 
+			</div>
 
 
+			<small>
 
+				Mixing two cube maps.<br/>
 
+				Battle Damaged Sci-fi Helmet by <a href="https://sketchfab.com/theblueturtle_" target="_blank" rel="noopener">theblueturtle_</a>
 
+			</small>
 
+		</div>
 
 		<script type="importmap">
 
 			{
 
 				"imports": {
 
@@ -35,15 +41,14 @@
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
 
+			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
+
 
 			let camera, scene, renderer;
 
 
 			init();
 
 
 			async function init() {
 
 
-				const container = document.createElement( 'div' );
 
-				document.body.appendChild( container );
 
-
 
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
 
 				camera.position.set( - 1.8, 0.6, 2.7 );
 
 
@@ -81,8 +86,9 @@
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.toneMapping = THREE.LinearToneMapping;
 
+				renderer.inspector = new Inspector();
 
 				renderer.setAnimationLoop( render );
 
-				container.appendChild( renderer.domElement );
 
+				document.body.appendChild( renderer.domElement );
 
 
 				const controls = new OrbitControls( camera, renderer.domElement );
 
 				controls.minDistance = 2;

粤ICP备19079148号