Merge remote-tracking branch 'upstream/dev' into dev

docs/api/en/textures/DepthTexture.html

@@ -30,7 +30,7 @@ <h3>[name]( [param:Number width], [param:Number height], [param:Constant type],
 
 		[page:Number height] -- height of the texture.<br />
 
-		[page:Constant type] -- Default is [page:Textures THREE.UnsignedShortType] when using [page:Textures DepthFormat] and [page:Textures THREE.UnsignedInt248Type] when using [page:Textures DepthStencilFormat].
+		[page:Constant type] -- Default is [page:Textures THREE.UnsignedIntType] when using [page:Textures DepthFormat] and [page:Textures THREE.UnsignedInt248Type] when using [page:Textures DepthStencilFormat].
 		See [page:Textures type constants] for other choices.<br />
 
 		[page:Constant mapping] --
@@ -72,7 +72,7 @@ <h3>[page:Texture.format format]</h3>
 
 		<h3>[page:Texture.type type]</h3>
 		<p>
-		Default is [page:Textures THREE.UnsignedShortType] when using [page:Textures DepthFormat] and [page:Textures THREE.UnsignedInt248Type] when using [page:Textures DepthStencilFormat].
+		Default is [page:Textures THREE.UnsignedIntType] when using [page:Textures DepthFormat] and [page:Textures THREE.UnsignedInt248Type] when using [page:Textures DepthStencilFormat].
 		See [page:Textures format constants] for details.<br />
 		</p>
 

docs/api/zh/textures/DepthTexture.html

@@ -29,7 +29,7 @@ <h3>[name]( [param:Number width], [param:Number height], [param:Constant type],
 
 		[page:Number height] -- 纹理的高度。<br />
 
-		[page:Constant type] -- Default is [page:Textures THREE.UnsignedShortType] when using [page:Textures DepthFormat] and [page:Textures THREE.UnsignedInt248Type] when using [page:Textures DepthStencilFormat].
+		[page:Constant type] -- Default is [page:Textures THREE.UnsignedIntType] when using [page:Textures DepthFormat] and [page:Textures THREE.UnsignedInt248Type] when using [page:Textures DepthStencilFormat].
 		请参阅[page:Textures type constants]（类型常量）来了解其他选项。<br />
 
 		[page:Constant mapping] --
@@ -71,7 +71,7 @@ <h3>[page:Texture.format format]</h3>
 
 		<h3>[page:Texture.type type]</h3>
 		<p>
-		Default is [page:Textures THREE.UnsignedShortType] when using [page:Textures DepthFormat] and [page:Textures THREE.UnsignedInt248Type] when using [page:Textures DepthStencilFormat].
+		Default is [page:Textures THREE.UnsignedIntType] when using [page:Textures DepthFormat] and [page:Textures THREE.UnsignedInt248Type] when using [page:Textures DepthStencilFormat].
 		请参阅[page:Textures format constants]来了解详细信息。<br />
 		</p>
 

docs/examples/en/loaders/GLTFLoader.html

@@ -39,6 +39,7 @@ <h2>Extensions</h2>
 			<li>KHR_materials_pbrSpecularGlossiness</li>
 			<li>KHR_materials_specular</li>
 			<li>KHR_materials_transmission</li>
+			<li>KHR_materials_iridescence</li>
 			<li>KHR_materials_unlit</li>
 			<li>KHR_materials_volume</li>
 			<li>KHR_mesh_quantization</li>

docs/examples/zh/loaders/GLTFLoader.html

@@ -37,6 +37,7 @@ <h2>扩展</h2>
 			<li>KHR_materials_pbrSpecularGlossiness</li>
 			<li>KHR_materials_specular</li>
 			<li>KHR_materials_transmission</li>
+			<li>KHR_materials_iridescence</li>
 			<li>KHR_materials_unlit</li>
 			<li>KHR_materials_volume</li>
 			<li>KHR_mesh_quantization</li>

docs/manual/ar/introduction/Creating-a-scene.html

@@ -121,7 +121,7 @@ <h2>إنشاء مشهد</h2>
 		</p>
 
 		<code>
-		const geometry = new THREE.BoxGeometry();
+		const geometry = new THREE.BoxGeometry( 1, 1, 1 );
 		const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
 		const cube = new THREE.Mesh( geometry, material );
 		scene.add( cube );
@@ -242,7 +242,7 @@ <h2>النتيجة</h2>
 					renderer.setSize( window.innerWidth, window.innerHeight );
 					document.body.appendChild( renderer.domElement );
 
-					const geometry = new THREE.BoxGeometry();
+					const geometry = new THREE.BoxGeometry( 1, 1, 1 );
 					const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
 					const cube = new THREE.Mesh( geometry, material );
 					scene.add( cube );

docs/manual/ar/introduction/FAQ.html

@@ -52,5 +52,10 @@ <h2>لماذا جزء من نموذجي غير مرئي؟</h2>
 
 			<code>material.side = THREE.DoubleSide</code>
 		</p>
+
+		<h2>Why does three.js sometimes return strange results for invalid inputs?</h2>
+		<p>
+			For performance reasons, three.js doesn't validate inputs in most cases. It's your app's responsibility to make sure that all inputs are valid.
+		</p>
 	</body>
 </html>

docs/manual/en/introduction/Creating-a-scene.html

@@ -70,7 +70,7 @@ <h2>Creating the scene</h2>
 		<p><em>"That's all good, but where's that cube you promised?"</em> Let's add it now.</p>
 
 		<code>
-		const geometry = new THREE.BoxGeometry();
+		const geometry = new THREE.BoxGeometry( 1, 1, 1 );
 		const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
 		const cube = new THREE.Mesh( geometry, material );
 		scene.add( cube );
@@ -138,7 +138,7 @@ <h2>The result</h2>
 					renderer.setSize( window.innerWidth, window.innerHeight );
 					document.body.appendChild( renderer.domElement );
 
-					const geometry = new THREE.BoxGeometry();
+					const geometry = new THREE.BoxGeometry( 1, 1, 1 );
 					const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
 					const cube = new THREE.Mesh( geometry, material );
 					scene.add( cube );

docs/manual/en/introduction/FAQ.html

@@ -51,5 +51,10 @@ <h2>Why is part of my object invisible?</h2>
 			This could be because of face culling. Faces have an orientation that decides which side is which. And the culling removes the backside in normal circumstances. To see if this is your problem, change the material side to THREE.DoubleSide.
 			<code>material.side = THREE.DoubleSide</code>
 		</p>
+
+		<h2>Why does three.js sometimes return strange results for invalid inputs?</h2>
+		<p>
+			For performance reasons, three.js doesn't validate inputs in most cases. It's your app's responsibility to make sure that all inputs are valid.
+		</p>
 	</body>
 </html>

docs/manual/en/introduction/How-to-run-things-locally.html

@@ -21,21 +21,19 @@ <h2>Content loaded from external files</h2>
 			 	security restrictions, loading from a file system will fail with a security exception.
 		 	</p>
 
-			<p>There are two ways to solve this:</p>
-
-			<ol>
-				<li>
-					Change security for local files in a browser. This allows you to access your page as: <code>file:///yourFile.html</code>
-				</li>
-				<li>
-					Run files from a local web server. This allows you to access your page as: <code>http://localhost/yourFile.html</code>
-				</li>
-			</ol>
+			<p>
+				To solve this, run files from a local web server. This allows you to access your page as:
+			</p>
+
+			<p>
+				<code>http://localhost/yourFile.html</code>
+			</p>
 
 			<p>
-				If you use option 1, be aware that you may open yourself to some vulnerabilities if using
-				the same browser for a regular web surfing. You may want to create a separate browser
-				profile / shortcut used just for local development to be safe. Let's go over each option in turn.
+				While it is also possible to change browser security settings instead of running a local server,
+				we do not recommend that approach. Doing so may open your device up to vulnerabilities, if the
+				same browser is used for regular web surfing. Use of a local server is standard practice in 
+				web development, and we explain how to install and use a local server below.
 			</p>
 		</div>
 

docs/manual/ja/introduction/Creating-a-scene.html

@@ -70,7 +70,7 @@ <h2>シーンの作成</h2>
 		<p><em>"それはそれとして、冒頭で言っていたキューブはどこにあるの？"</em> いますぐ追加しましょう。</p>
 
 		<code>
-		const geometry = new THREE.BoxGeometry();
+		const geometry = new THREE.BoxGeometry( 1, 1, 1 );
 		const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
 		const cube = new THREE.Mesh( geometry, material );
 		scene.add( cube );
@@ -137,7 +137,7 @@ <h2>成果</h2>
 					renderer.setSize( window.innerWidth, window.innerHeight );
 					document.body.appendChild( renderer.domElement );
 
-					const geometry = new THREE.BoxGeometry();
+					const geometry = new THREE.BoxGeometry( 1, 1, 1 );
 					const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
 					const cube = new THREE.Mesh( geometry, material );
 					scene.add( cube );

docs/manual/ja/introduction/FAQ.html

@@ -54,6 +54,11 @@ <h2>オブジェクトの一部が非表示になる原因はなんですか？<
         これはface cullingが原因かもしれません。Faceにはどちらの面かを決める向きがあります。 そして、cullingは通常の状況では裏面を削除します。 これが問題となって非表示になっているかどうかを確認するには、 マテリアルの面をTHREE.DoubleSideに変更してください。
         <code>material.side = THREE.DoubleSide</code>
     </p>
+
+		<h2>Why does three.js sometimes return strange results for invalid inputs?</h2>
+		<p>
+			For performance reasons, three.js doesn't validate inputs in most cases. It's your app's responsibility to make sure that all inputs are valid.
+		</p>
 </body>
 
-</html>
+</html>

docs/manual/ko/introduction/Creating-a-scene.html

@@ -71,7 +71,7 @@ <h2>Scene 만들기</h2>
 		<p><em>"그건 그렇고, 아까 말했던 큐브는 어디에 있죠?"</em> 바로 추가해 봅시다.</p>
 
 		<code>
-		const geometry = new THREE.BoxGeometry();
+		const geometry = new THREE.BoxGeometry( 1, 1, 1 );
 		const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
 		const cube = new THREE.Mesh( geometry, material );
 		scene.add( cube );
@@ -140,7 +140,7 @@ <h2>결과 화면</h2>
 					renderer.setSize( window.innerWidth, window.innerHeight );
 					document.body.appendChild( renderer.domElement );
 
-					const geometry = new THREE.BoxGeometry();
+					const geometry = new THREE.BoxGeometry( 1, 1, 1 );
 					const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
 					const cube = new THREE.Mesh( geometry, material );
 					scene.add( cube );

docs/manual/ko/introduction/FAQ.html

@@ -50,5 +50,10 @@ <h2>왜 오브젝트 일부가 안 보일까요?</h2>
 			이는 페이스 컬링 문제일 수 있습니다. 각 면들은 어느 방향이 어느 방향인지에 대한 정보를 가지고 있습니다. 그리고 컬링은 일반적으로 뒷편의 면을 제거해 버립니다. 이 문제가 의심된다면 재질의 면을 THREE.DoubleSide로 변경해 보세요.
 			<code>material.side = THREE.DoubleSide</code>
 		</p>
+
+		<h2>Why does three.js sometimes return strange results for invalid inputs?</h2>
+		<p>
+			For performance reasons, three.js doesn't validate inputs in most cases. It's your app's responsibility to make sure that all inputs are valid.
+		</p>
 	</body>
-</html>
+</html>

docs/manual/zh/introduction/Creating-a-scene.html

@@ -70,7 +70,7 @@ <h2>创建一个场景</h2>
 		<p><em>“嗯，看起来很不错，那你说的那个立方体在哪儿？”</em>接下来，我们就来添加立方体。</p>
 
 		<code>
-		const geometry = new THREE.BoxGeometry();
+		const geometry = new THREE.BoxGeometry( 1, 1, 1 );
 		const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
 		const cube = new THREE.Mesh( geometry, material );
 		scene.add( cube );
@@ -138,7 +138,7 @@ <h2>结果</h2>
 					renderer.setSize( window.innerWidth, window.innerHeight );
 					document.body.appendChild( renderer.domElement );
 
-					const geometry = new THREE.BoxGeometry();
+					const geometry = new THREE.BoxGeometry( 1, 1, 1 );
 					const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
 					const cube = new THREE.Mesh( geometry, material );
 					scene.add( cube );

docs/manual/zh/introduction/FAQ.html

@@ -49,5 +49,10 @@ <h2>为什么我的物体的一部分是不可见的？</h2>
 			在正常情况下，渲染时会将背面进行剔除。要查看这是不是你所遇到的问题，请将material的side更改为THREE.DoubleSide。
 			<code>material.side = THREE.DoubleSide</code>
 		</p>
+
+		<h2>Why does three.js sometimes return strange results for invalid inputs?</h2>
+		<p>
+			For performance reasons, three.js doesn't validate inputs in most cases. It's your app's responsibility to make sure that all inputs are valid.
+		</p>
 	</body>
 </html>

docs/scenes/ccdiksolver-browser.html

@@ -50,7 +50,6 @@
 				Float32BufferAttribute,
 				MeshPhongMaterial,
 				PerspectiveCamera,
-				PointLight,
 				Scene,
 				SkinnedMesh,
 				Skeleton,
@@ -215,18 +214,18 @@
 				gui.add( mesh, 'pose' ).name( 'mesh.pose()' );
 
 				mesh.skeleton.bones
-					.filter((bone) => bone.name === "target")
-					.forEach(function (bone) {
+					.filter( ( bone ) => bone.name === "target" )
+					.forEach( function (bone) {
 						const folder = gui.addFolder( bone.name );
 
 						const delta = 20;
 						folder.add( bone.position, 'x', - delta + bone.position.x, delta + bone.position.x );
 						folder.add( bone.position, 'y', - bone.position.y, bone.position.y );
 						folder.add( bone.position, 'z', - delta + bone.position.z, delta + bone.position.z );
-					});
+					} );
 
 				gui.add( ikSolver, 'update' ).name( 'ikSolver.update()' );
-				gui.add( state, 'ikSolverAutoUpdate' )
+				gui.add( state, 'ikSolverAutoUpdate' );
 
 			}
 
@@ -258,7 +257,7 @@
 					{
 						target: 5,
 						effector: 4,
-						links: [{ index: 3 }, { index: 2 }, { index: 1 }]
+						links: [ { index: 3 }, { index: 2 }, { index: 1 } ]
 					}
 				];
 				ikSolver = new CCDIKSolver( mesh, iks );
