Skip to content

Commit 74ed483

Browse files
mrdoobmrdoob
committed
Improved examples.
1 parent 52df393 commit 74ed483

File tree

3 files changed

+85
-89
lines changed

3 files changed

+85
-89
lines changed

‎examples/webgl_materials_bumpmap.html

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -97,12 +97,10 @@
9797

9898
spotLight = new THREE.SpotLight( 0xffffbb, 2 );
9999
spotLight.position.set( 0.5, 0, 1 );
100-
scene.add( spotLight );
101-
102100
spotLight.position.multiplyScalar( 700 );
101+
scene.add( spotLight );
103102

104103
spotLight.castShadow = true;
105-
spotLight.onlyShadow = true;
106104
// spotLight.shadowCameraVisible = true;
107105

108106
spotLight.shadowMapWidth = 2048;

‎examples/webgl_materials_bumpmap_skin.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@
108108
scene.add( new THREE.AmbientLight( 0x333344 ) );
109109

110110
directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
111-
directionalLight.position.set( 500, - 250, 500 );
111+
directionalLight.position.set( 500, 0, 500 );
112112

113113
directionalLight.castShadow = true;
114114
//directionalLight.shadowCameraVisible = true;

‎examples/webgl_octree.html

Lines changed: 83 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,12 @@
1919
<script type="text/javascript" src="js/Octree.js"></script>
2020
<script>
2121

22-
var camera,
23-
scene,
22+
var camera,
23+
scene,
2424
renderer,
2525
octree,
26-
geometry,
27-
material,
26+
geometry,
27+
material,
2828
mesh,
2929
meshes = [],
3030
meshesSearch = [],
@@ -34,8 +34,8 @@
3434
radiusMaxHalf = radiusMax * 0.5,
3535
radiusSearch = 400,
3636
searchMesh,
37-
baseR = 255, baseG = 0, baseB = 255,
38-
foundR = 0, foundG = 255, foundB = 0,
37+
base = new THREE.Color( 0xff00ff ),
38+
found = new THREE.Color( 0x00ff00 ),
3939
adding = true,
4040
rayCaster = new THREE.Raycaster(),
4141
origin = new THREE.Vector3(),
@@ -45,7 +45,7 @@
4545
animate();
4646

