ThreeJs场景、相机、渲染器、添加obj模型和删除模型

最新推荐文章于 2024-02-28 10:10:26 发布

佩奇2001

最新推荐文章于 2024-02-28 10:10:26 发布

阅读量2k

点赞数 4

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_62422835/article/details/128616356

版权

相机

效果图

1.安装threeJs

npm install three

2.安装加载obj和mtl文件的插件

npm i --save three-obj-mtl-loader

3.安装轨道控件插件

npm install three-orbit-controls

4.引入

// threeJs
import * as THREE from "three";
// 轨道控件插件
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
//obj
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
//mtl
import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader";

5.变量

      // 场景
      scene: "",
      // 控制器
      controls: '',
      // 相机
      camera: "",
      // 渲染
      renderer: "",

6.加载模型

 /**加载模型 */
    loadPlant() {
      let that = this;

      let objLoader = new OBJLoader();
      let mtlLoader = new MTLLoader();
      mtlLoader.load('static/model/0112/red.mtl', function (materials) {
        materials.preload();
        objLoader.setMaterials(materials);
        objLoader.load('static/model/0112/red.obj', function (obj) {
          // console.log(obj.children[0]);
          obj.scale.set(1, 1, 1);
          // obj.children[0].receiveShadow = true;//允许接收阴影
          // obj.children[0].geometry.center(); //网格模型的几何体居中
          that.scene.add(obj);
          that.object = obj;
          // console.log(that.scene, "that.scene");
        },
          function (xhr) {
            console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
          },
          function (error) {
            console.log(error, "An error happened");
          }
        );
      }
      );

    },

7.场景

 initScene() {
      this.scene = new THREE.Scene();
      // const ambientLight = new THREE.AmbientLight(0xcccccc, 0.4);
      // this.scene.add(ambientLight);
      var axesHelper = new THREE.AxesHelper(15);
      this.scene.add(axesHelper);
    },

8.相机+灯光

initCamera() {
      const aspect = window.innerWidth / innerHeight; //宽高可根据实际项目要求更改 如果是窗口高度改为innerHeight
      // this.camera = new THREE.PerspectiveCamera(45, aspect, 1, 2000);
      this.camera = new THREE.PerspectiveCamera(45, aspect, 1, 2000);
      // this.camera.position.set(100, 100, 100);
      this.camera.position.set(100, 100, 200);
      this.camera.name = "相机";
      this.camera.lookAt(this.scene.position); //设置相机方向(指向的场景对象)

      var directionalLight = new THREE.DirectionalLight(0xffffff, 1.5) //方向光
      directionalLight.position.set(1000, 1000, 1000)
      directionalLight.castShadow = true;
      directionalLight.shadow.camera.near = 0.5;
      directionalLight.shadow.camera.far = 300;
      directionalLight.shadow.camera.left = -50;
      directionalLight.shadow.camera.right = 50;
      directionalLight.shadow.camera.top = 200;
      directionalLight.shadow.camera.bottom = -100;
      this.scene.add(directionalLight)

     
    },

9.控制器

initOrbitControls() {
      let controls = new OrbitControls(this.camera, this.renderer.domElement);
      this.controls = controls;
    },

10.渲染器

 initRenderer() {
      this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
      // 渲染器Renderer开启阴影计算
      this.renderer.setPixelRatio(window.devicePixelRatio);
      this.renderer.setSize(window.innerWidth, innerHeight);
      this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
      this.container = document.getElementById("container");
      this.container.appendChild(this.renderer.domElement);
     
    },

11动画

 animate() {
      //执行渲染操作
      this.renderer.render(this.scene, this.camera);
      this.requestId = requestAnimationFrame(this.animate);
    },

12.初始化

 init() {
      this.initScene();
      this.initCamera();
      this.initRenderer();
      this.initOrbitControls();
    },

13.mounted调用

 mounted() {
    this.loadPlant();
    this.init();
    this.animate();

  },

如果模型加载不出来看看是否是以下原因

1.引用的路径有没有问题

2.是不是没有把模型放在静态目录下我这里放在public目录下static下面

3.是不是模型太大了或者太小了调整一下模型大小

4.mtl文件中的Tr值置为0或者将此行删除，Tr值是透明度的意思

14.删除模型

 // 删除
    del() {
      // this.scene.children[2]是模型
      this.deleteObject(this.scene.children[2])
      this.animate()
    },
    deleteObject(group) {
      if (group) {
        group.traverse(function (item) {
          if (item instanceof THREE.Mesh) {
            if (Array.isArray(item.material)) {
              item.material.forEach(a => {
                a.dispose()
              })
            } else {
              item.material.dispose() // 删除材质
            }
            item.geometry.dispose() // 删除几何体
          }
          item = null
        })
        // 删除场景对象scene的子对象group
        this.scene.remove(group);
      }

    },

