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

目标

这节课的目标很简单,通过我们自己的代码可以完成一个页面展现一个fbx

步骤

1. 今天首先我们要使用vscode打开我们的工程
   
2. vscode内**ctrl + `**打开终端 并输入vue ui 打开浏览器终端
   
   3.找一篇vue3+three.js比较近的博客
   
3. 复制里面的代码到Home.vue中,并运行代码,
   1. 发现有个jpg的错误,不要慌,我们找一个jpg放到public下
   2. 把贴图重新指向我们自己的jpg
   3. 继续运行
      
4. 修改index.html中的html和body样式
   
5. 修改main.js的代码
   
6. 重写Home.vue内容

<template>
  <div class="Create"></div>
</template>

<script>
import * as Three from "three";
export default {
  name: "Create",
  data() {
    return {};
  },
  setup() {
    // 1、创建场景和摄像机
    const scene = new Three.Scene();
    // 2、创建摄像机 PerspectiveCamera('视角', '指定投影窗口长宽比', '从距离摄像机多远开始渲染', '截止多远停止渲染100')
    const camera = new Three.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      2,
      1000
    );

    // 3、创建ThreeJs 渲染器
    const renderer = new Three.WebGLRenderer({ antialias: true });
    // 设置渲染器场景大小
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 创建几何模型 BoxGeometry('x轴', '轴', 'z轴')
    const geometry = new Three.BoxGeometry(2, 2, 2);

    // 创建纹理贴图
    const texture = new Three.TextureLoader().load(require("/public/01.jpg"));

    // 添加材质
    // const material = new Three.MeshBasicMaterial({ color: 0x00ff00 })
    const material = new Three.MeshBasicMaterial({ map: texture });

    // 创建网格对象
    const cube = new Three.Mesh(geometry, material);
    // 添加到场景中去
    scene.add(cube);

    // 添加帧渲染
    const animate = () => {
      requestAnimationFrame(animate);

      // 网格旋转
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;

      // 渲染场景
      renderer.render(scene, camera);
    };

    animate();
    // 摄影机空间Z轴
    camera.position.z = 5;

    // 自适应
    window.addEventListener("resize", () => {
      // 初始化摄像机
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();

      // 初始化渲染器尺寸
      renderer.setSize(window.innerWidth, window.innerHeight);
    });
  },
};
</script>

<style lang="scss" scoped>
</style>

7. 得到我们想要的立方体内容
   
8. 完成了所有内容最后需要的就是提交git了