4747
function init() {
48-
48+
4949
// standard three scene, camera, renderer
5050

5151
scene = new THREE.Scene();
@@ -58,9 +58,9 @@
5858
renderer.setPixelRatio( window.devicePixelRatio );
5959
renderer.setSize( window.innerWidth, window.innerHeight );
6060
document.body.appendChild( renderer.domElement );
61-
61+
6262
// create octree
63-
63+
6464
octree = new THREE.Octree( {
6565
// when undeferred = true, objects are inserted immediately
6666
// instead of being deferred until next octree.update() call
@@ -76,17 +76,17 @@
7676
// pass the scene to visualize the octree
7777
scene: scene
7878
} );
79-
79+
8080
// create object to show search radius and add to scene
81-
81+
8282
searchMesh = new THREE.Mesh(
8383
new THREE.SphereGeometry( radiusSearch ),
8484
new THREE.MeshBasicMaterial( { color: 0x00FF00, transparent: true, opacity: 0.4 } )
8585
);
8686
scene.add( searchMesh );
87-
87+
8888
// info
89-
89+
9090
var info = document.createElement( 'div' );
9191
info.style.position = 'absolute';
9292
info.style.top = '0';
@@ -103,168 +103,166 @@
103103

104104
// note: three.js includes requestAnimationFrame shim
105105
requestAnimationFrame( animate );
106-
106+
107107
// modify octree structure by adding/removing objects
108-
108+
109109
modifyOctree();
110-
110+
111111
// search octree at random location
112-
112+
113113
searchOctree();
114-
114+
115115
// render results
116-
116+
117117
render();
118-
118+
119119
// update octree to add deferred objects
120-
120+
121121
octree.update();
122122

123123
}
124-
124+
125+
var geometry = new THREE.BoxGeometry( 50, 50, 50 );
126+
125127
function modifyOctree() {
126-
128+
127129
// if is adding objects to octree
128-
130+
129131
if ( adding === true ) {
130-
132+
131133
// create new object
132-
133-
geometry = new THREE.BoxGeometry( 50, 50, 50 );
134-
material = new THREE.MeshBasicMaterial();
135-
material.color.setRGB( baseR, baseG, baseB );
136-
137-
mesh = new THREE.Mesh( geometry, material );
138-
134+
135+
mesh = new THREE.Line( geometry, new THREE.MeshBasicMaterial( { color: new THREE.Color( base ) } ) );
136+
139137
// give new object a random position in radius
140-
138+
141139
mesh.position.set(
142140
Math.random() * radiusMax - radiusMaxHalf,
143141
Math.random() * radiusMax - radiusMaxHalf,
144142
Math.random() * radiusMax - radiusMaxHalf
145143
);
146-
144+
147145
// add new object to octree and scene
148-
146+
149147
octree.add( mesh );
150148
scene.add( mesh );
151-
149+
152150
// store object for later
153-
151+
154152
meshes.push( mesh );
155-
153+
156154
// if at max, stop adding
157-
155+
158156
if ( meshes.length === meshCountMax ) {
159-
157+
160158
adding = false;
161-
159+
162160
}
163-
161+
164162
}
165163
// else remove objects from octree
166164
else {
167-
165+
168166
// get object
169-
167+
170168
mesh = meshes.shift();
171-
169+
172170
// remove from scene and octree
173-
171+
174172
scene.remove( mesh );
175173
octree.remove( mesh );
176-
174+
177175
// if no more objects, start adding
178-
176+
179177
if ( meshes.length === 0 ) {
180-
178+
181179
adding = true;
182-
180+
183181
}
184-
182+
185183
}
186-
184+
187185
/*
188-
186+
189187
// octree details to console
190-
188+
191189
console.log( ' OCTREE: ', octree );
192190
console.log( ' ... depth ', octree.depth, ' vs depth end?', octree.depth_end() );
193191
console.log( ' ... num nodes: ', octree.node_count_end() );
194192
console.log( ' ... total objects: ', octree.object_count_end(), ' vs tree objects length: ', octree.objects.length );
195-
193+
196194
// print full octree structure to console
197-
195+
198196
octree.to_console();
199-
197+
200198
*/
201-
199+
202200
}
203-
201+
204202
function searchOctree() {
205-
203+
206204
var i, il;
207-
205+
208206
// revert previous search objects to base color
209-
207+
210208
for ( i = 0, il = meshesSearch.length; i < il; i++ ) {
211-
212-
meshesSearch[ i ].object.material.color.setRGB( baseR, baseG, baseB );
213-
209+
210+
meshesSearch[ i ].object.material.color.copy( base );
211+
214212
}
215-
213+
216214
// new search position
217215
searchMesh.position.set(
218216
Math.random() * radiusMax - radiusMaxHalf,
219217
Math.random() * radiusMax - radiusMaxHalf,
220218
Math.random() * radiusMax - radiusMaxHalf
221219
);
222-
220+
223221
// record start time
224-
222+
225223
var timeStart = Date.now();
226-
224+
227225
// search octree from search mesh position with search radius
228226
// optional third parameter: boolean, if should sort results by object when using faces in octree
229227
// optional fourth parameter: vector3, direction of search when using ray (assumes radius is distance/far of ray)
230-
228+
231229
origin.copy( searchMesh.position );
232230
direction.set( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 ).normalize();
233231
rayCaster.set( origin, direction );
234232
meshesSearch = octree.search( rayCaster.ray.origin, radiusSearch, true, rayCaster.ray.direction );
235233
var intersections = rayCaster.intersectOctreeObjects( meshesSearch );
236-
234+
237235
// record end time
238-
236+
239237
var timeEnd = Date.now();
240-
238+
241239
// set color of all meshes found in search
242-
240+
243241
for ( i = 0, il = meshesSearch.length; i < il; i++ ) {
244-
245-
meshesSearch[ i ].object.material.color.setRGB( foundR, foundG, foundB );
246-
242+
243+
meshesSearch[ i ].object.material.color.copy( found );
244+
247245
}
248-
246+
249247
/*
250-
248+
251249
// results to console
252-
250+
253251
console.log( 'OCTREE: ', octree );
254252
console.log( '... searched ', meshes.length, ' and found ', meshesSearch.length, ' with intersections ', intersections.length, ' and took ', ( timeEnd - timeStart ), ' ms ' );
255-
253+
256254
*/
257-
255+
258256
}
259-
257+
260258
function render() {
261-
259+
262260
var timer = - Date.now() / 5000;
263261

264262
camera.position.x = Math.cos( timer ) * 10000;
265263
camera.position.z = Math.sin( timer ) * 10000;
266264
camera.lookAt( scene.position );
267-
265+
268266
renderer.render( scene, camera );
269267

270268
}

0 commit comments

Comments
 (0)