Threejs 使用带有纹理的 3ds Max 对象

Question

我从 turbosquid 购买了 3ds 场景格式的 3d 人类牙齿模型。我要做的就是从文件中提取个体牙齿并在threejs脚本中使用它们以在网页上显示它们。我所做的是从 3ds Max 中以 .obj 格式导出一颗牙齿，并使用threejs 提供的转换器将其转换为 json。虽然图像出现在页面上，但没有应用纹理。 我是 3ds Max 和 Threejs 的新手，不知道我错过了什么。你能指导我吗？

编辑： 这是 Json 元数据

"metadata" :
{
    "formatVersion" : 3.1,
    "sourceFile"    : "toothz.obj",
    "generatedBy"   : "OBJConverter",
    "vertices"      : 1636,
    "faces"         : 1634,
    "normals"       : 1636,
    "colors"        : 0,
    "uvs"           : 1636,
    "materials"     : 1
},

"scale" : 1.000000,

"materials": [  {
"DbgColor" : 15658734,
"DbgIndex" : 0,
"DbgName" : "Teeth",
"colorAmbient" : [0.584314, 0.584314, 0.584314],
"colorDiffuse" : [0.584314, 0.584314, 0.584314],
"colorSpecular" : [0.538824, 0.538824, 0.538824],
"illumination" : 2,
"opticalDensity" : 1.5,
"specularCoef" : 70.0,
"transparency" : 1.0
}], 

编辑： 这是完整的代码

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 2000);

loader = new THREE.JSONLoader();
loader.load( "js/JsonModels/toothz.js", function( geometry, materials ) {
    materials[0].shading = THREE.SmoothShading;
    var material = new THREE.MeshFaceMaterial( materials );
    mesh = new THREE.Mesh( geometry, material );
    mesh.scale.set( 3, 3, 3 );
    mesh.position.y = 0;
    mesh.position.x = 0;
    scene.add( mesh );
} );

camera.position.z = 340;

//var ambient = new THREE.AmbientLight( 0x101030 );
//scene.add( ambient );

var directionalLight = new THREE.DirectionalLight( 0xffeedd );
directionalLight.position.set( 0, 0, 1 ).normalize();
scene.add( directionalLight );

var renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

function render() {
     requestAnimationFrame(render);
    renderer.render(scene, camera); 
} 
render();

Answer 1

查看three.js Migration wiki。

几何不再有材料属性，加载器回调，以前只有一个geometry 参数，现在也传递了第二个，materials。

编辑：你需要做这样的事情：

loader = new THREE.JSONLoader();
loader.load( "js/JsonModels/toothz.js", function( geometry, materials ) {
    materials[0].shading = THREE.SmoothShading;
    var material = new THREE.MeshFaceMaterial( materials );
    mesh = new THREE.Mesh( geometry, material );
    mesh.scale.set( 3, 3, 3 );
    mesh.position.y = 0;
    mesh.position.x = 0;
    scene.add( mesh );
} );

three.js r.53

Answer 2

在许多导出器中，纹理导出通常很棘手，因为 3d 程序材料和 three.js 材料之间并不总是有清晰的映射。此外，.obj 文件中根本没有定义任何材质，但需要单独的 .mtl。我不确定 a) .mtl 是否已导出并且 b) obj 转换器是否使用它，但无论如何，您的 JSON 缺少材质中的纹理定义。你有几个选择：

1. 试试the MAX exporter，它应该允许将您的内容直接导出到 JSON，而无需中间的 .obj 步骤。
2. 使用 OBJ 路由，您应该检查导出器中的所有相关选项是否已检查，生成一个 .mtl 文件，并且 obj 转换器会找到它。
3. 或者将纹理手动添加到 JSON："mapDiffuse": "my_texture_filename.jpg"（添加到文件"materials" 部分的材质定义中）。
4. 您还可以在模型加载回调中将纹理添加到材质中。但是，这是一个很大的 hack，不推荐。