threesJs加载obj模型并给模型贴图

最新推荐文章于 2024-08-14 14:05:02 发布

一个前端小朋友

最新推荐文章于 2024-08-14 14:05:02 发布

阅读量3.9k

点赞数

分类专栏：其他

本文链接：https://blog.csdn.net/zfz5720/article/details/91994556

版权

其他专栏收录该内容

8 篇文章 1 订阅

订阅专栏

webgl做前端的3d展示需要几大要素，场景（scene）, 相机（camera）, 以及一个渲染器（renderer）,
这是必不可少的，如果你还需要操作可以使用控制器，下图即为加载的obj模型和材料贴图. 在这里插入图片描述

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>3dbody</title>
  </head>
  <script src="./static/3djs/three.js"></script>
  <body>
  <script src="./static/3djs/DDSLoader.js"></script>
  <script src="./static/3djs/MTLLoader.js"></script>
  <script src="./static/3djs/OBJLoader.js"></script>
  <script src="./static/3djs/stats.min.js"></script>
    <div id="container">
   </div>
  </body>
  <script>
      var container = document.getElementById('container');
      var stats;
      var camera, scene, renderer;
      var mouseX = 0, mouseY = 0;
      var windowHalfX = window.innerWidth / 2;
      var windowHalfY = window.innerHeight / 2;
      init();
      animate();
      function init() {
        camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
        camera.position.z = 300;
        // scene
        scene = new THREE.Scene();
        var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
        scene.add( ambientLight );
        var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
        camera.add( pointLight );
        scene.add( camera );
        var manager = new THREE.LoadingManager();
        //模型需要纹理Texture
        var texture = new THREE.Texture();
        var loader = new THREE.ImageLoader( manager );

        loader.load( './../../static/obj/MCS_COLOR.jpg', function ( image ) {
          texture.image = image;
          texture.needsUpdate = true;
        })
        // model
        var onProgress = function ( xhr ) {
          if ( xhr.lengthComputable ) {
            var percentComplete = xhr.loaded / xhr.total * 100;
            console.log( Math.round( percentComplete, 2 ) + '% downloaded' );
          }
        };
        var onError = function () { };
        THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );
        new THREE.MTLLoader().setPath( './../../static/obj/' )
          .load( 'man.mtl', function ( materials ) {
            materials.preload();
            new THREE.OBJLoader()
              .setMaterials( materials )
              .setPath( './../../static/obj/' )
              .load( 'man.obj', function ( object ) {
                object.children[0].geometry.center();
                object.traverse( function ( child ) {
                      if ( child instanceof THREE.Mesh ) {
                        child.material.map = texture;
                      }
                    } );
//                object.rotation.x = 3.1;
                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 );
        camera.lookAt( scene.position );
        renderer.render( scene, camera )
      }
</script>
</html>