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

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

 我来答

1个回答

#热议# 为什么说不要把裤子提到肚脐眼？

护肤达人IT宅族
2016-08-15 · 知道合伙人互联网行家

护肤达人IT宅族
知道合伙人互联网行家

采纳数：5637 获赞数：17441

毕业于曲阜师范大学，学士学位。互联网行业2年从业经验，读过SEO相关书籍。现任爱家网SEO优化专员。

向TA提问私信TA

关注

展开全部

<!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>


本回答被提问者和网友采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

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

其他类似问题

为你推荐：