Three.JS OBJ Модель не показана

У меня есть .obj модель, чем я сделал (нашел) в c4d и экспортировал ее со шкалой 1 в метрах. Чем я пытаюсь загрузить его в Three.js с OBJLoader, никаких ошибок, но модель не отображается. В чем проблема с этимThree.JS OBJ Модель не показана

<script src="http://threejs.org/build/three.js"></script> 
<script src="http://threejs.org/examples/js/loaders/OBJLoader.js"></script> 
<body style="margin:0;padding:0;"> 
</body> 
<script> 
    var scene = new THREE.Scene(); 
    var camera = new THREE.PerspectiveCamera(45, innerWidth/innerHeight, 1, 2000); 
    var render = new THREE.WebGLRenderer(); 
    camera.position.set(0, 0, 53); 

    render.setSize(innerWidth, innerHeight); 
    document.body.appendChild(canvas = render.domElement); 

    render.setClearColor(0x111111, 1); 

    function loadScene() { 
     var loader = new THREE.OBJLoader(); 
     loader.load("./fox.obj", function(model) { 
      model.traverse(function(child) { 
       if (child instanceof THREE.Mesh) { 
        child.material.color = 0xffb830; 
       } 
      }); 
      model.position.set(0, 0, -53); 
      scene.add(model); 
      window.model = model; 
     }); 
     render.render(scene, camera); 
    } 

    window.onload = loadScene; 
</script>

источник

2016-05-16 WildeMe

не ответ: положите javascript внутри головы или тела. –

, чем не имеет значения, вообще – WildeMe

Вы можете попытаться использовать помощник ограничивающего бокса http://threejs.org/docs/#Reference/Extras.Helpers/BoundingBoxHelper, чтобы проверить правильность позиции и размера загруженной модели , –

Я сделал работу по: (простой коррекции ниже в UPDATE)

1 - Удаление этой строки:

render.render(scene, camera);

2 - Добавление этого фрагмента кода после инициализаций:

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

3 - Также с использованием другого источника для библиотеки three.js. Я включил локальную копию, которую я сейчас использую в другом проекте, и это сработало. Вероятно, вы извлекли его из устаревшего источника ... Попробуйте загрузить файл непосредственно из ссылки для скачивания: https://github.com/mrdoob/three.js/archive/master.zip

Вы также должны попытаться добавить OrbitControls на сцену, чтобы вы могли перемещаться по орбите потому что объект может быть больше, чем вы ожидаете и не показываете (по-видимому) из-за этого. Вы можете добавить элементы управления орбиты, включив в OrbitControls.js доступны в источнике three.js, и добавив следующую строку кода:

var controls = new THREE.OrbitControls(camera, render.domElement);

UPDATE:

просто позвонить визуализировать внутри функции метода загрузки, например, предложенный ManoDestra:

loader.load("./fox.obj", function(model) { 
    model.traverse(function(child) { 
     if (child instanceof THREE.Mesh) { 
      child.material.color = 0xffb830; 
     } 
    }); 
    model.position.set(0, 0, -53); 
    scene.add(model); 
    window.model = model; 
    render.render(scene, camera); 
});

источник

2016-05-17 00:43:55

Забавный, я полностью упустил тот факт, что нет настройки петли визуализации. Я прекратил читать после строки, которая позиционирует загруженную модель. – pailhead

Я думаю, что ответ mano destra вернее. Вы расширяете исходный код, добавляя интерактивность через контроллер орбиты и цикл рендеринга. Если для этого требуется только однократное визуализация, это должно быть сделано после загрузки объекта. – pailhead

Контроллер орбиты был просто предложением пользователю только для отладки (попытка найти объект, который может быть больше, чем ожидалось, или в другом положении). О необходимости цикла рендеринга я также подумал, что вызвать функцию рендеринга только один раз после загрузки объекта будет достаточно, но я проверил код, и он не сработал. Добавив цикл рендеринга, он работал отлично. –

Проблема в том, что вы передаете свою сцену перед тем, как объект загрузился.

Разместите вызов render.render (scene, camera) таким образом, чтобы он вызывался только после загрузки вашей модели. Например.

function loadScene() { 
    var loader = new THREE.OBJLoader(); 
    loader.load("./fox.obj", function(model) { 
     model.traverse(function(child) { 
      if (child instanceof THREE.Mesh) { 
       child.material.color = 0xffb830; 
      } 
     }); 
     model.position.set(0, 0, -53); 
     scene.add(model); 
     window.model = model; 
     render.render(scene, camera); 
    }); 
}

Я также хотел бы убедиться, что все источника существует в головной части (или хвост вашего HTML, если это ваши предпочтения). Затем просто вызовите код инициализации в событии загрузки окна. И, как было сказано выше, только визуализируйте сцену в первый раз, после того как все ваши активы были загружены.

Вы также можете потребовать вызова смотреть на сцене, к примеру ...

camera.lookAt(scene.position);

Ой, а также, child.material.color является объектом, например, child.material.color = { r:1, g:1, b:1 }.

источник

2016-05-16 19:36:29 ManoDestra

Почему это проблема? Three.js поддерживает добавление и удаление узлов из графика сцены, т.е. вы можете начать рендеринг, затем загрузить что-то, а затем добавить его в сцену, все время выполняя какую-либо логику рендеринга (либо постоянные обновления, либо что-то более сложные). Это имеет нулевое (0) влияние на то, будет ли эта вещь нарисована или нет. Конечно, камера может не смотреть на объект, но некоторые предположения могут быть сделаны. ТРИ - правая рука, поэтому эти цифры имеют смысл. Камера по умолчанию смотрит вниз -z, она перемещается в z == 53, объект в z == - 53, между камерой и объектом имеется 106 единиц. – pailhead

Прошу прощения за комментарий, ваш ответ на самом деле совершенно правильный. Он снимает сцену только один раз, прежде чем что-либо загрузится. Я бы только спорил, может быть, с формулировкой, это само по себе еще не проблема, дело в том, что после этого он ничего не делает. Этот код, скорее всего, отсутствует в цикле рендеринга. Я просто перестала читать после строки, которая позиционирует объект. – pailhead

Учитывая код и требование визуализации сцены только один раз (без цикла рендеринга), ваш ответ является единственным действительным здесь. – pailhead

Применить THREE.MeshBasicMaterial({color:'red'}) для всех загруженных сеток, чтобы устранить такие вещи, как отсутствие нормалей, отсутствие света, отсутствие текстур и т.д. (Этот материал не должен требовать ничего этого, чтобы работать).
Посмотрите на model.children[N].geometry.vertices, чтобы увидеть, если у вас есть действительные значения там

источник

2016-05-16 20:25:42 pailhead

Three.JS OBJ Модель не показана

ответ

Смежные вопросы