Question

我是three.js和webgl中的菜鸟，所以我在three.js repo中使用示例文件。我希望实现的是从三个例子之一移植代码 - “变形正常例子”，其中有一只鸟扇动它的翅膀。我想将该模型导入我正在使用我的代码进行的实验中。我做的是，我从第90行到第107行的变形正常例子中复制代码，这是加载flamingo.js模型，然后我添加了2行代码以便将该模型添加到场景中，我甚至复制了morphColorsToFaceColors（）函数在我编辑的同一个js文件的底部。但是，当我启动浏览器时，所有其他模型加载但不是flamingo.js，它在控制台中说明

TypeError {} Three.js：632   f.onreadystatechange Three.js：632   弃用：[flamingo.js]似乎使用的是旧模型格式

获取堆栈：function（）{[native code]}   消息：“对象[对象对象]没有方法'offsetHSL'”   set stack：function（）{[native code]}   参数：null   调用者：null   长度：1   名称： ””   原型：对象    proto ：函数Empty（）{}       proto ：错误

这是我的代码，我修改了几行并添加到我的自定义js

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);

    } );

在我正在处理的同一个js文件的末尾，我在调用animate（）函数后粘贴了morphcolorstofacecolors函数

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 );

        }

    }

}

Flamingo.js文件与three.js示例中提供的文件相同。

Answer 1

听起来你正在使用更新版本的THREE.js，他们已经更新了模型格式。如果要使用相同的模型格式，则应确保使用的是与该演示中使用的版本相同的版本。

从三个.js示例中将Flamingo.js模型加载到自定义js文件中

1 个答案: