[软件设计]vue+threejs+elementUI+larvel+mysql开发企业内网3D模型库(四)

todo-list

1. 把fbx的页面变为component
2. 引入elementplus,这个地方要注意的是我们引入的不是elementui 而是elementplus
3. 把页面做成左侧为导航栏,右侧为fbx页面

step

1. 在依赖中加入elementplus
2. 修改home.vue的内容,改成两个div,在第一个div中加入elementplus组件,第二个div中放fbxview
   
   
3. 去掉three.js中的stats库,让整个场景不显示帧数
   
   
   
   
   
4. 把整个主界面分割成四个区域,第一个为标签复选栏,第二个为对应选中模型的列表,第三个为模型的操作,第四个为模型的预览,为了方便操作可能还会添加弹出窗口,业务暂时没有考虑到,就先放着四个,效果如图
   
5. 把页面转换为component
   
6. 所有修改内容预览及代码
   
   
   
   
   

Home.vue

<template>
  <el-container style="height: 100%">
    <el-aside width="200px" style="overflow-x: hidden">
      <el-menu>
        <el-submenu index="1">
          <template #title
            ><i class="el-icon-message"> </i><span> 大分类A</span></template
          >
          <el-menu-item index="1-1">A.小分类a</el-menu-item>
          <el-menu-item index="1-2">A.小分类b</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-aside
      style="
        width: 200px;
        height: 100%;
        border: 1px solid #eee;
        background-color: #ffe;
        text-align: center;
        vertical-align: middle;
      "
    >
      模型列表 图片+名称
    </el-aside>

    <el-container>
      <el-header style="text-align: center; font-size: 40px">
        <span>可以添加属性,可以添加到项目,可以添加到打包集合</span>
      </el-header>

      <el-main>
        <LoadFBX fbxfilepath="a.fbx"> </LoadFBX>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import LoadFBX from "@/components/LoadFBX.vue";

export default {
  name: "Home",
  components: {
    LoadFBX,
  },
};
</script>

<style lang="scss" scoped>
.el-main {
  padding: 0px;
}
</style>

LoadFBX.vue

<template>
  <div id="fbxdiv" class="LoadFBX"></div>
</template>

<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";

export default {
  name: "LoadFBX",
  props: {
    fbxfilepath: String,
  },
  data() {
    return {};
  },
  mounted() {
    console.log(
      "mounted" + document.getElementById("fbxdiv") + this.fbxfilepath
    );

    const container = document.getElementById("fbxdiv");
    let camera, scene, renderer;
    const clock = new THREE.Clock();
    let mixer;

    const init = () => {
      camera = new THREE.PerspectiveCamera(
        45,
        container.clientWidth / container.clientHeight,
        1,
        2000
      );
      camera.position.set(100, 200, 300);

      scene = new THREE.Scene();
      scene.background = new THREE.Color(0xa0a0a0);

      const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444);
      hemiLight.position.set(0, 200, 0);
      scene.add(hemiLight);

      const dirLight = new THREE.DirectionalLight(0xffffff);
      dirLight.position.set(0, 200, 100);
      dirLight.castShadow = true;
      dirLight.shadow.camera.top = 180;
      dirLight.shadow.camera.bottom = -100;
      dirLight.shadow.camera.left = -120;
      dirLight.shadow.camera.right = 120;
      scene.add(dirLight);

      // ground
      const mesh = new THREE.Mesh(
        new THREE.PlaneGeometry(2000, 2000),
        new THREE.MeshPhongMaterial({ color: 0x999999, depthWrite: false })
      );
      mesh.rotation.x = -Math.PI / 2;
      mesh.receiveShadow = true;
      scene.add(mesh);

      const grid = new THREE.GridHelper(2000, 20, 0x000000, 0x000000);
      grid.material.opacity = 0.2;
      grid.material.transparent = true;
      scene.add(grid);

      // model
      const loader = new FBXLoader();
      loader.load(
        "http://localhost/myfbx.php?filepath=" + this.fbxfilepath,
        function (object) {
          mixer = new THREE.AnimationMixer(object);

          if (object.animations[0] != null) {
            const action = mixer.clipAction(object.animations[0]);
            action.play();
          }

          object.traverse(function (child) {
            if (child.isMesh) {
              child.castShadow = true;
              child.receiveShadow = true;
            }
          });

          scene.add(object);
        }
      );

      renderer = new THREE.WebGLRenderer({ antialias: true });
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(container.clientWidth, container.clientHeight);

      renderer.shadowMap.enabled = true;
      container.appendChild(renderer.domElement);

      const controls = new OrbitControls(camera, renderer.domElement);
      controls.target.set(0, 100, 0);
      controls.update();

      window.addEventListener("resize", onWindowResize);

      // stats
      //stats = new Stats();
      //container.appendChild(stats.dom);
    };

    const onWindowResize = () => {
      camera.aspect = container.clientWidth / container.clientHeight;
      camera.updateProjectionMatrix();

      renderer.setSize(container.clientWidth, container.clientHeight);
    };

    const animate = () => {
      requestAnimationFrame(animate);
      const delta = clock.getDelta();
      if (mixer) mixer.update(delta);
      renderer.render(scene, camera);
      //stats.update();
    };

    init();
    animate();
  },
};
</script>

<style lang="scss" scoped>
#fbxdiv {
  width: 100%;
  height: 100%;
}
</style>