Как загрузить 3D-модель 3D в Three.js?

Question

Вот обновленный код, основанный на ваше предложение

 
var scene = new THREE.Scene(); 
    var camera = new THREE.PerspectiveCamera(75,  window.innerWidth/window.innerHeight, 0.1, 1000); 
    var element = document.getElementById("container");
 

var renderer = new THREE.WebGLRenderer({ alpha: true }); 
renderer.setSize(window.innerWidth, window.innerHeight); 
element.appendChild(renderer.domElement); 

var loader = new THREE.OBJLoader(); 
loader.load(

'3D Model/Tiend3D.obj', 

function (object) { 
    scene.add(object); 
}); 

function render() { 

    window.requestAnimationFrame(render); 
    renderer.render(scene, camera); 

} 

render(); 

Это код, я использую, чтобы импортировать 3D модели, но он не работает на всех, и я убедился, что 3D-модель загружается путем изменения пути для 3D-модели в одном из примеров по пути для моего, и она была загружена отлично, и я посмотрел на код для этого примера, но там много вещей, с которыми я не знаком, поэтому мой вопрос это то, что является правильным способом загрузки файла .obj и добавления его в сцену.

Answer 1

В вашем коде вы только визуализируете свою сцену один раз, перед загрузкой модели. Добавление вещей в сцену не будет иметь видимого эффекта без повторной рендеринга.

Обычно рендеринг WebGL выполняется в управляемом контуре requestAnimationFrame, поэтому он постоянно работает, чтобы постоянно обновлять визуальную сцену.

function render() { 

    window.requestAnimationFrame(render); 
    renderer.render(scene, camera); 

} 

render(); 

С другой стороны, если вы действительно хотите только, чтобы сделать еще один кадр после загрузки объекта, просто вызовите визуализации в вашем onLoad обратного вызова:

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

Answer 2

Если вы уверены, что ваш OBJ имеет материалы и вы сделал то, что @Andy Рэй сказал вам (функция window.requestAnimationFrame(render)), то вам может понадобиться свет на самом деле увидеть сцену, поставить это после renderer декларации

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

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