Skip to content

Commit 5a51f73

Browse files
mrdoobmrdoob
committed
Docs: Simplified imports in material browser.
1 parent 412b99a commit 5a51f73

File tree

1 file changed

+68
-100
lines changed

1 file changed

+68
-100
lines changed

‎docs/scenes/material-browser.html‎

Lines changed: 68 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -26,97 +26,65 @@
2626
<a id='newWindow' href='./material-browser.html' target='_blank'>Open in New Window</a>
2727

2828
<script type="module">
29-
import {
30-
AdditiveBlending, CustomBlending, MultiplyBlending, NormalBlending, NoBlending, SubtractiveBlending,
31-
AddEquation, ReverseSubtractEquation, SubtractEquation,
32-
AddOperation, MixOperation, MultiplyOperation,
33-
AmbientLight,
34-
Color,
35-
CubeTextureLoader,
36-
CubeRefractionMapping,
37-
DoubleSide, FrontSide, BackSide,
38-
DstAlphaFactor, DstColorFactor, OneFactor, OneMinusDstAlphaFactor, OneMinusDstColorFactor, OneMinusSrcAlphaFactor, OneMinusSrcColorFactor, SrcAlphaFactor, SrcAlphaSaturateFactor, SrcColorFactor, ZeroFactor,
39-
Float32BufferAttribute,
40-
Fog,
41-
LineBasicMaterial,
42-
Mesh,
43-
MeshBasicMaterial,
44-
MeshDepthMaterial,
45-
MeshLambertMaterial,
46-
MeshMatcapMaterial,
47-
MeshNormalMaterial,
48-
MeshPhongMaterial,
49-
MeshPhysicalMaterial,
50-
MeshStandardMaterial,
51-
MeshToonMaterial,
52-
NearestFilter,
53-
PerspectiveCamera,
54-
PointLight,
55-
RepeatWrapping,
56-
RGBFormat,
57-
Scene,
58-
TextureLoader,
59-
TorusKnotGeometry,
60-
WebGLRenderer
61-
} from "../../build/three.module.js";
62-
63-
import { GUI } from '../../examples/jsm/libs/dat.gui.module.js';
29+
30+
import * as THREE from '../../build/three.module.js';
31+
import * as DAT from '../../examples/jsm/libs/dat.gui.module.js';
6432

