Morph Targets Three.js

javascript three.js webgl blender morphing
user2517605 picture user2517605 · Jul 30, 2013 · Viewed 9.6k times · Source

I'm trying to get started with morph targets and three.js. However, there doesn't seem to be much documentation on this subject.

As I'm looking at the source code:

morphTargetInfluences[]

seems to be the magic...how does this work? How do I use this? Is a value of 1 full strength? How can I differentiate between different morph targets on the same model? I'm just trying to understand:

morphTargetInfluences[].

Thanks in advance

Answer

potomek picture potomek · Jul 31, 2013

http://threejs.org/examples/webgl_morphtargets.html

Morph targets are sets of geometry vertices positions for automatic interpolation between them. You can change geometry appearance in real time, using different vertices positions written in morphTargetInfluences[0], morphTargetInfluences[1], morphTargetInfluences[nSet]. You can mix many appearances (morphTargetInfluences) of geometry at the same time. Best way is JSONLoader format, wchich you can export from 3DSMax for example: frame0 as morphTargetInfluences[0], frame1 as morphTargetInfluences[1], ect.

The original geometry vertices are untouched, which you can check using geometry.computeBoundingBox(); geometry.boundingBox();

Related questions

How to stop a requestAnimationFrame recursion/loop?

I'm using Three.js with the WebGL renderer to make a game which fullscreens when a play link is clicked. For animation, I use requestAnimationFrame. I initiate it like this: self.animate = function() { self.camera.lookAt(self.scene.position); self.…

Read More
How to detect collision in three.js?

I am using three.js. I have two mesh geometries in my scene. If these geometries are intersected (or would intersect if translated) I want to detect this as a collision. How do I go about performing collision detection with …

Read More
Three.js - Change Material on Runtime

I have some .js files exported from Blender and load them with THREE.JSONLoader(); my callback: var callback = function( geometry ) { createMesh(geometry); my loading: loader.load( "Models/sculp.js", callback ); my create method: function createMesh(geometry){ inArr[id] = new THREE.…

Read More