使用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);
}
Full 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/ three.js / blob / master / src / loaders / JSONLoader.js 第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.
OR
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屋！
