使用Three.js加载Maya模型

Loading Maya model with Three.js

本文关键字：Maya 模型 加载 js Three 使用      更新时间：2023-09-26

我正在学习如何使用Three.js.加载Maya模型的教程

一切都很好，但教程只解释了如何用一个纹理加载模型。

以下是教程中的源代码：

function createScene(geometry, x, y, z, scale, tmap) {
            zmesh = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({map: THREE.ImageUtils.loadTexture(tmap)}));
            zmesh.position.set(x, y, z);
            zmesh.scale.set(scale, scale, scale);
            meshes.push(zmesh);
            scene.add(zmesh);
        }

完整JS实时链接

            var SCREEN_WIDTH = window.innerWidth;
        var SCREEN_HEIGHT = window.innerHeight;
        var container;
        var camera, scene;
        var canvasRenderer, webglRenderer;
        var mesh, zmesh, geometry, materials;
        var windowHalfX = window.innerWidth / 2;
        var windowHalfY = window.innerHeight / 2;
        var meshes = [];
        init();
        animate();
        function init() {
            container = document.createElement('div');
            document.body.appendChild(container);
            camera = new THREE.PerspectiveCamera(75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000);
            camera.position.x = 400;
            camera.position.y = 200;
            camera.position.z = 400;
            scene = new THREE.Scene();
            // LIGHTS
            var ambient = new THREE.AmbientLight(0x666666);
            scene.add(ambient);
            var directionalLight = new THREE.DirectionalLight(0xffeedd);
            directionalLight.position.set(0, 70, 100).normalize();
            scene.add(directionalLight);
            // RENDERER
            webglRenderer = new THREE.WebGLRenderer();
            webglRenderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
            webglRenderer.domElement.style.position = "relative";
            container.appendChild(webglRenderer.domElement);
            var loader = new THREE.JSONLoader(),
                callbackKey = function (geometry, materials) {
                    createScene(geometry, materials, 0, 0, 0, 6);
                };
            loader.load("chameleon.js", callbackKey);
            window.addEventListener('resize', onWindowResize, false);
        }
        function createScene(geometry, materials, x, y, z, scale) {

            zmesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
            zmesh.position.set(x, y, z);
            zmesh.scale.set(scale, scale, scale);
            meshes.push(zmesh);
            scene.add(zmesh);
        }
        function onWindowResize() {
            windowHalfX = window.innerWidth / 2;
            windowHalfY = window.innerHeight / 2;
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            webglRenderer.setSize(window.innerWidth, window.innerHeight);
        }
        function animate() {
            for (var i = 0; i < meshes.length; i++) {
                meshes[i].rotation.y += 0.01;
            }
            requestAnimationFrame(animate);
            render();
        }
        function render() {
            camera.lookAt(scene.position);
            webglRenderer.render(scene, camera);
        }

但我的模型有四种纹理。我应该更改什么来加载所有这些？实时链接

下面的教程似乎忽略了JSON模型格式中的材质，只需将几何图形和直接文本引用传递到单个纹理文件，如下所示：

var loader = new THREE.JSONLoader(),
    callbackKey = function(geometry) {createScene(geometry,  0, 0, 0, 15, "chameleon.jpg")};
loader.load("chameleon.js", callbackKey);

JSONLoader不仅引入几何体，还引入阵列中的所有材质。（请参见：https://github.com/mrdoob/three.js/blob/master/src/loaders/JSONLoader.js第45行）然后可以将此数组传递给MeshFaceMaterial（arrayOfMaterials），如下所示：

var loader = new THREE.JSONLoader();,
    callbackKey = function(geometry, materials) {createScene(geometry, materials, 0, 0, 0, 15, )};
loader.load("chameleon.js", callbackKey);

然后在createScene函数中，您将第一行更改为：

zmesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));

编辑：添加有关修复Maya导出的详细信息

所以你的模型是黑色的。在这种情况下，问题出现在模型文件chameleon.js中。查看每种材料的colorAmbient和colorDiffuse特性。请注意，它们都是[0.0，0.0，0.0]。这是Maya中已知的obj导出错误。所以你有3个选项来修复它。

1） 打开chameleon.js文件并将所有colorAmbient和colorDiffuse行更改为类似的内容（您需要处理这些值以使其看起来正确）

"colorAmbient" : [0.8, 0.8, 0.8],
"colorDiffuse" : [0.8, 0.8, 0.8],

或

2） 在Maya中，在应用漫反射贴图之前，始终确保先应用默认颜色值。由于某些原因，一旦地图打开，您就无法再访问颜色属性，并且导出器使用默认值0。

或

3） 从Maya导出后，可以通过更改以下行来更改OBJ文件：

Kd 0.00 0.00 0.00

至

Kd 0.80 0.80 0.80

我已经在家里测试过了，你的模型看起来不错，让我知道进展如何？

相关文章：