乐趣区

关于webgl:加载OBJ和MTL文件

jiezi

HTML 形式 

<!--
 * @Author: yangyuguang
 * @Date: 2022-12-04 17:22:11
 * @LastEditors: yangyuguang
 * @LastEditTime: 2023-01-11 11:19:31
 * @FilePath: / 排行榜初始代码 /test2.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 加载 OBJ 和 MTL 文件 </title>
    <style>
        html,
        body{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        *{
            margin:0;
            padding:0;
        }
    </style>
    <!-- 引入 three.js 三维引擎 -->
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
    <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"></script>
    <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/OBJLoader.js"></script>
    <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/MTLLoader.js"></script>
</head>
<body>
    <script>
        var scene = new THREE.Scene(),
        camera,
        renderer = new THREE.WebGLRenderer();
        /* OBJ 和材质文件 mtl 加载 */
        var OBJLoader = new THREE.OBJLoader(); //obj 加载器
        var MTLLoader = new THREE.MTLLoader();// 材质文件加载器
        MTLLoader.load('./static/material.mtl',function(meterials){console.log(meterials);
            OBJLoader.setMaterials(meterials);
            OBJLoader.load('./static/model.obj',function(obj){
                /* 返回的组对象插入场景中 */
                scene.add(obj)
                obj.children[0].scale.set(5,5,5)// 网络模型播放
            })
        })
        createLight()
        createCamera()
        createRenderer()

        /* 通过 requestAnimationFrame() 操作三维场景 */
        var controls = new THREE.OrbitControls(camera,renderer.domElement); // 创立控件对象
        // 创立一个时钟对象 Clock
        var clock = new THREE.Clock()
        function render(){renderer.render(scene,camera);// 执行渲染操作
            requestAnimationFrame(render) // 申请再次执行渲染函数 render
        }
        render()
        // 正投影相机设置
        function createCamera(){
            var width = window.innerWidth; // 窗口设置
            var height = window.innerHeight;// 窗口高度
            var k = width/height;// 窗口宽高比
            var s = 150;// 三维场景显示范畴管制系数，系数越大，显示的范畴越大
            // 创立相机对象
            camera = new THREE.OrthographicCamera(-s*k,s*k,s,-s,1,1000)
            camera.position.set(200,300,200) // 设置相机地位
            camera.lookAt(scene.position);// 设置相机方向 (指向的场景对象)
        }
        // 透视相机
        function createPerspectiveCamera(){
            var width = window.innerWidth;// 窗口宽度
            var height = window.innerHeight// 窗口高度
            /* 透视投影相机对象 */
            camera= new THREE.PerspectiveCamera(60,width/height,1,1000)
            camera.position.set(200,300,200)// 设置相机地位
            camera.lookAt(scene.position)// 设置相机方向 (指向的场景对象)
        }
        /* 创立渲染器对象 */
        function createRenderer(){renderer.setSize(window.innerWidth,window.innerHeight)// 设置渲染区域尺寸
            renderer.setClearColor(0xb9d3ff,1)// 设置背景色彩
            document.body.appendChild(renderer.domElement)//body 元素中插入 canvas 对象
        }
        /* 创立光源 */
        function createLight(){
            // 点光源
             var point = new THREE.PointLight(0xffffff)
             point.position.set(400,200,300)// 点光源地位
             scene.add(point);// 点光源增加到场景中
            //  环境光
            var ambient = new THREE.AmbientLight(0x444444)
            scene.add(ambient)
        }
    </script>
</body>
</html>

在 vue 中应用

第一种办法应用 three-obj-mtl-loader 插件

应用 npm install three-obj-mtl-loader –save

在组件中引入：import {OBJLoader, MTLLoader} from ‘three-obj-mtl-loader’

应用 OBJLoader 和 MTLLoader 加载文件：

import {OBJLoader,MTLLoader} from "three-obj-mtl-loader"

 // 加载 obj 和 mtl 模型
      let _this = this
      let mtlLoader = new MTLLoader()
      mtlLoader.load('./static/material.mtl',function(materials){materials.preload();
        let objLoader = new OBJLoader()
        objLoader.load('./static/model.obj',function(obj){
          obj.scale.x = obj.scale.y = obj.scale.z = 100
          obj.rotation.y = 500
          let mesh =obj
          mesh.position.y = -50
          _this.scene.add(mesh)
        })
      })

第二种办法应用 vue-3d-model 组件

npm install vue-3d-model –save

引入组件：

import {ModelObj} from 'vue-3d-model'

components: {​    ModelObj},
 data() {
    return {publicPath: process.env.BASE_URL}
  },

应用组件：

    <model-obj
      id="place"
      :src="`${publicPath}model/model.obj`"
      :mtl="`${publicPath}model/material.mtl`"
      backgroundColor="rgb(0,0,0)"
      :scale="{x: 0.8, y: 0.8, z: 0.8}"
    >
    </model-obj>

​ 个别应用这个会存在找不到 obj 模块的状况，这是因为通过了 webpack 的解决, 须要把.obj 文件放到 vue 解决动态文件的文件夹中，vue-cli3 是放在 static 文件夹下，然而 vue-cli3 及之后就须要放到 public 文件夹下，并且在组件中通过 process.env.BASE_URL+public 文件夹下的.obj 文件的门路来援用

退出移动版