As a beginner in three.js and webgl, I decided to experiment with some example files within the three.js repo. My goal was to incorporate code from one of the examples - "Morph Normal example" featuring a bird flapping its wings into my own project. I copied lines 90 to 107 from the morph normal example which loads the flamingo.js model. Additionally, I added a couple of lines of my own code to insert this model into my scene. I even included the morphColorsToFaceColors() function at the end of the same js file I was editing. However, upon starting the browser, all models were loading except for the flamingo.js model, displaying an error message in the console:
TypeError {} Three.js:632 f.onreadystatechange Three.js:632 DEPRECATED: [flamingo.js] seems to be using old model format
get stack: function () { [native code] } message: "Object [object Object] has no method 'offsetHSL'" set stack: function () { [native code] } arguments: null caller: null length: 1 name: "" prototype: Object proto: function Empty() {} proto: Error
I made modifications and additions to my custom js code as follows:
var mesh = new THREE.Object3D();
mesh.position.y = 48;
var loader = new THREE.JSONLoader();
loader.load( "flamingo.js", function( geometry ) {
morphColorsToFaceColors( geometry );
geometry.computeMorphNormals();
var material = new THREE.MeshLambertMaterial( { color: 0xffffff, morphTargets: true, morphNormals: true, vertexColors: THREE.FaceColors, shading: THREE.FlatShading } );
var meshAnim = new THREE.MorphAnimMesh( geometry, material );
meshAnim.duration = 800;
meshAnim.scale.set( 1.5, 1.5, 1.5 );
meshAnim.position.y = 150;
mesh.add(meshAnim);
} );
At the end of the same js file, I placed the morphcolorsToFacecolors function after calling the animate() function.
function morphColorsToFaceColors( geometry ) {
if ( geometry.morphColors && geometry.morphColors.length ) {
var colorMap = geometry.morphColors[ 0 ];
for ( var i = 0; i < colorMap.colors.length; i ++ ) {
geometry.faces[ i ].color = colorMap.colors[ i ];
geometry.faces[ i ].color.offsetHSL( 0, 0.3, 0 );
}
}
}
The Flamingo.js file remains unchanged from the version provided in the three.js example.