0

我从 turbosquid 购买了 3d 场景格式的 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();
4

2 回答 2

3

请参阅 three.js迁移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 );
} );

三.js r.53

于 2012-12-19T15:38:34.547 回答
3

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

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