使用 Three.js 加载 Maya 模型 [英] Loading Maya model with Three.js
问题描述
我正在关注关于如何加载 Maya 的本教程使用 Three.js 的模型.
I am following this tutorial on how to load Maya models with Three.js.
一切都很好，但教程只解释了如何加载具有一种纹理的模型.
Everything is fine, but tutorial only explains how to load models with one texture.
这是教程中的源代码:
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);
}
但我的模型有四种纹理.我应该更改什么才能加载所有这些内容?实时链接
But my model has four textures. What should I change to load all of them?Live Link
推荐答案
看起来您的以下教程忽略了来自 JSON 模型格式的材料，而只是将几何图形和直接文本引用传递给单个纹理文件，如下所示:
it appears the tutorial your following is ignoring the materials from the JSON model format and simply passing the geometry and a straight text reference to a single texture file like so:
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/三.js/blob/master/src/loaders/JSONLoader.js line 45) 然后你可以把这个数组传递给 MeshFaceMaterial(arrayOfMaterials) 像这样:
The JSONLoader not only pulls in the geometry but all the materials in an array. (see: https://github.com/mrdoob/three.js/blob/master/src/loaders/JSONLoader.js line 45) You can then pass this array to the MeshFaceMaterial(arrayOfMaterials) like so:
var loader = new THREE.JSONLoader();,
callbackKey = function(geometry, materials) {createScene(geometry, materials, 0, 0, 0, 15, )};
loader.load("chameleon.js", callbackKey);
然后在 createScene 函数中将第一行更改为:
Then in your createScene function you change the first line to be:
zmesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
添加有关修复 Maya 导出的详细信息
Adding details on fixing Maya exports
所以你的模型正在加载但黑色.在这种情况下，问题出在模型文件 chameleon.js 中.查看每种材质的 colorAmbient 和 colorDiffuse 属性.注意它们都是 [0.0, 0.0, 0.0].这是 Maya 中已知的 obj 导出错误.所以你有 3 个选项来修复它.
So your model is loading but black. In this case the issue is in the model file chameleon.js. Have a look at each material's colorAmbient and colorDiffuse property. Notice they're all [0.0, 0.0, 0.0]. This is a known obj export bug in Maya. So you have 3 options to fix it.
1) 打开 chameleon.js 文件并将所有 colorAmbient 和 colorDiffuse 行更改为类似的内容(您需要使用值使其看起来正确)
1) Open the chameleon.js file and alter all the colorAmbient and colorDiffuse lines to something like this (you'll need to play with the values to make it look right)
"colorAmbient" : [0.8, 0.8, 0.8],
"colorDiffuse" : [0.8, 0.8, 0.8],
或
2) 在 Maya 中应用漫反射贴图之前，请务必先应用默认颜色值.出于某种原因，一旦地图打开，您将无法再访问颜色属性，并且导出器使用默认值 0.
2) In Maya before applying your diffuse map, always make sure to apply a default color value first. For some reason once the map is on you can no longer access the color property and the exporter uses the default value of 0.
或
3) 从 Maya 导出后，您可以通过更改以下行来更改 OBJ 文件:
3) After exporting from Maya you can alter the OBJ file by change these lines from:
Kd 0.00 0.00 0.00
到
Kd 0.80 0.80 0.80
我已经在家里进行了测试，您的模型看起来不错，请告诉我进展如何?
I've tested this here at home and your model is looking good, let me know how it goes?
这篇关于使用 Three.js 加载 Maya 模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