全部代码

<template>
  <div id="app">
    <div class="center">
      <button @click="del">删除</button>
      <div id="container" ref="container"></div>
      <canvas id="canvas" style="display: none">你的浏览器不支持canvas</canvas>
    </div>
  </div>
</template>

<script>

import * as THREE from "three";
// 轨道控件插件
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader";

export default {
  data() {
    return {
      // 场景
      scene: "",
      // 控制器
      controls: '',
      // 相机
      camera: "",
      // 渲染
      renderer: "",

    };
  },
  methods: {
    // 删除
    del() {
      // this.scene.children[2]是模型
      this.deleteObject(this.scene.children[2])
      this.animate()
    },
    deleteObject(group) {
      if (group) {
        group.traverse(function (item) {
          if (item instanceof THREE.Mesh) {
            if (Array.isArray(item.material)) {
              item.material.forEach(a => {
                a.dispose()
              })
            } else {
              item.material.dispose() // 删除材质
            }
            item.geometry.dispose() // 删除几何体
          }
          item = null
        })
        // 删除场景对象scene的子对象group
        this.scene.remove(group);
      }

    },
    /**初始化 */
    initScene() {
      this.scene = new THREE.Scene();
      // const ambientLight = new THREE.AmbientLight(0xcccccc, 0.4);
      // this.scene.add(ambientLight);
      var axesHelper = new THREE.AxesHelper(15);
      this.scene.add(axesHelper);
    },
    initCamera() {
      const aspect = window.innerWidth / innerHeight; //宽高可根据实际项目要求更改 如果是窗口高度改为innerHeight
      // this.camera = new THREE.PerspectiveCamera(45, aspect, 1, 2000);
      this.camera = new THREE.PerspectiveCamera(45, aspect, 1, 2000);
      // this.camera.position.set(100, 100, 100);
      this.camera.position.set(100, 100, 200);
      this.camera.name = "相机";
      this.camera.lookAt(this.scene.position); //设置相机方向(指向的场景对象)

      var directionalLight = new THREE.DirectionalLight(0xffffff, 1.5) //方向光
      directionalLight.position.set(1000, 1000, 1000)
      directionalLight.castShadow = true;
      directionalLight.shadow.camera.near = 0.5;
      directionalLight.shadow.camera.far = 300;
      directionalLight.shadow.camera.left = -50;
      directionalLight.shadow.camera.right = 50;
      directionalLight.shadow.camera.top = 200;
      directionalLight.shadow.camera.bottom = -100;
      this.scene.add(directionalLight)


    },
    initRenderer() {
      this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
      // 渲染器Renderer开启阴影计算
      this.renderer.setPixelRatio(window.devicePixelRatio);
      this.renderer.setSize(window.innerWidth, innerHeight);
      this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
      this.container = document.getElementById("container");
      this.container.appendChild(this.renderer.domElement);

    },
    // 初始化控制器
    initOrbitControls() {
      let controls = new OrbitControls(this.camera, this.renderer.domElement);
      this.controls = controls;
    },
    animate() {
      //执行渲染操作
      this.renderer.render(this.scene, this.camera);
      this.requestId = requestAnimationFrame(this.animate);
    },
    init() {
      this.initScene();
      this.initCamera();
      this.initRenderer();
      this.initOrbitControls();
    },
    /**加载模型 */
    loadPlant() {
      let that = this;

      let objLoader = new OBJLoader();
      let mtlLoader = new MTLLoader();
      mtlLoader.load('static/model/0112/red.mtl', function (materials) {
        materials.preload();
        objLoader.setMaterials(materials);
        objLoader.load('static/model/0112/red.obj', function (obj) {
          // console.log(obj.children[0]);
          obj.scale.set(1, 1, 1);
          // obj.children[0].receiveShadow = true;//允许接收阴影
          // obj.children[0].geometry.center(); //网格模型的几何体居中
          that.scene.add(obj);
          that.object = obj;
          // console.log(that.scene, "that.scene");
        },
          function (xhr) {
            // console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
          },
          function (error) {
            console.log(error, "An error happened");
          }
        );
      }
      );

    },



  },

  mounted() {
    this.loadPlant();
    this.init();
    this.animate();

  },
};
</script>
<style lang="less">
</style>

效果如下