Skip to content

Commit f6e0053

Browse files
mrdoobmrdoob
authored
Merge pull request #11109 from Mugen87/dev
Examples: Simplify webgl_loader_json_blender
2 parents 86b0787 + 49a3cf6 commit f6e0053

File tree

1 file changed

+37
-84
lines changed

1 file changed

+37
-84
lines changed

‎examples/webgl_loader_json_blender.html

Lines changed: 37 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,43 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<title>three.js webgl - collada - blender</title>
4+
<title>three.js webgl - blender -json</title>
55
<meta charset="utf-8">
66
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
77
<style>
88
body {
9-
font-family: Monospace;
10-
background-color: #000000;
11-
margin: 0px;
12-
overflow: hidden;
9+
background:#777;
10+
padding:0;
11+
margin:0;
12+
font-weight: bold;
13+
overflow:hidden;
1314
}
1415

1516
#info {
16-
color: #fff;
1717
position: absolute;
18-
top: 10px;
18+
top: 0px;
1919
width: 100%;
20-
text-align: center;
21-
z-index: 100;
22-
display:block;
23-
20+
color: #ffffff;
21+
padding: 5px;
22+
font-family:Monospace;
23+
font-size:13px;
24+
text-align:center;
2425
}
2526

26-
a { color: red }
27+
a {
28+
color: #ffffff;
29+
}
2730
</style>
2831
</head>
29-
3032
<body>
33+
34+
<div id="container"></div>
3135
<div id="info">
32-
<a href="http://threejs.org" target="_blank">three.js</a> -
36+
<a href="https://threejs.org" target="_blank">three.js</a> -
3337
monster by <a href="http://www.3drt.com/downloads.htm" target="_blank">3drt</a>
3438
</div>
3539

3640
<script src="../build/three.js"></script>
37-
<script src="js/loaders/collada/Animation.js"></script>
38-
<script src="js/loaders/collada/AnimationHandler.js"></script>
39-
<script src="js/loaders/collada/KeyFrameAnimation.js"></script>
40-
41-
<script src="js/loaders/ColladaLoader.js"></script>
4241

4342
<script src="js/Detector.js"></script>
4443
<script src="js/libs/stats.min.js"></script>
@@ -47,56 +46,24 @@
4746

4847
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
4948

50-
var container, stats;
51-
49+
var container, stats, clock, mixer;
5250
var camera, scene, renderer, objects;
53-
var particleLight, pointLight;
54-
var dae;
55-
56-
var clock = new THREE.Clock();
57-
var mixer;
58-
59-
// Collada model
60-
61-
var loader = new THREE.ColladaLoader();
62-
loader.options.convertUpAxis = true;
63-
loader.load( 'models/collada/monster/monster.dae', function ( collada ) {
64-
65-
dae = collada.scene;
66-
67-
dae.traverse( function ( child ) {
68-
69-
if ( child instanceof THREE.SkinnedMesh ) {
70-
71-
var animation = new THREE.Animation( child, child.geometry.animation );
72-
animation.play();
73-
74-
}
75-
76-
} );
77-
78-
dae.scale.x = dae.scale.y = dae.scale.z = 0.002;
79-
dae.position.x = -1;
80-
dae.updateMatrix();
81-
82-
init();
83-
animate();
8451

85-
} );
52+
init();
53+
animate();
8654

8755
function init() {
8856

89-
container = document.createElement( 'div' );
90-
document.body.appendChild( container );
57+
container = document.getElementById( 'container' );
9158

9259
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 2000 );
9360
camera.position.set( 2, 4, 5 );
9461

62+
clock = new THREE.Clock();
63+
9564
scene = new THREE.Scene();
9665
scene.fog = new THREE.FogExp2( 0x000000, 0.035 );
9766

98-
// Add Blender exported Collada model
99-
10067
mixer = new THREE.AnimationMixer( scene );
10168

10269
var loader = new THREE.JSONLoader();
@@ -110,29 +77,26 @@
11077

11178
for ( var i = 0; i < 729; i ++ ) {
11279

80+
mesh = new THREE.Mesh( geometry, materials );
81+
11382
// random placement in a grid
11483

11584
var x = ( ( i % 27 ) - 13.5 ) * 2 + THREE.Math.randFloatSpread( 1 );
11685
var z = ( Math.floor( i / 27 ) - 13.5 ) * 2 + THREE.Math.randFloatSpread( 1 );
11786

118-
// leave space for big monster
119-
120-
if ( Math.abs( x ) < 2 && Math.abs( z ) < 2 ) continue;
121-
122-
mesh = new THREE.Mesh( geometry, materials );
87+
mesh.position.set( x, 0, z );
12388

12489
var s = THREE.Math.randFloat( 0.00075, 0.001 );
12590
mesh.scale.set( s, s, s );
12691

127-
mesh.position.set( x, 0, z );
12892
mesh.rotation.y = THREE.Math.randFloat( -0.25, 0.25 );
12993

13094
mesh.matrixAutoUpdate = false;
13195
mesh.updateMatrix();
13296

13397
scene.add( mesh );
13498

135-
mixer.clipAction( geometry.animations[0], mesh )
99+
mixer.clipAction( geometry.animations[ 0 ], mesh )
136100
.setDuration( 1 ) // one second
137101
.startAt( - Math.random() ) // random phase (already running)
138102
.play(); // let's go
@@ -141,32 +105,28 @@
141105

142106
} );
143107

108+
// lights
144109

145-
// Add the COLLADA
110+
var ambientLight = new THREE.AmbientLight( 0xcccccc );
111+
scene.add( ambientLight );
146112

147-
scene.add( dae );
148-
149-
// Lights
150-
151-
scene.add( new THREE.AmbientLight( 0xcccccc ) );
152-
153-
pointLight = new THREE.PointLight( 0xff4400, 5, 30 );
113+
var pointLight = new THREE.PointLight( 0xff4400, 5, 30 );
154114
pointLight.position.set( 5, 0, 0 );
155115
scene.add( pointLight );
156116

157-
// Renderer
117+
// renderer
158118

159119
renderer = new THREE.WebGLRenderer();
160120
renderer.setPixelRatio( window.devicePixelRatio );
161121
renderer.setSize( window.innerWidth, window.innerHeight );
162122
container.appendChild( renderer.domElement );
163123

164-
// Stats
124+
// stats
165125

166126
stats = new Stats();
167127
container.appendChild( stats.dom );
168128

169-
// Events
129+
// events
170130

171131
window.addEventListener( 'resize', onWindowResize, false );
172132

@@ -189,15 +149,6 @@
189149

190150
requestAnimationFrame( animate );
191151

192-
var delta = clock.getDelta();
193-
194-
// animate Collada model
195-
196-
THREE.AnimationHandler.update( delta );
197-
198-
mixer.update( delta );
199-
200-
201152
render();
202153
stats.update();
203154

@@ -211,6 +162,8 @@
211162
camera.position.y = 4;
212163
camera.position.z = Math.sin( timer ) * 10;
213164

165+
mixer.update( clock.getDelta() );
166+
214167
camera.lookAt( scene.position );
215168

216169
renderer.render( scene, camera );

0 commit comments

Comments
 (0)