three.js如何加载带材质的obj外部模型

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了three.js如何加载带材质的obj外部模型相关的知识,希望对你有一定的参考价值。

从r73版本之后OBJMTLLoader.js就被删除了,目测用MTLLoader.js代替了,刚开始学这个自己整不出来,,,求大神帖个可以运行的源码,很简单的就好!十分感谢!

参考技术A <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Lession1</title>
<script src="js/three.js"></script>
<script src="js/three.min.js"></script>

</head>

<body>
<div id="container"></div>

<script src="js/three.min.js"></script>

<script src="js/loaders/OBJLoader.js"></script>

<script>
var container;

var camera, scene, renderer;

var mouseX = 0, mouseY = 0;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

init();
animate();

function init()

container = document.createElement( 'div' );
document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 10;

// scene

scene = new THREE.Scene();

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

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

// texture

var manager = new THREE.LoadingManager();
manager.onProgress = function ( item, loaded, total )

console.log( item, loaded, total );

;

var texture = new THREE.Texture();

var onProgress = function ( xhr )
if ( xhr.lengthComputable )
var percentComplete = xhr.loaded / xhr.total * 100;
console.log( Math.round(percentComplete, 2) + '% downloaded' );

;

var onError = function ( xhr )
;

var loader = new THREE.ImageLoader( manager );
loader.load( 'car.jpg', function ( image )

texture.image = image;
texture.needsUpdate = true;

);

// model

var loader = new THREE.OBJLoader( manager );
loader.load( 'car.obj', function ( object )

object.traverse( function ( child )

if ( child instanceof THREE.Mesh )

child.material.map = texture;



);
object.scale.x = object.scale.y = object.scale.z = 10;
object.updateMatrix();
object.position.y = -3;
scene.add( object );

, onProgress, onError );

//

renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );

document.addEventListener( 'mousemove', onDocumentMouseMove, false );

//

window.addEventListener( 'resize', onWindowResize, false );



function onWindowResize()

windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );



function onDocumentMouseMove( event )

mouseX = ( event.clientX - windowHalfX ) / 2;
mouseY = ( event.clientY - windowHalfY ) / 2;



//

function animate()

requestAnimationFrame( animate );
render();



function render()

camera.position.x += ( mouseX - camera.position.x ) * .5;
camera.position.y += ( - mouseY - camera.position.y ) * .5;

camera.lookAt( scene.position );

renderer.render( scene, camera );



</script>

</body>

</html>本回答被提问者和网友采纳

加载 Collada (dae) 模型时如何在 THREE.js 中设置材质?

【中文标题】加载 Collada (dae) 模型时如何在 THREE.js 中设置材质?【英文标题】:How to setup materials in THREE.js when loading Collada (dae) models? 【发布时间】:2012-01-07 01:49:41 【问题描述】:

我有以下代码:

    new THREE.ColladaLoader().load('models/cylinder.dae',
function(collada) 
    var model = collada.scene;
    model.scale.set(10.0, 10.0, 10.0);

    // attempt to set a material - doesn't work...
    collada.dae.materials[0] = new THREE.MeshBasicMaterial(  color: 0xff0000, wireframe: true  );

    scene.add(model);
);

感谢您的帮助。

【问题讨论】:

【参考方案1】:
var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
loader.load( './models/cylinder.dae',function colladaReady( collada ) 

model = collada.scene;
model_geometry = collada.scene.children[ 0 ].geometry;
model_material = collada.scene.children[ 0 ].material;

model.scale.set(10.0, 10.0, 10.0);
model.updateMatrix();
);

如果您将 model_material 设为“未定义”,请查看 collada 对象

console.log(collada);

有时孩子里面有孩子,所以你可能必须这样做:

model_material = collada.scene.children[ 0 ].children[ 0 ].material;

查看collada模型,然后进行相应的修改。

【讨论】:

以上是关于three.js如何加载带材质的obj外部模型的主要内容,如果未能解决你的问题,请参考以下文章

Three.js 在通过 OBJMTLLoader 加载的对象上的多种材质

three.js(4)-网格Lambert材质

如何在 TypeScript 中使用 three.js 加载 OBJ 模型

threejsiphone加载崩溃

在web端,three.js如何操作3d模型obj对象的子构件

【Three.js】请问如何显示带纹理的三维模型?