Threejs Использование объектов из 3ds Max с текстурами

Я приобрел у turbosquid 3d модель зубов человека в формате 3ds scene. Все, что я хочу сделать, это извлечь отдельные зубы из файла и использовать их в скрипте threejs, чтобы отобразить их на веб-странице. Я экспортировал один зуб из 3ds Max в формат .obj и преобразовал его в json с помощью конвертера, поставляемого с threejs. Хотя изображение появляется на странице, но к нему не применены текстуры. Я новичок в 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();

three.js webgl 3dsmax
person ZedBee    schedule 19.12.2012    source источник
comment
Вы не предоставляете достаточной информации. Можете ли вы опубликовать живой пример, используя текущую версию three.js r.53?   -  person WestLangley    schedule 19.12.2012
comment
Я включил рассматриваемый код. Пожалуйста, проверьте   -  person ZedBee    schedule 19.12.2012
comment
убедитесь, что вы не нарушаете максимальную текстуру вашего браузера. browserleaks.com/webgl   -  person fullstacklife    schedule 13.07.2014

Ответы (2)


arrow_upward
3
arrow_downward

Экспорт текстур обычно затруднен во многих экспортерах, потому что не всегда существует четкое соответствие между материалами программы 3D и материалами three.js. Кроме того, в файле .obj вообще нет определенных материалов, но требуется отдельный .mtl. Я не уверен, что a) .mtl экспортируется и b) конвертер obj использует его, но в любом случае в вашем JSON отсутствует определение текстуры в материале. У вас есть несколько вариантов:

  1. Попробуйте экспортер MAX, который должен разрешить экспорт вашего материала непосредственно в JSON, без промежуточного шага .obj.
  2. С маршрутом OBJ вы должны проверить, что все соответствующие параметры в экспортере отмечены, создается файл .mtl и конвертер obj находит его.
  3. В качестве альтернативы добавьте текстуру вручную в JSON: "mapDiffuse": "my_texture_filename.jpg" (в определение материала в разделе "materials" файла).
  4. Вы также можете добавить текстуру к материалу в обратном вызове загрузки модели. Однако это серьезная хитрость и не рекомендуется.
person Tapio    schedule 20.12.2012
comment
Текстура наложена с помощью Gradient Ramp (3ds Max 2009). Думаю, для этого у нас не будет .jpg. - person ZedBee; 22.12.2012
comment
Вы должны уметь запекать любые процедурные материалы в изображения в любой приличной программе моделирования. - person Tapio; 24.12.2012
comment
MAX действительно по умолчанию экспортирует файлы .mtl, когда записывает файлы .obj. - person DragonLord; 02.05.2013
comment
Для людей, имеющих проблемы с VRayMtl, вот изменения, которые вам нужно добавить в скрипт Max, чтобы он заработал: github.com/mrdoob/three.js/issues/893#issuecomment-20929994 - person elyas-bhy; 14.07.2013

arrow_upward
3
arrow_downward

См. Вики Миграция three.js.

У геометрии больше нет свойства материалов, а обратным вызовам загрузчика, которые раньше имели только параметр 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

person WestLangley    schedule 19.12.2012
comment
Мне это не по зубам :), но спасибо за ваше время, позвольте мне еще раз изучить концепции и реализовать их так, как вы предложили. Похоже, что большая часть учебника / документации в Интернете по THREEJS устарела. - person ZedBee; 19.12.2012
comment
Один очень простой вопрос. Нужно ли экспортировать текстуру отдельно или достаточно только экспортированного / преобразованного объекта (зуба), чтобы на веб-странице он выглядел так, как он выглядит в 3ds Max (со всеми цветами и текстурами) - person ZedBee; 19.12.2012
comment
Извините, я понял, что использую three.js r.52. Дай сделаю с r.53 и посмотрим. - person ZedBee; 20.12.2012
comment
Все тот же результат. Изображение выглядит серым без каких-либо цветов. Я отредактировал исходное сообщение, чтобы включить весь свой код. - person ZedBee; 20.12.2012