Skip to content

Commit e23cd92

Browse files
mrdoobmrdoob
committed
Clean up.
1 parent 7512205 commit e23cd92

File tree

1 file changed

+130
-130
lines changed

1 file changed

+130
-130
lines changed

‎examples/webgl_materials_nodes_playground.html‎

Lines changed: 130 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -7,180 +7,180 @@
77
<link rel="stylesheet" href="fonts/open-sans/open-sans.css" type="text/css"/>
88
<link rel="stylesheet" href="fonts/tabler-icons/tabler-icons.min.css" type="text/css"/>
99
<link type="text/css" rel="stylesheet" href="main.css">
10+
<style>
11+
body {
12+
overflow: hidden;
13+
width: 100%;
14+
height: 100%;
15+
}
16+
.renderer {
17+
position: absolute;
18+
top: 0;
19+
left: 0;
20+
height: 50%;
21+
width: 100%;
22+
}
23+
flow {
24+
position: absolute;
25+
top: 50%;
26+
left: 0;
27+
height: 50%;
28+
width: 100%;
29+
background: #222;
30+
box-shadow: inset 0 0 20px 0px #000000;
31+
}
32+
</style>
1033
</head>
1134
<body>
12-
<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
13-
<script type="importmap">
14-
{
15-
"imports": {
16-
"three": "../build/three.module.js"
17-
}
18-
}
19-
</script>
20-
<style>
21-
body {
22-
overflow: hidden;
23-
width: 100%;
24-
height: 100%;
25-
}
26-
.renderer {
27-
position: absolute;
28-
top: 0;
29-
left: 0;
30-
height: 50%;
31-
width: 100%;
32-
}
33-
flow {
34-
position: absolute;
35-
top: 50%;
36-
left: 0;
37-
height: 50%;
38-
width: 100%;
39-
background: #222;
40-
box-shadow: inset 0 0 20px 0px #000000;
41-
}
42-
</style>
43-
<script type="module">
44-
45-
import * as THREE from 'three';
46-
47-
import { nodeFrame } from './jsm/renderers/webgl/nodes/WebGLNodes.js';
48-
49-
import { NodeEditor } from './jsm/node-editor/NodeEditor.js';
50-
import { StandardMaterialEditor } from './jsm/node-editor/materials/StandardMaterialEditor.js';
51-
52-
import Stats from './jsm/libs/stats.module.js';
53-
54-
import { OrbitControls } from './jsm/controls/OrbitControls.js';
55-
import { FBXLoader } from './jsm/loaders/FBXLoader.js';
56-
57-
let stats;
58-
let camera, scene, renderer;
59-
let model;
60-
61-
init();
62-
animate();
63-
64-
function init() {
65-
66-
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 5000 );
67-
camera.position.set( 0.0, 300, 400 * 3 );
68-
69-
scene = new THREE.Scene();
70-
scene.background = new THREE.Color( 0x333333 );
71-
72-
// Lights
73-
74-
const topLight = new THREE.PointLight( 0xF4F6F0, 1 );
75-
topLight.position.set( 0, 100000, 100000 );
76-
scene.add( topLight );
77-
78-
const backLight = new THREE.PointLight( 0x0c1445, 1.4 );
79-
backLight.position.set( - 100, 20, - 260 );
80-
scene.add( backLight );
81-
82-
renderer = new THREE.WebGLRenderer( { antialias: true } );
83-
document.body.appendChild( renderer.domElement );
84-
renderer.outputEncoding = THREE.sRGBEncoding;
85-
86-
renderer.domElement.className = 'renderer';
35+
<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
36+
<script type="importmap">
37+
{
38+
"imports": {
39+
"three": "../build/three.module.js"
40+
}
41+
}
42+
</script>
43+
<script type="module">
8744

88-
//
45+
import * as THREE from 'three';
46+
47+
import { nodeFrame } from './jsm/renderers/webgl/nodes/WebGLNodes.js';
48+
49+
import { NodeEditor } from './jsm/node-editor/NodeEditor.js';
50+
import { StandardMaterialEditor } from './jsm/node-editor/materials/StandardMaterialEditor.js';
51+
52+
import Stats from './jsm/libs/stats.module.js';
53+
54+
import { OrbitControls } from './jsm/controls/OrbitControls.js';
55+
import { FBXLoader } from './jsm/loaders/FBXLoader.js';
56+
57+
let stats;
58+
let camera, scene, renderer;
59+
let model;
60+
61+
init();
62+
animate();
63+
64+
function init() {
65+
66+
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 5000 );
67+
camera.position.set( 0.0, 300, 400 * 3 );
8968

90-
stats = new Stats();
91-
document.body.appendChild( stats.dom );
69+
scene = new THREE.Scene();
70+
scene.background = new THREE.Color( 0x333333 );
9271

93-
const controls = new OrbitControls( camera, renderer.domElement );
94-
controls.minDistance = 500;
95-
controls.maxDistance = 3000;
72+
// Lights
9673

97-
window.addEventListener( 'resize', onWindowResize );
74+
const topLight = new THREE.PointLight( 0xF4F6F0, 1 );
75+
topLight.position.set( 0, 100000, 100000 );
76+
scene.add( topLight );
9877