6533
const constants = {
6634

6735
combine: {
6836

69-
'THREE.MultiplyOperation': MultiplyOperation,
70-
'THREE.MixOperation': MixOperation,
71-
'THREE.AddOperation': AddOperation
37+
'THREE.MultiplyOperation': THREE.MultiplyOperation,
38+
'THREE.MixOperation': THREE.MixOperation,
39+
'THREE.AddOperation': THREE.AddOperation
7240

7341
},
7442

7543
side: {
7644

77-
'THREE.FrontSide': FrontSide,
78-
'THREE.BackSide': BackSide,
79-
'THREE.DoubleSide': DoubleSide
45+
'THREE.FrontSide': THREE.FrontSide,
46+
'THREE.BackSide': THREE.BackSide,
47+
'THREE.DoubleSide': THREE.DoubleSide
8048

8149
},
8250

8351
blendingMode: {
8452

85-
'THREE.NoBlending': NoBlending,
86-
'THREE.NormalBlending': NormalBlending,
87-
'THREE.AdditiveBlending': AdditiveBlending,
88-
'THREE.SubtractiveBlending': SubtractiveBlending,
89-
'THREE.MultiplyBlending': MultiplyBlending,
90-
'THREE.CustomBlending': CustomBlending
53+
'THREE.NoBlending': THREE.NoBlending,
54+
'THREE.NormalBlending': THREE.NormalBlending,
55+
'THREE.AdditiveBlending': THREE.AdditiveBlending,
56+
'THREE.SubtractiveBlending': THREE.SubtractiveBlending,
57+
'THREE.MultiplyBlending': THREE.MultiplyBlending,
58+
'THREE.CustomBlending': THREE.CustomBlending
9159

9260
},
9361

9462
equations: {
9563

96-
'THREE.AddEquation': AddEquation,
97-
'THREE.SubtractEquation': SubtractEquation,
98-
'THREE.ReverseSubtractEquation': ReverseSubtractEquation
64+
'THREE.AddEquation': THREE.AddEquation,
65+
'THREE.SubtractEquation': THREE.SubtractEquation,
66+
'THREE.ReverseSubtractEquation': THREE.ReverseSubtractEquation
9967

10068
},
10169

10270
destinationFactors: {
10371

104-
'THREE.ZeroFactor': ZeroFactor,
105-
'THREE.OneFactor': OneFactor,
106-
'THREE.SrcColorFactor': SrcColorFactor,
107-
'THREE.OneMinusSrcColorFactor': OneMinusSrcColorFactor,
108-
'THREE.SrcAlphaFactor': SrcAlphaFactor,
109-
'THREE.OneMinusSrcAlphaFactor': OneMinusSrcAlphaFactor,
110-
'THREE.DstAlphaFactor': DstAlphaFactor,
111-
'THREE.OneMinusDstAlphaFactor': OneMinusDstAlphaFactor
72+
'THREE.ZeroFactor': THREE.ZeroFactor,
73+
'THREE.OneFactor': THREE.OneFactor,
74+
'THREE.SrcColorFactor': THREE.SrcColorFactor,
75+
'THREE.OneMinusSrcColorFactor': THREE.OneMinusSrcColorFactor,
76+
'THREE.SrcAlphaFactor': THREE.SrcAlphaFactor,
77+
'THREE.OneMinusSrcAlphaFactor': THREE.OneMinusSrcAlphaFactor,
78+
'THREE.DstAlphaFactor': THREE.DstAlphaFactor,
79+
'THREE.OneMinusDstAlphaFactor': THREE.OneMinusDstAlphaFactor
11280

11381
},
11482

11583
sourceFactors: {
11684

117-
'THREE.DstColorFactor': DstColorFactor,
118-
'THREE.OneMinusDstColorFactor': OneMinusDstColorFactor,
119-
'THREE.SrcAlphaSaturateFactor': SrcAlphaSaturateFactor
85+
'THREE.DstColorFactor': THREE.DstColorFactor,
86+
'THREE.OneMinusDstColorFactor': THREE.OneMinusDstColorFactor,
87+
'THREE.SrcAlphaSaturateFactor': THREE.SrcAlphaSaturateFactor
12088

12189
}
12290

@@ -140,8 +108,8 @@
140108

141109
}
142110

143-
const textureLoader = new TextureLoader();
144-
const cubeTextureLoader = new CubeTextureLoader();
111+
const textureLoader = new THREE.TextureLoader();
112+
const cubeTextureLoader = new THREE.CubeTextureLoader();
145113

