前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >加载obj模型和mtl材质文件 Three.js

加载obj模型和mtl材质文件 Three.js

作者头像
周星星9527
发布2021-11-15 13:07:45
6.9K0
发布2021-11-15 13:07:45
举报
文章被收录于专栏:javascript趣味编程

原文:

代码语言:javascript
复制
https://threejs.org/examples/?q=obj#webgl_loader_obj_mtl

代码:

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>obj Viewer</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }

    .label {
      color: #0F0;
      font-family: sans-serif;
      padding: 2px;
      background: rgba(0, 0, 0, .6);
    }
</style>
  <link type="text/css" rel="stylesheet" href="css/index.css">
</head>

<body>
</body>
<script src="src/dat.gui.min.js"></script>
<script src="src/three.min.js"></script>
<script src="src/DDSLoader.js"></script>
<script src="src/MTLLoader.js"></script>
<script src="src/OBJLoader.js"></script>
<script src="src/OrbitControls.js"></script>
<script type="text/javascript">

  var scene = new THREE.Scene();
  var camera, renderer, labelRenderer;

  addLights();
  addCameras();
  addMisc();
  addControllers();
  loadModels();
  render();

  function QueryPara(name) {
    var regExp = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var info = window.location.search.substr(1).match(regExp);
    if (info != null) return unescape(info[2]); return null;
  }

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

  function addLights() {
    var dLight = new THREE.DirectionalLight(0xffffff, 0.5);
    dLight.castShadow = true;
    dLight.position.set(0, 80, 80);
    //Set up shadow properties for the light
    dLight.shadow.camera.near = 20; //产生阴影的最近距离
    dLight.shadow.camera.far = 200; //产生阴影的最远距离
    dLight.shadow.camera.left = -200; //产生阴影距离位置的最左边位置
    dLight.shadow.camera.right = 200; //最右边
    dLight.shadow.camera.top = 200; //最上边
    dLight.shadow.camera.bottom = -80; //最下面
    scene.add(dLight);

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

  function addCameras() {
    var width = window.innerWidth; //
    var height = window.innerHeight; //
    var k = width / height; //
    var s = 100; //
    //
    camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 3000);
    camera.position.set(200, 300, 200); //
    camera.lookAt(scene.position); //

    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(width, height);
    renderer.setClearColor(0xb9d3ff, 1);//
    // 开启阴影支持
    renderer.shadowMap.enabled = true;
    // 阴影类型
    renderer.shadowMap.type = THREE.BasicShadowMap;//THREE.PCFSoftShadowMap;
    document.body.appendChild(renderer.domElement); //body
  }

  function addMisc() {
    scene.add(new THREE.AxesHelper(300));

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


  function addControllers() {
    var controls = new THREE.OrbitControls(camera, renderer.domElement);
  }

  var manager = new THREE.LoadingManager();
  manager.addHandler(/\.dds$/i, new DDSLoader());
  function onProgress(xhr) {
    if (xhr.lengthComputable) {
      var percentComplete = xhr.loaded / xhr.total * 100;
      console.log('model ' + Math.round(percentComplete, 2) + '% downloaded');
    }
  }
  function onError() { }
  function loadModels() {
    var fileName = QueryPara("obj") || 'GateValve';
    new MTLLoader(manager)
      .setPath('models/')
      .load(fileName+'.mtl', function (materials) {
        materials.preload();
        console.log("materials:", materials);
        new OBJLoader(manager)
          .setMaterials(materials)
          .setPath('models/')
          .load(fileName+'.obj', function (obj) {
            obj.scale.set(1, 1, 1);
            obj.position.set(0, 0, 0);
            obj.rotation.x += 0;
            obj.castShadow = true;
            scene.add(obj);
            console.log(obj.children);
          }, onProgress, onError);
      });
  }

  function onWindowResize() {
    var width = window.innerWidth;
    var height = window.innerHeight;

    camera.aspect = width / height;
    camera.updateProjectionMatrix();

    renderer.setSize(width, height);
    render();
  }
</script>

</html>

效果:

(正文完!)

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-11-08,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 传输过程数值模拟学习笔记 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档