99-
onWindowResize();
78+
const backLight = new THREE.PointLight( 0x0c1445, 1.4 );
79+
backLight.position.set( - 100, 20, - 260 );
80+
scene.add( backLight );
10081

101-
initEditor();
82+
renderer = new THREE.WebGLRenderer( { antialias: true } );
83+
document.body.appendChild( renderer.domElement );
84+
renderer.outputEncoding = THREE.sRGBEncoding;
10285

103-
}
86+
renderer.domElement.className = 'renderer';
10487

105-
function initEditor() {
88+
//
10689

107-
const nodeEditor = new NodeEditor();
90+
stats = new Stats();
91+
document.body.appendChild( stats.dom );
10892

109-
nodeEditor.addEventListener( 'new', () => {
93+
const controls = new OrbitControls( camera, renderer.domElement );
94+
controls.minDistance = 500;
95+
controls.maxDistance = 3000;
11096

111-
const materialEditor = new StandardMaterialEditor();
112-
materialEditor.setPosition( ( window.innerWidth / 2 ) - 150, 100 );
97+
window.addEventListener( 'resize', onWindowResize );
11398

114-
nodeEditor.add( materialEditor );
99+
onWindowResize();
115100

116-
model.material = materialEditor.material;
101+
initEditor();
117102

118-
} );
103+
}
119104

120-
nodeEditor.addEventListener( 'load', () => {
105+
function initEditor() {
121106

122-
const materialEditor = nodeEditor.nodes[ 0 ];
123-
materialEditor.update(); // need move to deserialization
107+
const nodeEditor = new NodeEditor();
124108

125-
model.material = materialEditor.material;
109+
nodeEditor.addEventListener( 'new', () => {
126110

127-
} );
111+
const materialEditor = new StandardMaterialEditor();
112+
materialEditor.setPosition( ( window.innerWidth / 2 ) - 150, 100 );
128113

129-
document.body.appendChild( nodeEditor.domElement );
114+
nodeEditor.add( materialEditor );
130115

131-
const loaderFBX = new FBXLoader();
132-
loaderFBX.load( 'models/fbx/stanford-bunny.fbx', ( object ) => {
116+
model.material = materialEditor.material;
133117

134-
const materialEditor = new StandardMaterialEditor();
135-
materialEditor.setPosition( ( window.innerWidth / 2 ) - 150, 100 ); // canvas position
118+
} );
136119

137-
nodeEditor.add( materialEditor );
120+
nodeEditor.addEventListener( 'load', () => {
138121

139-
model = object.children[ 0 ];
140-
model.position.set( 0, 0, 10 );
141-
model.scale.setScalar( 1 );
142-
model.material = materialEditor.material;
143-
scene.add( model );
122+
const materialEditor = nodeEditor.nodes[ 0 ];
123+
materialEditor.update(); // need move to deserialization
144124

145-
} );
125+
model.material = materialEditor.material;
146126

147-
}
127+
} );
148128

149-
function onWindowResize() {
129+
document.body.appendChild( nodeEditor.domElement );
150130

151-
const width = window.innerWidth;
152-
const height = window.innerHeight / 2;
131+
const loaderFBX = new FBXLoader();
132+
loaderFBX.load( 'models/fbx/stanford-bunny.fbx', ( object ) => {
153133

154-
camera.aspect = width / height;
155-
camera.updateProjectionMatrix();
134+
const materialEditor = new StandardMaterialEditor();
135+
materialEditor.setPosition( ( window.innerWidth / 2 ) - 150, 100 ); // canvas position
156136

157-
renderer.setSize( width, height );
137+
nodeEditor.add( materialEditor );
158138

159-
}
139+
model = object.children[ 0 ];
140+
model.position.set( 0, 0, 10 );
141+
model.scale.setScalar( 1 );
142+
model.material = materialEditor.material;
143+
scene.add( model );
160144

161-
//
145+
} );
146+
147+
}
148+
149+
function onWindowResize() {
150+
151+
const width = window.innerWidth;
152+
const height = window.innerHeight / 2;
153+
154+
camera.aspect = width / height;
155+
camera.updateProjectionMatrix();
156+
157+
renderer.setSize( width, height );
158+
159+
}
160+
161+
//
162162

163-
function animate() {
163+
function animate() {
164164

165-
requestAnimationFrame( animate );
165+
requestAnimationFrame( animate );
166166

167-
nodeFrame.update();
167+
nodeFrame.update();
168168

169-
render();
169+
render();
170170

171-
stats.update();
171+
stats.update();
172172

173-
}
173+
}
174174

175-
function render() {
175+
function render() {
176176

177-
//if ( model ) model.rotation.y = performance.now() / 5000;
177+
//if ( model ) model.rotation.y = performance.now() / 5000;
178178

179-
renderer.render( scene, camera );
179+
renderer.render( scene, camera );
180180

181-
}
181+
}
182182

183-
</script>
183+
</script>
184184

185185
</body>
186186
</html>

0 commit comments

Comments
 (0)