146114
const envMaps = ( function () {
147115

@@ -154,11 +122,11 @@
154122
];
155123

156124
const reflectionCube = cubeTextureLoader.load( urls );
157-
reflectionCube.format = RGBFormat;
125+
reflectionCube.format = THREE.RGBFormat;
158126

159127
const refractionCube = cubeTextureLoader.load( urls );
160-
refractionCube.mapping = CubeRefractionMapping;
161-
refractionCube.format = RGBFormat;
128+
refractionCube.mapping = THREE.CubeRefractionMapping;
129+
refractionCube.format = THREE.RGBFormat;
162130

163131
return {
164132
none: null,
@@ -171,8 +139,8 @@
171139
const diffuseMaps = ( function () {
172140

173141
const bricks = textureLoader.load( '../../examples/textures/brick_diffuse.jpg' );
174-
bricks.wrapS = RepeatWrapping;
175-
bricks.wrapT = RepeatWrapping;
142+
bricks.wrapS = THREE.RepeatWrapping;
143+
bricks.wrapT = THREE.RepeatWrapping;
176144
bricks.repeat.set( 9, 1 );
177145

178146
return {
@@ -185,8 +153,8 @@
185153
const roughnessMaps = ( function () {
186154

187155
const bricks = textureLoader.load( '../../examples/textures/brick_roughness.jpg' );
188-
bricks.wrapT = RepeatWrapping;
189-
bricks.wrapS = RepeatWrapping;
156+
bricks.wrapT = THREE.RepeatWrapping;
157+
bricks.wrapS = THREE.RepeatWrapping;
190158
bricks.repeat.set( 9, 1 );
191159

192160
return {
@@ -208,8 +176,8 @@
208176
const alphaMaps = ( function () {
209177

210178
const fibers = textureLoader.load( '../../examples/textures/alphaMap.jpg' );
211-
fibers.wrapT = RepeatWrapping;
212-
fibers.wrapS = RepeatWrapping;
179+
fibers.wrapT = THREE.RepeatWrapping;
180+
fibers.wrapS = THREE.RepeatWrapping;
213181
fibers.repeat.set( 9, 1 );
214182

215183
return {
@@ -222,12 +190,12 @@
222190
const gradientMaps = ( function () {
223191

224192
const threeTone = textureLoader.load( '../../examples/textures/gradientMaps/threeTone.jpg' );
225-
threeTone.minFilter = NearestFilter;
226-
threeTone.magFilter = NearestFilter;
193+
threeTone.minFilter = THREE.NearestFilter;
194+
threeTone.magFilter = THREE.NearestFilter;
227195

228196
const fiveTone = textureLoader.load( '../../examples/textures/gradientMaps/fiveTone.jpg' );
229-
fiveTone.minFilter = NearestFilter;
230-
fiveTone.magFilter = NearestFilter;
197+
fiveTone.minFilter = THREE.NearestFilter;
198+
fiveTone.magFilter = THREE.NearestFilter;
231199

232200
return {
233201
none: null,
@@ -249,7 +217,7 @@
249217
const positionAttribute = geometry.attributes.position;
250218

251219
const colors = [];
252-
const color = new Color();
220+
const color = new THREE.Color();
253221

254222
for ( let i = 0, il = positionAttribute.count; i < il; i ++ ) {
255223

@@ -258,7 +226,7 @@
258226

259227
}
260228

261-
geometry.setAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
229+
geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
262230

263231
}
264232

@@ -334,7 +302,7 @@
334302

335303
const fogFolder = folder.addFolder( 'scene.fog' );
336304

337-
const fog = new Fog( 0x3f7b9d, 0, 60 );
305+
const fog = new THREE.Fog( 0x3f7b9d, 0, 60 );
338306

339307
const data = {
340308
fog: {
@@ -623,7 +591,7 @@
623591

624592
case 'MeshBasicMaterial' :
625593

626-
material = new MeshBasicMaterial( { color: 0x2194CE } );
594+
material = new THREE.MeshBasicMaterial( { color: 0x2194CE } );
627595
guiMaterial( gui, mesh, material, geometry );
628596
guiMeshBasicMaterial( gui, mesh, material, geometry );
629597

@@ -633,7 +601,7 @@
633601

634602
case 'MeshLambertMaterial' :
635603

636-
material = new MeshLambertMaterial( { color: 0x2194CE } );
604+
material = new THREE.MeshLambertMaterial( { color: 0x2194CE } );
637605
guiMaterial( gui, mesh, material, geometry );
638606
guiMeshLambertMaterial( gui, mesh, material, geometry );
639607

@@ -643,7 +611,7 @@
643611

644612
case 'MeshMatcapMaterial' :
645613

646-
material = new MeshMatcapMaterial( { matcap: matcaps.porcelainWhite } );
614+
material = new THREE.MeshMatcapMaterial( { matcap: matcaps.porcelainWhite } );
647615
guiMaterial( gui, mesh, material, geometry );
648616
guiMeshMatcapMaterial( gui, mesh, material, geometry );
649617

@@ -653,7 +621,7 @@
653621

654622
case 'MeshPhongMaterial' :
655623

656-
material = new MeshPhongMaterial( { color: 0x2194CE } );
624+
material = new THREE.MeshPhongMaterial( { color: 0x2194CE } );
657625
guiMaterial( gui, mesh, material, geometry );
658626
guiMeshPhongMaterial( gui, mesh, material, geometry );
659627

@@ -663,7 +631,7 @@
663631

664632
case 'MeshToonMaterial' :
665633

666-
material = new MeshToonMaterial( { color: 0x2194CE, gradientMap: gradientMaps.threeTone } );
634+
material = new THREE.MeshToonMaterial( { color: 0x2194CE, gradientMap: gradientMaps.threeTone } );
667635
guiMaterial( gui, mesh, material, geometry );
668636
guiMeshToonMaterial( gui, mesh, material, geometry );
669637

@@ -678,7 +646,7 @@
678646

679647
case 'MeshStandardMaterial' :
680648

681-
material = new MeshStandardMaterial( { color: 0x2194CE } );
649+
material = new THREE.MeshStandardMaterial( { color: 0x2194CE } );
682650
guiMaterial( gui, mesh, material, geometry );
683651
guiMeshStandardMaterial( gui, mesh, material, geometry );
684652

@@ -688,7 +656,7 @@
688656

689657
case 'MeshPhysicalMaterial' :
690658

691-
material = new MeshPhysicalMaterial( { color: 0x2194CE } );
659+
material = new THREE.MeshPhysicalMaterial( { color: 0x2194CE } );
692660
guiMaterial( gui, mesh, material, geometry );
693661
guiMeshPhysicalMaterial( gui, mesh, material, geometry );
694662

@@ -698,7 +666,7 @@
698666

699667
case 'MeshDepthMaterial' :
700668

701-
material = new MeshDepthMaterial();
669+
material = new THREE.MeshDepthMaterial();
702670
guiMaterial( gui, mesh, material, geometry );
703671
guiMeshDepthMaterial( gui, mesh, material, geometry );
704672

@@ -708,7 +676,7 @@
708676

709677
case 'MeshNormalMaterial' :
710678

711-
material = new MeshNormalMaterial();
679+
material = new THREE.MeshNormalMaterial();
712680
guiMaterial( gui, mesh, material, geometry );
713681
guiMeshNormalMaterial( gui, mesh, material, geometry );
714682

@@ -718,7 +686,7 @@
718686

719687
case 'LineBasicMaterial' :
720688

721-
material = new LineBasicMaterial( { color: 0x2194CE } );
689+
material = new THREE.LineBasicMaterial( { color: 0x2194CE } );
722690
guiMaterial( gui, mesh, material, geometry );
723691
guiLineBasicMaterial( gui, mesh, material, geometry );
724692

@@ -734,26 +702,26 @@
734702

735703
document.getElementById( 'newWindow' ).href += window.location.hash;
736704

737-
const gui = new GUI();
705+
const gui = new DAT.GUI();
738706

739-
const scene = new Scene();
740-
scene.background = new Color( 0x444444 );
707+
const scene = new THREE.Scene();
708+
scene.background = new THREE.Color( 0x444444 );
741709

742-
const camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 10, 50 );
710+
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 10, 50 );
743711
camera.position.z = 30;
744712

745-
const renderer = new WebGLRenderer( { antialias: true } );
713+
const renderer = new THREE.WebGLRenderer( { antialias: true } );
746714
renderer.setPixelRatio( window.devicePixelRatio );
747715
renderer.setSize( window.innerWidth, window.innerHeight );
748716
document.body.appendChild( renderer.domElement );
749717

750-
const ambientLight = new AmbientLight( 0x000000 );
718+
const ambientLight = new THREE.AmbientLight( 0x000000 );
751719
scene.add( ambientLight );
752720

753721
const lights = [];
754-
lights[ 0 ] = new PointLight( 0xffffff, 1, 0 );
755-
lights[ 1 ] = new PointLight( 0xffffff, 1, 0 );
756-
lights[ 2 ] = new PointLight( 0xffffff, 1, 0 );
722+
lights[ 0 ] = new THREE.PointLight( 0xffffff, 1, 0 );
723+
lights[ 1 ] = new THREE.PointLight( 0xffffff, 1, 0 );
724+
lights[ 2 ] = new THREE.PointLight( 0xffffff, 1, 0 );
757725

758726
lights[ 0 ].position.set( 0, 200, 0 );
759727
lights[ 1 ].position.set( 100, 200, 100 );
@@ -765,12 +733,12 @@
765733

766734
guiScene( gui, scene, camera );
767735

768-
let geometry = new TorusKnotGeometry( 10, 3, 100, 16 );
736+
let geometry = new THREE.TorusKnotGeometry( 10, 3, 100, 16 );
769737
geometry = geometry.toNonIndexed();
770738

771739
generateVertexColors( geometry );
772740

773-
const mesh = new Mesh( geometry );
741+
const mesh = new THREE.Mesh( geometry );
774742
mesh.material = chooseFromHash( gui, mesh, geometry );
775743

776744
scene.add( mesh );

0 commit comments

Comments
 (0)