3 месяцев назад · bf8916dc41
--- a/examples/jsm/inspector/ui/Values.js
+++ b/examples/jsm/inspector/ui/Values.js
@@ -264,12 +264,11 @@ class ValueSelect extends Value {
 
				 		super();
			
 
				 
			
 
				 		const select = document.createElement( 'select' );
			
 
				-		const type = typeof value;
			
 
				 
			
 
				 		const createOption = ( name, optionValue ) => {
			
 
				 
			
 
				 			const optionEl = document.createElement( 'option' );
			
 
				-			optionEl.value = optionValue;
			
 
				+			optionEl.value = name;
			
 
				 			optionEl.textContent = name;
			
 
				 
			
 
				 			if ( optionValue == value ) optionEl.selected = true;
			
@@ -300,20 +299,24 @@ class ValueSelect extends Value {
 
				 
			
 
				 		} );
			
 
				 
			
 
				+		this.options = options;
			
 
				 		this.select = select;
			
 
				-		this.type = type;
			
 
				 
			
 
				 	}
			
 
				 
			
 
				 	getValue() {
			
 
				 
			
 
				-		const value = this.select.value;
			
 
				-		const type = this.type;
			
 
				+		const options = this.options;
			
 
				 
			
 
				-		if ( type === 'number' ) return parseFloat( value );
			
 
				-		if ( type === 'boolean' ) return value === 'true';
			
 
				+		if ( Array.isArray( options ) ) {
			
 
				 
			
 
				-		return value;
			
 
				+			return options[ this.select.selectedIndex ];
			
 
				+
			
 
				+		} else {
			
 
				+
			
 
				+			return options[ this.select.value ];
			
 
				+
			
 
				+		}
			
 
				 
			
 
				 	}
			
 
				 
			
@@ -374,7 +377,15 @@ class ValueColor extends Value {
 
				 
			
 
				 	getValue() {
			
 
				 
			
 
				-		return this._value;
			
 
				+		let value = this._value;
			
 
				+
			
 
				+		if ( typeof value === 'string' ) {
			
 
				+
			
 
				+			value = parseInt( value.slice( 1 ), 16 );
			
 
				+
			
 
				+		}
			
 
				+
			
 
				+		return value;
			
 
				 
			
 
				 	}
			
 
				 
			
--- a/examples/webgpu_lights_spotlight.html
+++ b/examples/webgpu_lights_spotlight.html
@@ -4,12 +4,18 @@
 
				 		<title>three.js webgpu - spotlight</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 - spotlight<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>spot light</span>
			
 
				+			</div>
			
 
				+
			
 
				+			<small>Spot light projecting texture map.</small>
			
 
				 		</div>
			
 
				 
			
 
				 		<script type="importmap">
			
@@ -27,7 +33,7 @@
 
				 
			
 
				 			import * as THREE from 'three/webgpu';
			
 
				 
			
 
				-			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
			
 
				+			import { Inspector } from 'three/addons/inspector/Inspector.js';
			
 
				 
			
 
				 			import { PLYLoader } from 'three/addons/loaders/PLYLoader.js';
			
 
				 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			
@@ -48,6 +54,8 @@
 
				 				renderer.setAnimationLoop( animate );
			
 
				 				document.body.appendChild( renderer.domElement );
			
 
				 
			
 
				+				renderer.inspector = new Inspector();
			
 
				+
			
 
				 				renderer.toneMapping = THREE.NeutralToneMapping;
			
 
				 				renderer.toneMappingExposure = 1;
			
 
				 
			
@@ -156,7 +164,7 @@
 
				 
			
 
				 				// GUI
			
 
				 
			
 
				-				const gui = new GUI();
			
 
				+				const gui = renderer.inspector.createParameters( 'Settings' );
			
 
				 
			
 
				 				const params = {
			
 
				 					map: textures[ 'disturb.jpg' ],
			
@@ -233,8 +241,6 @@
 
				 
			
 
				 				} );
			
 
				 
			
 
				-				gui.open();
			
 
				-
			
 
				 			}
			
 
				 
			
 
				 			function onWindowResize() {