How to use the SkinnedMesh function from three
Find comprehensive JavaScript three.SkinnedMesh code examples handpicked from public code repositorys.
three.SkinnedMesh is a class in the Three.js library that represents a mesh with smooth skinning, allowing it to animate and deform realistically.
171 172 173 174 175 176 177 178 179 180```javascript loader.load('./models/skinned/simple/simple.js', function (geometry, materials) { for (var k in materials) { materials[k].skinning = true; } playerFactory = new THREE.SkinnedMesh(geometry, new THREE.MultiMaterial(materials)); playerFactory.scale.set(2.5, 2.5, 2.5); playerFactory.position.set(0, 15, 0); playerFactory.skeleton.useVertexTexture = false; mixer = new THREE.AnimationMixer(playerFactory);
16
20
3
20 21 22 23 24 25 26 27 28 29} }); THREE.SkinnedMesh.call(scope, scope.skinnedMesh.geometry, scope.skinnedMesh.material); // If we didn't successfully find the mesh, bail out if (scope.skinnedMesh == undefined) { console.log('unable to find skinned mesh in ' + url);
10330+ 3 other calls in file
How does three.SkinnedMesh work?
three.SkinnedMesh is a class in the Three.js library that inherits from three.Mesh, and adds support for smooth skinning, a technique used in character animation to make it appear as if the skin of a character is stretching and deforming as the underlying skeleton moves.
To create a three.SkinnedMesh, you need to provide a geometry and a material, like with a regular three.Mesh. However, you also need to provide a three.Skeleton object, which defines the bone structure of the mesh.
Once a three.SkinnedMesh is created, you can animate it by changing the positions and rotations of its bones using keyframe animation or other techniques. The skinning algorithm will automatically adjust the vertices of the mesh based on the current bone positions, producing smooth, realistic deformation.
Note that three.SkinnedMesh is just one of many classes in Three.js that are used for 3D graphics and animation. It is often used in conjunction with other classes like three.AnimationMixer, three.KeyframeTrack, and three.AnimationClip to create complex animated scenes.
2386 2387 2388 2389 2390 2391 2392 2393 2394 2395primitive.mode === undefined ) { // .isSkinnedMesh isn't in glTF spec. See .markDefs() mesh = meshDef.isSkinnedMesh === true ? new THREE.SkinnedMesh(geometry, material) : new THREE.Mesh(geometry, material); if ( mesh.isSkinnedMesh === true &&
370+ 14 other calls in file
3294 3295 3296 3297 3298 3299 3300 3301 3302 3303const material = materials[ i ]; if ( primitive.mode === WEBGL_CONSTANTS.TRIANGLES || primitive.mode === WEBGL_CONSTANTS.TRIANGLE_STRIP || primitive.mode === WEBGL_CONSTANTS.TRIANGLE_FAN || primitive.mode === undefined ) { // .isSkinnedMesh isn't in glTF spec. See ._markDefs() mesh = meshDef.isSkinnedMesh === true ? new THREE.SkinnedMesh( geometry, material ) : new THREE.Mesh( geometry, material ); if ( mesh.isSkinnedMesh === true && ! mesh.geometry.attributes.skinWeight.normalized ) { // we normalize floating point skin weight array to fix malformed assets (see #15319)
2100Ai Example
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35const loader = new THREE.JSONLoader(); loader.load("model.json", function (geometry, materials) { const material = new THREE.MeshFaceMaterial(materials); const mesh = new THREE.SkinnedMesh(geometry, material); // Create a skeleton for the mesh const bones = createSkeleton(); const skeleton = new THREE.Skeleton(bones); mesh.add(bones[0]); // Bind the geometry to the skeleton const skinIndices = calculateSkinIndices(geometry, bones); const skinWeights = calculateSkinWeights(geometry, bones); geometry.addAttribute( "skinIndex", new THREE.Uint16BufferAttribute(skinIndices, 4) ); geometry.addAttribute( "skinWeight", new THREE.Float32BufferAttribute(skinWeights, 4) ); // Start the animation const mixer = new THREE.AnimationMixer(mesh); const clip = THREE.AnimationClip.CreateFromMorphTargetSequence( "animation", geometry.morphTargets, 30 ); const action = mixer.clipAction(clip); action.play(); // Add the mesh to the scene scene.add(mesh); });
In this example, we use a THREE.JSONLoader to load a 3D model from a JSON file. Once the model is loaded, we create a THREE.SkinnedMesh by providing the loaded geometry and materials. We then create a skeleton for the mesh by calling a custom function called createSkeleton(). This function should return an array of THREE.Bone objects that define the bone hierarchy of the mesh. We use these bones to create a THREE.Skeleton object, and then add the root bone to the mesh. Next, we bind the geometry to the skeleton by calculating skin indices and weights using custom functions calculateSkinIndices() and calculateSkinWeights(). These values are used to weight the vertices of the mesh based on their proximity to each bone. Finally, we create an animation for the mesh by creating a THREE.AnimationMixer, creating a clip using THREE.AnimationClip.CreateFromMorphTargetSequence(), and playing the clip using a THREE.AnimationAction. We then add the mesh to the scene using scene.add().
3549 3550 3551 3552 3553 3554 3555 3556 3557primitive.mode === WEBGL_CONSTANTS.TRIANGLE_FAN || primitive.mode === undefined ) { // .isSkinnedMesh isn't in glTF spec. See ._markDefs() mesh = meshDef.isSkinnedMesh === true ? new THREE.SkinnedMesh( geometry, material ) : new THREE.Mesh( geometry, material ); if ( mesh.isSkinnedMesh === true && ! mesh.geometry.attributes.skinWeight.normalized ) {
290
2078 2079 2080 2081 2082 2083 2084 2085 2086 2087if (primitive.mode === WEBGL_CONSTANTS.TRIANGLES || primitive.mode === WEBGL_CONSTANTS.TRIANGLE_STRIP || primitive.mode === WEBGL_CONSTANTS.TRIANGLE_FAN || primitive.mode === undefined) { mesh = meshDef.isSkinnedMesh === true ? new three.SkinnedMesh(geometry, material) : new three.Mesh(geometry, material); if (mesh.isSkinnedMesh === true && !mesh.geometry.attributes.skinWeight.normalized) { mesh.normalizeSkinWeights(); }
270
31 32 33 34 35 36 37 38 39 40shading : THREE.FlatShading // wireframe : true }); mat.skinning = true; this.mesh = new THREE.SkinnedMesh(this.geometry, mat); this.mesh.rotation.y = Math.PI; this.mesh.position.z = 2; this.mixer = new THREE.AnimationMixer(this.mesh); this.add(this.mesh);
142
282 283 284 285 286 287 288 289 290 291const geometry = this.geometryBuilder.build(data); const material = this.materialBuilder .setCrossOrigin(this.crossOrigin) .setResourcePath(resourcePath) .build(data, geometry, onProgress, onError); const mesh = new three_1.SkinnedMesh(geometry, material); const skeleton = new three_1.Skeleton(initBones(mesh)); mesh.bind(skeleton); // console.log( mesh ); // for console debug return mesh;
130+ 4 other calls in file
1444 1445 1446 1447 1448 1449 1450 1451 1452 1453return null; }; var material = originalMaterial; material.skinning = true; child = new THREE.SkinnedMesh(originalGeometry, material); child.castShadow = true; child.userData = originalUserData; child.name = originalName; var bones = [];
010+ 9 other calls in file
GitHub: VeinKowal/veins
2356 2357 2358 2359 2360 2361 2362 2363 2364 2365var mesh = void 0; var _material = materials[_i4]; if (primitive.mode === WEBGL_CONSTANTS.TRIANGLES || primitive.mode === WEBGL_CONSTANTS.TRIANGLE_STRIP || primitive.mode === WEBGL_CONSTANTS.TRIANGLE_FAN || primitive.mode === undefined) { // .isSkinnedMesh isn't in glTF spec. See ._markDefs() mesh = meshDef.isSkinnedMesh === true ? new _three.SkinnedMesh(geometry, _material) : new _three.Mesh(geometry, _material); if (mesh.isSkinnedMesh === true && !mesh.geometry.attributes.skinWeight.normalized) { // we normalize floating point skin weight array to fix malformed assets (see #15319) // it's important to skip this for non-float32 data since normalizeSkinWeights assumes non-normalized inputs
010
1882 1883 1884 1885 1886 1887 1888 1889 1890 1891material.skinning = true; } ); model = new THREE.SkinnedMesh( geometry, material ); } else { model = new THREE.Mesh( geometry, material );
001+ 88 other calls in file
1208 1209 1210 1211 1212 1213 1214 1215 1216 1217material.skinning = true; } mesh = new THREE.SkinnedMesh( geom, material, false ); //mesh.skeleton = skinController.skeleton; //mesh.skinController = controllers[ skinController.url ];
002+ 10 other calls in file
2303 2304 2305 2306 2307 2308 2309 2310 2311primitive.mode === WEBGL_CONSTANTS.TRIANGLE_FAN || primitive.mode === undefined ) { if ( useSkinning ) { mesh = new THREE.SkinnedMesh( geometry, material ); material.skinning = true; } else {
000+ 8 other calls in file
1076 1077 1078 1079 1080 1081 1082 1083 1084if (geometry.FBX_Deformer) { materials.forEach(function (material) { material.skinning = true; }); model = new THREE.SkinnedMesh(geometry, material); } else { model = new THREE.Mesh(geometry, material); }
000
three.Vector3 is the most popular function in three (22341 examples)