Skip to content

Commit acaa0b7

Browse files
gregtatumgregtatum
committed
mrdoobapproves styling
1 parent f62d931 commit acaa0b7

File tree

2 files changed

+109
-104
lines changed

2 files changed

+109
-104
lines changed

‎docs/api/objects/SkinnedMesh.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,22 +21,22 @@ <h2>Example</h2>
2121
var geometry = new THREE.CylinderGeometry( 5, 5, 5, 5, 15, 5, 30 );
2222

2323
//Create the skin indices and skin weights
24-
for( var i=0; i < geometry.vertices.length; i++ ) {
24+
for ( var i = 0; i < geometry.vertices.length; i ++ ) {
2525

2626
// Imaginary functions to calculate the indices and weights
2727
var skinIndex = calculateSkinIndex( geometry.vertices, i );
2828
var skinWeight = calculateSkinWeight( geometry.vertices, i );
2929

3030
// Ease between each bone
31-
geometry.skinIndices.push( new THREE.Vector4( skinIndex, skinIndex+1, 0, 0 ) );
32-
geometry.skinWeights.push( new THREE.Vector4( 1-skinWeight, skinWeight, 0, 0 ) );
31+
geometry.skinIndices.push( new THREE.Vector4( skinIndex, skinIndex + 1, 0, 0 ) );
32+
geometry.skinWeights.push( new THREE.Vector4( 1 - skinWeight, skinWeight, 0, 0 ) );
3333

3434
}
3535

3636
var mesh = THREE.SkinnedMesh( geometry, material );
3737

3838
// See example from THREE.Skeleton for the armSkeleton
39-
var rootBone = armSkeleton.bones[0];
39+
var rootBone = armSkeleton.bones[ 0 ];
4040
mesh.add( rootBone );
4141

4242
// Bind the skeleton to the mesh
@@ -46,8 +46,8 @@ <h2>Example</h2>
4646
armSkeleton.calculateInverses();
4747

4848
// Move the bones and manipulate the model
49-
armSkeleton.bones[0].rotation.x = -0.1;
50-
armSkeleton.bones[1].rotation.x = 0.2;
49+
armSkeleton.bones[ 0 ].rotation.x = -0.1;
50+
armSkeleton.bones[ 1 ].rotation.x = 0.2;
5151
</code>
5252

5353

‎docs/scenes/bones-browser.html‎

Lines changed: 103 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -39,59 +39,62 @@
3939
<script src="../../examples/js/controls/OrbitControls.js"></script>
4040

4141
<script>
42-
42+
4343
var gui, scene, camera, renderer, orbit, ambientLight, lights, mesh, bones, skeletonHelper;
44-
44+
4545
var state = {
46+
4647
animateBones : false
48+
4749
};
48-
50+
4951
function initScene () {
50-
52+
5153
gui = new dat.GUI();
5254
scene = new THREE.Scene();
53-
camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 200 );
55+
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 200 );
5456
camera.position.z = 30;
5557
camera.position.y = 30;
56-
57-
renderer = new THREE.WebGLRenderer({antialias: true});
58+
59+
renderer = new THREE.WebGLRenderer( { antialias: true } );
5860
renderer.setSize( window.innerWidth, window.innerHeight );
5961
document.body.appendChild( renderer.domElement );
60-
62+
6163
orbit = new THREE.OrbitControls( camera, renderer.domElement );
6264
orbit.noZoom = true;
6365

6466
ambientLight = new THREE.AmbientLight( 0x000000 );
6567
scene.add( ambientLight );
6668

6769
lights = [];
68-
lights[0] = new THREE.PointLight( 0xffffff, 1, 0 );
69-
lights[1] = new THREE.PointLight( 0xffffff, 1, 0 );
70-
lights[2] = new THREE.PointLight( 0xffffff, 1, 0 );
71-
72-
lights[0].position.set( 0, 200, 0 );
73-
lights[1].position.set( 100, 200, 100 );
74-
lights[2].position.set( -100, -200, -100 );
70+
lights[ 0 ] = new THREE.PointLight( 0xffffff, 1, 0 );
71+
lights[ 1 ] = new THREE.PointLight( 0xffffff, 1, 0 );
72+
lights[ 2 ] = new THREE.PointLight( 0xffffff, 1, 0 );
73+
74+
lights[ 0 ].position.set( 0, 200, 0 );
75+
lights[ 1 ].position.set( 100, 200, 100 );
76+
lights[ 2 ].position.set( -100, -200, -100 );
77+
78+
scene.add( lights[ 0 ] );
79+
scene.add( lights[ 1 ] );
80+
scene.add( lights[ 2 ] );
7581

76-
scene.add( lights[0] );
77-
scene.add( lights[1] );
78-
scene.add( lights[2] );
79-
8082
window.addEventListener( 'resize', function () {
81-
83+
8284
camera.aspect = window.innerWidth / window.innerHeight;
8385
camera.updateProjectionMatrix();
8486

8587
renderer.setSize( window.innerWidth, window.innerHeight );
86-
88+
8789
}, false );
88-
90+
8991
initBones();
9092
setupDatGui();
93+
9194
}
9295

9396
function createGeometry ( sizing ) {
94-
97+
9598
var geometry = new THREE.CylinderGeometry(
9699
5, // radiusTop
97100
5, // radiusBottom
@@ -100,165 +103,167 @@
100103
sizing.segmentCount * 3, // heightSegments
101104
true // openEnded
102105
);
103-
104-
for( var i=0; i < geometry.vertices.length; i++ ) {
105-
106-
var vertex = geometry.vertices[i];
107-
var y = (vertex.y + sizing.halfHeight);
108-
106+
107+
for ( var i = 0; i < geometry.vertices.length; i ++ ) {
108+
109+
var vertex = geometry.vertices[ i ];
110+
var y = ( vertex.y + sizing.halfHeight );
111+
109112
var skinIndex = Math.floor( y / sizing.segmentHeight );
110-
var skinWeight = (y % sizing.segmentHeight) / sizing.segmentHeight;
111-
112-
geometry.skinIndices.push( new THREE.Vector4( skinIndex, skinIndex+1, 0, 0 ) );
113-
geometry.skinWeights.push( new THREE.Vector4( 1-skinWeight, skinWeight, 0, 0 ) );
114-
113+
var skinWeight = ( y % sizing.segmentHeight ) / sizing.segmentHeight;
114+
115+
geometry.skinIndices.push( new THREE.Vector4( skinIndex, skinIndex + 1, 0, 0 ) );
116+
geometry.skinWeights.push( new THREE.Vector4( 1 - skinWeight, skinWeight, 0, 0 ) );
117+
115118
}
116-
119+
117120
return geometry;
121+
118122
};
119-
123+
120124
function createBones ( sizing ) {
121-
125+
122126
bones = [];
123-
127+
124128
var prevBone = new THREE.Bone();
125129
bones.push( prevBone );
126130
prevBone.position.y = -sizing.halfHeight;
127-
128-
for( var i=0; i < sizing.segmentCount; i++ ) {
129-
131+
132+
for ( var i = 0; i < sizing.segmentCount; i ++ ) {
133+
130134
var bone = new THREE.Bone();
131135
bone.position.y = sizing.segmentHeight;
132136
bones.push( bone );
133137
prevBone.add( bone );
134138
prevBone = bone;
135-
139+
136140
}
137-
141+
138142
return bones;
143+
139144
};
140145

141146
function createMesh ( geometry, bones ) {
142-
143-
var material = new THREE.MeshPhongMaterial({
147+
148+
var material = new THREE.MeshPhongMaterial( {
144149
skinning : true,
145150
color: 0x156289,
146151
emissive: 0x072534,
147152
side: THREE.DoubleSide,
148153
shading: THREE.FlatShading
149-
});
150-
154+
} );
155+
151156
var mesh = new THREE.SkinnedMesh( geometry, material );
152157
var skeleton = new THREE.Skeleton( bones );
153-
154-
mesh.add( bones[0] );
155-
158+
159+
mesh.add( bones[ 0 ] );
160+
156161
mesh.bind( skeleton );
157162
skeleton.calculateInverses();
158-
163+
159164
skeletonHelper = new THREE.SkeletonHelper( mesh );
160165
skeletonHelper.material.linewidth = 2;
161166
scene.add( skeletonHelper );
162-
167+
163168
return mesh;
164-
169+
165170
};
166-
171+
167172
function setupDatGui () {
168-
173+
169174
var folder = gui.addFolder( "General Options" );
170-
175+
171176
folder.add( state, "animateBones" );
172-
folder.__controllers[0].name("Animate Bones");
177+
folder.__controllers[ 0 ].name( "Animate Bones" );
173178

174179
folder.add( mesh, "pose" );
175-
folder.__controllers[1].name(".pose()");
176-
180+
folder.__controllers[ 1 ].name( ".pose()" );
181+
177182
var bones = mesh.skeleton.bones;
178-
179-
for( var i=0; i < bones.length; i++ ) {
180-
181-
var bone = bones[i];
182-
183+
184+
for ( var i = 0; i < bones.length; i ++ ) {
185+
186+
var bone = bones[ i ];
187+
183188
folder = gui.addFolder( "Bone " + i );
184-
189+
185190
folder.add( bone.position, 'x', -10 + bone.position.x, 10 + bone.position.x );
186191
folder.add( bone.position, 'y', -10 + bone.position.y, 10 + bone.position.y );
187192
folder.add( bone.position, 'z', -10 + bone.position.z, 10 + bone.position.z );
188193

189194
folder.add( bone.rotation, 'x', -Math.PI * 0.5, Math.PI * 0.5 );
190195
folder.add( bone.rotation, 'y', -Math.PI * 0.5, Math.PI * 0.5 );
191196
folder.add( bone.rotation, 'z', -Math.PI * 0.5, Math.PI * 0.5 );
192-
197+
193198
folder.add( bone.scale, 'x', 0, 2 );
194199
folder.add( bone.scale, 'y', 0, 2 );
195200
folder.add( bone.scale, 'z', 0, 2 );
196201

197-
folder.__controllers[0].name("position.x");
198-
folder.__controllers[1].name("position.y");
199-
folder.__controllers[2].name("position.z");
200-
201-
folder.__controllers[3].name("rotation.x");
202-
folder.__controllers[4].name("rotation.y");
203-
folder.__controllers[5].name("rotation.z");
204-
205-
folder.__controllers[6].name("scale.x");
206-
folder.__controllers[7].name("scale.y");
207-
folder.__controllers[8].name("scale.z");
208-
202+
folder.__controllers[ 0 ].name( "position.x" );
203+
folder.__controllers[ 1 ].name( "position.y" );
204+
folder.__controllers[ 2 ].name( "position.z" );
205+
206+
folder.__controllers[ 3 ].name( "rotation.x" );
207+
folder.__controllers[ 4 ].name( "rotation.y" );
208+
folder.__controllers[ 5 ].name( "rotation.z" );
209+
210+
folder.__controllers[ 6 ].name( "scale.x" );
211+
folder.__controllers[ 7 ].name( "scale.y" );
212+
folder.__controllers[ 8 ].name( "scale.z" );
213+
209214
}
210-
215+
211216
}
212217

213218
function initBones () {
214-
219+
215220
var segmentHeight = 8;
216221
var segmentCount = 4;
217222
var height = segmentHeight * segmentCount;
218223
var halfHeight = height * 0.5;
219-
224+
220225
var sizing = {
221226
segmentHeight : segmentHeight,
222227
segmentCount : segmentCount,
223228
height : height,
224229
halfHeight : halfHeight
225230
};
226-
231+
227232
var geometry = createGeometry( sizing );
228233
var bones = createBones( sizing );
229234
mesh = createMesh( geometry, bones );
230-
235+
231236
mesh.scale.multiplyScalar( 1 );
232237
scene.add( mesh );
233-
238+
234239
};
235-
240+
236241
function render () {
237-
242+
238243
requestAnimationFrame( render );
239244

240245
var time = Date.now() * 0.001;
241-
246+
242247
var bone = mesh;
243248

244-
249+
245250
//Wiggle the bones
246-
if( state.animateBones ) {
247-
248-
for( var i=0; i < mesh.skeleton.bones.length; i++ ) {
249-
250-
mesh.skeleton.bones[i].rotation.z = Math.sin( time ) * 2 / mesh.skeleton.bones.length;
251-
251+
if ( state.animateBones ) {
252+
253+
for ( var i = 0; i < mesh.skeleton.bones.length; i ++ ) {
254+
255+
mesh.skeleton.bones[ i ].rotation.z = Math.sin( time ) * 2 / mesh.skeleton.bones.length;
256+
252257
}
253-
258+
254259
}
255260

256261
skeletonHelper.update();
257-
262+
258263
renderer.render( scene, camera );
259-
264+
260265
};
261-
266+
262267
initScene();
263268
render();
264269

0 commit comments

Comments
 (0)