@@ -271,7 +270,9 @@
 				requestAnimationFrame( render );
 
 				if ( state.ikSolverAutoUpdate ) {
+
 					ikSolver?.update();
+
 				}
 
 				renderer.render( scene, camera );

editor/js/Editor.js

@@ -5,6 +5,7 @@ import { Loader } from './Loader.js';
 import { History as _History } from './History.js';
 import { Strings } from './Strings.js';
 import { Storage as _Storage } from './Storage.js';
+import { Selector } from './Viewport.Selector.js';
 
 var _DEFAULT_CAMERA = new THREE.PerspectiveCamera( 50, 1, 0.01, 1000 );
 _DEFAULT_CAMERA.name = 'Camera';
@@ -13,7 +14,7 @@ _DEFAULT_CAMERA.lookAt( new THREE.Vector3() );
 
 function Editor() {
 
-	var Signal = signals.Signal;
+	const Signal = signals.Signal; // eslint-disable-line no-undef
 
 	this.signals = {
 
@@ -84,14 +85,17 @@ function Editor() {
 		refreshSidebarObject3D: new Signal(),
 		historyChanged: new Signal(),
 
-		viewportCameraChanged: new Signal()
+		viewportCameraChanged: new Signal(),
+
+		intersectionsDetected: new Signal(),
 
 	};
 
 	this.config = new Config();
 	this.history = new _History( this );
 	this.storage = new _Storage();
 	this.strings = new Strings( this.config );
+	this.selector = new Selector( this );
 
 	this.loader = new Loader( this );
 
@@ -535,20 +539,7 @@ Editor.prototype = {
 
 	select: function ( object ) {
 
-		if ( this.selected === object ) return;
-
-		var uuid = null;
-
-		if ( object !== null ) {
-
-			uuid = object.uuid;
-
-		}
-
-		this.selected = object;
-
-		this.config.setKey( 'selected', uuid );
-		this.signals.objectSelected.dispatch( object );
+		this.selector.select( object );
 
 	},
 
@@ -583,7 +574,7 @@ Editor.prototype = {
 
 	deselect: function () {
 
-		this.select( null );
+		this.selector.deselect();
 
 	},
 

editor/js/EditorControls.js

@@ -301,9 +301,9 @@ function EditorControls( object, domElement ) {
 
 			var closest = touches[ 0 ];
 
-			for ( var i in touches ) {
+			for ( var touch2 of touches ) {
 
-				if ( closest.distanceTo( touch ) > touches[ i ].distanceTo( touch ) ) closest = touches[ i ];
+				if ( closest.distanceTo( touch ) > touch2.distanceTo( touch ) ) closest = touch2;
 
 			}
 

editor/js/Loader.js

@@ -509,6 +509,28 @@ function Loader( editor ) {
 
 			}
 
+			case 'pcd':
+
+			{
+
+				reader.addEventListener( 'load', async function ( event ) {
+
+					const contents = event.target.result;
+
+					const { PCDLoader } = await import( '../../examples/jsm/loaders/PCDLoader.js' );
+
+					const points = new PCDLoader().parse( contents );
+					points.name = filename;
+
+					editor.execute( new AddObjectCommand( editor, points ) );
+
+				}, false );
+				reader.readAsArrayBuffer( file );
+
+				break;
+
+			}
+
 			case 'ply':
 
 			{