1

我已经使用骨骼动画技术成功地在搅拌机中为模型制作了动画，并且我还在搅拌机中使用 uv 纹理对其进行了纹理化。然后在搅拌机中使用 three.js 导出插件，我导出了模型，确保签入了 uv 和动画。但是我不知道为动画模型加载纹理的技术。我查看了three.js中包含的变形法线示例，其中使用Lambert材质使用了简单的颜色纹理。我有来自外部文件的纹理。我如何加载纹理。在 js 动画模型文件中有纹理的位置，它在同一位置。但它不加载。我也使用了面材技术。

我用来修改的 three.js 示例的位置：

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

这是我的代码：

var loader = new THREE.JSONLoader();
            loader.load( "bird_final.js", function( geometry, materials ) {

                morphColorsToFaceColors( geometry );
                geometry.computeMorphNormals();

                // the old code to set color to the model

                //var material = new THREE.MeshLambertMaterial( { color: 0xffffff, morphTargets: true, morphNormals: true, vertexColors: THREE.FaceColors, shading: THREE.SmoothShading } );

                // my code
                var meshAnim = new THREE.MorphAnimMesh( geometry, new THREE.MeshFaceMaterial( materials ) );

                meshAnim.duration = 500;

                meshAnim.scale.set( 20, 20, 20 );
                meshAnim.position.y = 150;
                meshAnim.position.x = -100;


                scene1.add( meshAnim );
                morphs.push( meshAnim );

            } );

除了分散在网络上的文档和一些基本教程之外，还有什么地方可以让我从头开始学习three.js。就像我知道设置场景和创建基本的几何东西一样，但是一些细节信息，比如加载纹理模型加载场景等。

4

2 回答 2

10

我为 Three.js 创建了一系列带注释的示例，这些示例一次说明一个功能，从非常基本的功能开始到更高级的功能（包括加载模型）。

http://stemkoski.github.io/Three.js

希望这可以帮助！

于 2013-05-26T17:06:05.527 回答
2

使用复杂的几何、材质、纹理和动画是在 THREE.js 中最难弄清楚的一些事情——这就是我们从编辑器开始的原因。

我们使所有这些变得容易。从 Blender 导出 FBX 文件（或 OBJ/MTL 或 Collada）。将其引入 Verold Studio 中的项目，然后使用我们的加载器将其加载到您的 THREE.js 程序中。服务免费使用，如果您需要启用服务或有需要维护/支持协议的客户，您需要付费给我们。

请参见下面的示例，将您的场景带到 THREE.js 再简单不过了，

http://jsfiddle.net/rossmckegney/EeMCk/

     // 1. Set and then start the animation :)   
     this.model.setAnimation("mixamo.com"); 
     this.model.playAnimation(true);
     //this.model.pauseAnimation(); 

     // 2. Get the threedata for a model
     console.log(this.model.threeData);

     // 3. Move the model
     this.tweenObjectTo(
         this.model.threeData,                // the model
         new THREE.Vector3(1, 0, 0),          // go to
         new THREE.Quaternion(),              // rotation
         1,                                   // time, in seconds
         false,                               // smooth start 
         true);                               // smooth end 

      // 4. Clone the model
      that = this;
      this.model2 = this.model.clone({  
        success_hierarchy: function(clonedModel) {
          that.veroldEngine.getActiveScene().addChildObject(clonedModel);
        }
      });
于 2013-05-21T10:55:21.783 回答