javascript - 如何对从 blender 导出的动画 js 模型进行纹理处理? [三.js]

标签 javascript three.js webgl

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

我用来修改的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。就像我知道设置场景和创建基本的几何图形一样,还有一些细节信息,比如加载纹理模型加载场景等。

最佳答案

我为 Three.js 创建了一系列带注释的示例,这些示例一次一个地说明功能,从非常基本的功能开始,逐渐发展到更高级的功能(包括加载模型)。

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

希望这对您有所帮助!

关于javascript - 如何对从 blender 导出的动画 js 模型进行纹理处理? [三.js],我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16652097/

相关文章:

Three.js - 将不同的 Material 应用于挤压形状

php - 带有上传百分比的ajax php上传文件

javascript - 以图案形式 Canvas 随机图像

javascript - 如何绘制具有补间动画效果的三个js线几何体?

javascript - THREE.BufferAttribute : . setArray 已被删除。使用 BufferGeometry .setAttribute unindexBufferGeometry

object - 如何通过three.dart加载obj模型?

javascript - 使用 DOM 中已有的图像时避免网络请求

javascript - leafletjs 覆盖层被隐藏

google-chrome - 为什么会出现此错误: “THREE.WebGLRenderer: Error creating WebGL context.” ?

javascript - WebGL/three.js 片段着色器 - 用 alpha 透明颜色覆盖 alpha 透明纹理