JSM to JS

examples/jsm/environments/RoomEnvironment.js

@@ -2,103 +2,110 @@
  * https://github.com/google/model-viewer/blob/master/packages/model-viewer/src/three-components/EnvironmentScene.ts
  */
 
-import * as THREE from '../../../build/three.module.js';
+import {
+	Scene,
+	BoxBufferGeometry,
+	MeshStandardMaterial,
+	PointLight,
+	Mesh,
+	MeshBasicMaterial
+} from '../../../build/three.module.js';
 
 function RoomEnvironment() {
 
-	const scene = new THREE.Scene();
+	const scene = new Scene();
 
-	const geometry = new THREE.BoxBufferGeometry();
+	const geometry = new BoxBufferGeometry();
 	geometry.deleteAttribute( 'uv' );
 
-	const roomMaterial = new THREE.MeshStandardMaterial( { side: THREE.BackSide } );
-	const boxMaterial = new THREE.MeshStandardMaterial();
+	const roomMaterial = new MeshStandardMaterial( { side: BackSide } );
+	const boxMaterial = new MeshStandardMaterial();
 
-	const mainLight = new THREE.PointLight( 0xffffff, 5.0, 28, 2 );
+	const mainLight = new PointLight( 0xffffff, 5.0, 28, 2 );
 	mainLight.position.set( 0.418, 16.199, 0.300 );
 	scene.add( mainLight );
 
-	const room = new THREE.Mesh( geometry, roomMaterial );
+	const room = new Mesh( geometry, roomMaterial );
 	room.position.set( - 0.757, 13.219, 0.717 );
 	room.scale.set( 31.713, 28.305, 28.591 );
 	scene.add( room );
 
-	const box1 = new THREE.Mesh( geometry, boxMaterial );
+	const box1 = new Mesh( geometry, boxMaterial );
 	box1.position.set( - 10.906, 2.009, 1.846 );
 	box1.rotation.set( 0, - 0.195, 0 );
 	box1.scale.set( 2.328, 7.905, 4.651 );
 	scene.add( box1 );
 
-	const box2 = new THREE.Mesh( geometry, boxMaterial );
+	const box2 = new Mesh( geometry, boxMaterial );
 	box2.position.set( - 5.607, - 0.754, - 0.758 );
 	box2.rotation.set( 0, 0.994, 0 );
 	box2.scale.set( 1.970, 1.534, 3.955 );
 	scene.add( box2 );
 
-	const box3 = new THREE.Mesh( geometry, boxMaterial );
+	const box3 = new Mesh( geometry, boxMaterial );
 	box3.position.set( 6.167, 0.857, 7.803 );
 	box3.rotation.set( 0, 0.561, 0 );
 	box3.scale.set( 3.927, 6.285, 3.687 );
 	scene.add( box3 );
 
-	const box4 = new THREE.Mesh( geometry, boxMaterial );
+	const box4 = new Mesh( geometry, boxMaterial );
 	box4.position.set( - 2.017, 0.018, 6.124 );
 	box4.rotation.set( 0, 0.333, 0 );
 	box4.scale.set( 2.002, 4.566, 2.064 );
 	scene.add( box4 );
 
-	const box5 = new THREE.Mesh( geometry, boxMaterial );
+	const box5 = new Mesh( geometry, boxMaterial );
 	box5.position.set( 2.291, - 0.756, - 2.621 );
 	box5.rotation.set( 0, - 0.286, 0 );
 	box5.scale.set( 1.546, 1.552, 1.496 );
 	scene.add( box5 );
 
-	const box6 = new THREE.Mesh( geometry, boxMaterial );
+	const box6 = new Mesh( geometry, boxMaterial );
 	box6.position.set( - 2.193, - 0.369, - 5.547 );
 	box6.rotation.set( 0, 0.516, 0 );
 	box6.scale.set( 3.875, 3.487, 2.986 );
 	scene.add( box6 );
 
 
 	// -x right
-	const light1 = new THREE.Mesh( geometry, createAreaLightMaterial( 50 ) );
+	const light1 = new Mesh( geometry, createAreaLightMaterial( 50 ) );
 	light1.position.set( - 16.116, 14.37, 8.208 );
 	light1.scale.set( 0.1, 2.428, 2.739 );
 	scene.add( light1 );
 
 	// -x left
-	const light2 = new THREE.Mesh( geometry, createAreaLightMaterial( 50 ) );
+	const light2 = new Mesh( geometry, createAreaLightMaterial( 50 ) );
 	light2.position.set( - 16.109, 18.021, - 8.207 );
 	light2.scale.set( 0.1, 2.425, 2.751 );
 	scene.add( light2 );
 
 	// +x
-	const light3 = new THREE.Mesh( geometry, createAreaLightMaterial( 17 ) );
+	const light3 = new Mesh( geometry, createAreaLightMaterial( 17 ) );
 	light3.position.set( 14.904, 12.198, - 1.832 );
 	light3.scale.set( 0.15, 4.265, 6.331 );
 	scene.add( light3 );
 
 	// +z
-	const light4 = new THREE.Mesh( geometry, createAreaLightMaterial( 43 ) );
+	const light4 = new Mesh( geometry, createAreaLightMaterial( 43 ) );
 	light4.position.set( - 0.462, 8.89, 14.520 );
 	light4.scale.set( 4.38, 5.441, 0.088 );
 	scene.add( light4 );
 
 	// -z
-	const light5 = new THREE.Mesh( geometry, createAreaLightMaterial( 20 ) );
+	const light5 = new Mesh( geometry, createAreaLightMaterial( 20 ) );
 	light5.position.set( 3.235, 11.486, - 12.541 );
 	light5.scale.set( 2.5, 2.0, 0.1 );
 	scene.add( light5 );
 
 	// +y
-	const light6 = new THREE.Mesh( geometry, createAreaLightMaterial( 100 ) );
+	const light6 = new Mesh( geometry, createAreaLightMaterial( 100 ) );
 	light6.position.set( 0.0, 20.0, 0.0 );
 	light6.scale.set( 1.0, 0.1, 1.0 );
 	scene.add( light6 );
 
 	function createAreaLightMaterial( intensity ) {
 
-		const material = new THREE.MeshBasicMaterial();
+		const material = new MeshBasicMaterial();
 		material.color.setScalar( intensity );
 		return material;
 

examples/jsm/helpers/LightProbeHelper.js

@@ -16,7 +16,7 @@ function LightProbeHelper( lightProbe, size ) {
 
 		uniforms: {
 
-			sh: { value: this.lightProbe.sh.coefficients }, // by reference
+			sh: { value: this.lightProbe.sh.coefficients },
 
 			intensity: { value: this.lightProbe.intensity }
 
@@ -42,28 +42,20 @@ function LightProbeHelper( lightProbe, size ) {
 
 			'vec3 inverseTransformDirection( in vec3 normal, in mat4 matrix ) {',
 
-			'	// matrix is assumed to be orthogonal',
-
 			'	return normalize( ( vec4( normal, 0.0 ) * matrix ).xyz );',
 
 			'}',
 
-			'// source: https://graphics.stanford.edu/papers/envmap/envmap.pdf',
 			'vec3 shGetIrradianceAt( in vec3 normal, in vec3 shCoefficients[ 9 ] ) {',
 
-			'	// normal is assumed to have unit length',
-
 			'	float x = normal.x, y = normal.y, z = normal.z;',
 
-			'	// band 0',
 			'	vec3 result = shCoefficients[ 0 ] * 0.886227;',
 
-			'	// band 1',
 			'	result += shCoefficients[ 1 ] * 2.0 * 0.511664 * y;',
 			'	result += shCoefficients[ 2 ] * 2.0 * 0.511664 * z;',
 			'	result += shCoefficients[ 3 ] * 2.0 * 0.511664 * x;',
 
-			'	// band 2',
 			'	result += shCoefficients[ 4 ] * 2.0 * 0.429043 * x * y;',
 			'	result += shCoefficients[ 5 ] * 2.0 * 0.429043 * y * z;',
 			'	result += shCoefficients[ 6 ] * ( 0.743125 * z * z - 0.247708 );',
@@ -74,9 +66,9 @@ function LightProbeHelper( lightProbe, size ) {
 
 			'}',
 
-			'uniform vec3 sh[ 9 ]; // sh coefficients',
+			'uniform vec3 sh[ 9 ];',
 
-			'uniform float intensity; // light probe intensity',
+			'uniform float intensity;',
 
 			'varying vec3 vNormal;',
 

examples/jsm/loaders/NodeMaterialLoader.js

@@ -3,7 +3,9 @@ import {
 	FileLoader
 } from "../../../build/three.module.js";
 
-import * as Nodes from "../nodes/Nodes.js";
+import {
+	Node
+} from "../nodes/Nodes.js";
 
 var NodeMaterialLoader = function ( manager, library ) {
 

examples/jsm/offscreen/scene.js

@@ -1,39 +1,52 @@
-import * as THREE from '../../../build/three.module.js';
+import {
+	PerspectiveCamera,
+	Scene,
+	Fog,
+	Color,
+	Group,
+	ImageBitmapLoader,
+	CanvasTexture,
+	IcosahedronBufferGeometry,
+	MeshMatcapMaterial,
+	Mesh,
+	WebGLRenderer,
+
+} from '../../../build/three.module.js';
 
 var camera, scene, renderer, group;
 
 function init( canvas, width, height, pixelRatio, path ) {
 
-	camera = new THREE.PerspectiveCamera( 40, width / height, 1, 1000 );
+	camera = new PerspectiveCamera( 40, width / height, 1, 1000 );
 	camera.position.z = 200;
 
-	scene = new THREE.Scene();
-	scene.fog = new THREE.Fog( 0x444466, 100, 400 );
-	scene.background = new THREE.Color( 0x444466 );
+	scene = new Scene();
+	scene.fog = new Fog( 0x444466, 100, 400 );
+	scene.background = new Color( 0x444466 );
 
-	group = new THREE.Group();
+	group = new Group();
 	scene.add( group );
 
 	// we don't use ImageLoader since it has a DOM dependency (HTML5 image element)
 
-	var loader = new THREE.ImageBitmapLoader().setPath( path );
+	var loader = new ImageBitmapLoader().setPath( path );
 	loader.setOptions( { imageOrientation: 'flipY' } );
 	loader.load( 'textures/matcaps/matcap-porcelain-white.jpg', function ( imageBitmap ) {
 
-		var texture = new THREE.CanvasTexture( imageBitmap );
+		var texture = new CanvasTexture( imageBitmap );
 
-		var geometry = new THREE.IcosahedronBufferGeometry( 5, 8 );
+		var geometry = new IcosahedronBufferGeometry( 5, 8 );
 		var materials = [
-			new THREE.MeshMatcapMaterial( { color: 0xaa24df, matcap: texture } ),
-			new THREE.MeshMatcapMaterial( { color: 0x605d90, matcap: texture } ),
-			new THREE.MeshMatcapMaterial( { color: 0xe04a3f, matcap: texture } ),
-			new THREE.MeshMatcapMaterial( { color: 0xe30456, matcap: texture } )
+			new MeshMatcapMaterial( { color: 0xaa24df, matcap: texture } ),
+			new MeshMatcapMaterial( { color: 0x605d90, matcap: texture } ),
+			new MeshMatcapMaterial( { color: 0xe04a3f, matcap: texture } ),
+			new MeshMatcapMaterial( { color: 0xe30456, matcap: texture } )
 		];
 
 		for ( var i = 0; i < 100; i ++ ) {
 
 			var material = materials[ i % materials.length ];
-			var mesh = new THREE.Mesh( geometry, material );
+			var mesh = new Mesh( geometry, material );
 			mesh.position.x = random() * 200 - 100;
 			mesh.position.y = random() * 200 - 100;
 			mesh.position.z = random() * 200 - 100;
@@ -42,7 +55,7 @@ function init( canvas, width, height, pixelRatio, path ) {
 
 		}
 
-		renderer = new THREE.WebGLRenderer( { antialias: true, canvas: canvas } );
+		renderer = new WebGLRenderer( { antialias: true, canvas: canvas } );
 		renderer.setPixelRatio( pixelRatio );
 		renderer.setSize( width, height, false );