如何在 Three.js 中加载 .obj 3D 模型?
Posted
技术标签:
【中文标题】如何在 Three.js 中加载 .obj 3D 模型?【英文标题】:How to load .obj 3D model in Three.js? 【发布时间】:2017-01-28 19:31:04 【问题描述】:这是根据您的建议更新的代码
var 场景 = 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 文件并将其添加到场景的正确方法是什么。
【问题讨论】:
***.com/a/35422599/1980846 【参考方案1】:在您的代码中,您只需在加载模型之前渲染一次场景。如果不重新渲染,向场景中添加东西不会有任何可见的效果。
通常 WebGL 渲染是在 requestAnimationFrame 驱动循环中完成的,因此它会不断运行以获得不断更新的视觉场景。
function render()
window.requestAnimationFrame( render );
renderer.render( scene, camera );
render();
或者,如果您真的只想在加载对象后再渲染一帧,只需在您的 onLoad
回调中调用 render:
function ( object )
scene.add( object );
renderer.render( scene, camera );
);
【讨论】:
我按照您的建议修改了代码,删除了 renderer.render 并将其替换为 render 函数,然后调用它,但没有任何改变 你能用最新的完整代码更新你的问题吗? 除了渲染功能我改变了加载路径 我想也许 3D 模型在那里,但它不在视口中 您的相机可能只是在对象内部。尝试移动相机位置【参考方案2】:如果您确定您的 obj 有材质并且您按照 @Andy Ray 告诉您的操作(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 );
【讨论】:
以上是关于如何在 Three.js 中加载 .obj 3D 模型?的主要内容,如果未能解决你的问题,请参考以下文章
Three.js Collada - 在三个 js 中加载多个 Collada 对象