Question

我从3ds场景格式的turbosquid购买了3d人类牙齿模型。我想要做的就是从文件中提取单个牙齿，并在threejs脚本中使用它们在网页上显示它们。我所做的是从.sj格式的3ds Max导出一个牙齿，然后使用带有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不再具有材质属性，而之前只有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缺少材质中的纹理定义。你有几个选择：

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

Threejs使用3ds Max中的对象和纹理

2 个答案: