前端项目实战之Vue3.0+Three.js+TypeScript+Vite搭建一个设备数字化三维展厅（一）

最新推荐文章于 2024-06-20 09:32:03 发布
最新推荐文章于 2024-06-20 09:32:03 发布
阅读量2.1k 收藏 14
点赞数 1
分类专栏： vue JavaScript 文章标签： typescript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25482087/article/details/124647591
版权

效果预览

机器人运动展示

项目结构

引用组件

Vue3.0+Vite

npm create vite   
npm i @types/node --save-dev

vue-router

npm i vue-router --save-dev
  • 1.新建一个router目录
  • 2.在router目录下创建一个index.ts文件
    • 2.1.在目录中添加需要路由的模块
    • 2.2.设置路由模式
  • 3.在main.ts中引入router

threejs

  1. 安装 three.js的type
  2. 安装 three
npm i @types/three --save-dev
npm i three --save-dev

创建场景


/** 创建场景 */
const setScene = () => {
  scene = new Scene();
  renderer = new WebGLRenderer();
  renderer.physicallyCorrectLights = true;
  renderer.shadowMap.enabled = true;
  renderer.setSize(innerWidth, innerHeight);
  renderer.setClearColor(0xc9c9c9, 1);
  document.querySelector(".boxs").appendChild(renderer.domElement);
};

设置相机

/** 创建相机 */
const setCamera = () => {
  const { x, y, z } = defaultMap;
  camera = new PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
  camera.position.set(x, y, z);
};

创建灯光

/** 设置场景灯光 */
const setLight = () => {
  directionalLight = new DirectionalLight(0xffffff, 5);
  directionalLight.position.set(-4, 8, 4);
  dhelper = new DirectionalLightHelper(directionalLight, 5, 0xff0000);
  hemisphereLight = new HemisphereLight(0xffffff, 0xffffff, 5);
  hemisphereLight.position.set(0, 8, 0);
  hHelper = new HemisphereLightHelper(hemisphereLight, 5);
  scene.add(directionalLight, hemisphereLight);
  ambientLight = new AmbientLight(0xffffff, 5);
  ambientLight.position.set(0, 10, 0);
  scene.add(ambientLight);
};

导入模型

/** 通过Promise处理一下loadfile函数 */
const loadFile = (url): any => {
  loader = new GLTFLoader();
  return new Promise((resolve, reject) => {
    loader.load(
      url,
      (gltf) => {
        resolve(gltf);
      },
      ({ loaded, total }) => {
        let load = Math.abs((loaded / total) * 100);
        loadingWidth.value = load;
        if (load >= 100) {
          setTimeout(() => {
            isLoading.value = false;
          }, 1000);
        }
        console.log(load + "% loaded");
      },
      (err) => {
        reject(err);
      }
    );
  });
};

const loadFBX = (url) => {
  const loader = new FBXLoader();
  return new Promise((resolve, reject) => {
    loader.load(
      url,
      (fbx) => resolve(fbx),
      ({ loaded, total }) => {
        let load = Math.abs((loaded / total) * 100);
        loadingWidth.value = load;
        if (loaded >= 100) {
          setTimeout(() => {
            isLoading.value = false;
          }, 1000);
        }
        console.log(load + "% loaded");
      }
    );
  });
};
添加stats监控
const addStats = () => {
  stats = Stats();
  document.querySelector(".boxs").appendChild(stats.domElement);
};
设置轨道控制
/** 设置轨道控制器 */
const setControls = () => {
  controls = new OrbitControls(camera, renderer.domElement);
  /**  */
  controls.maxPolarAngle = (0.9 * Math.PI) / 2;
  /** 是否开启缩放 */
  controls.enableZoom = true;
  /** 是否开启右键拖拽 */
  controls.enablePan = true;
  controls.addEventListener("change", render);
};

添加TWEEN动画

/** 设置模型动画 */
const setTweens = (obj, newObj, duration = 1500) => {
  var ro = new TWEEN.Tween(obj);
  ro.to(newObj, duration); // 变化后的位置以及动画时间
  ro.easing(TWEEN.Easing.Sinusoidal.InOut);
  ro.onUpdate(function () {});
  ro.onComplete(function () {});
  ro.start();
};

完整代码

<template>
  <div class="boxs">
    <div class="maskLoading" v-if="isLoading">
      <div class="loading">
        <div :style="{ width: loadingWidth + '%' }"></div>
      </div>
      <div style="padding-left: 10px">{{ parseInt(loadingWidth) }}%</div>
    </div>
    <div class="mask">
      <p>x : {{ x }} y:{{ y }} z :{{ z }}</p>
      <button @click="autoRotate">转动</button>
      <button @click="stopRotate">停止</button>

      <button v-if="robot.robot" @click="robotAnimate">机器人运动</button>
      <button v-if="robot.robot" @click="stopRobotAnimate">机器人停止</button>

      <div class="flex">
        <div
          @click="setColor(index)"
          v-for="(item, index) in colorArray"
          :style="{ backgroundColor: item }"
          :key="index"
        ></div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, toRefs } from "vue";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
import {
  Scene,
  WebGLRenderer,
  PerspectiveCamera,
  ImageUtils,
  TextureLoader,
  HemisphereLight,
  HemisphereLightHelper,
  DirectionalLight,
  DirectionalLightHelper,
  Color,
  Mesh,
  Group,
  MeshLambertMaterial,
  PlaneGeometry,
  DoubleSide,
  Box3,
  AnimationMixer,
  AmbientLight,
} from "three";

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
import Stats from "three/examples/jsm/libs/stats.module";
// import * as TWEEN from "../../public/tween/dist/tween.esm"
import { TWEEN } from "three/examples/jsm/libs/tween.module.min.js";
let stats = Stats();

let colorArray = [
  "rgb(216, 27, 67)",
  "rgb(142, 36, 170)",
  "rgb(81, 45, 168)",
  "rgb(48, 63, 159)",
  "rgb(30, 136, 229)",
  "rgb(0, 137, 123)",
  "rgb(67, 160, 71)",
  "rgb(251, 192, 45)",
  "rgb(245, 124, 0)",
  "rgb(230, 74, 25)",
  "rgb(233, 30, 78)",
  "rgb(156, 39, 176)",
  "rgb(0, 0, 0)",
]; // 车身颜色数组

let scene: Scene,
  renderer: WebGLRenderer,
  camera: PerspectiveCamera,
  directionalLight: DirectionalLight,
  hemisphereLight: HemisphereLight,
  ambientLight: AmbientLight,
  dhelper: DirectionalLightHelper,
  hHelper: HemisphereLightHelper,
  controls: OrbitControls;
let isLoading = ref(true); // 是否显示loading，监听loading模型的进度
let loadingWidth = ref(0); // 加载进度显示
let loader: GLTFLoader; // gltf文件加载器
let car: any = {
  wheel: null,
  main: null,
  door: null,
}; // 加载的汽车模型
let robot: any = {
  robot: null,
  bottom: null,
  armHeader: null,
  sole: null,
  arm001: null,
  fork001: null,
  pully001: null,
  tong001: null,
  mixer2: null,
};
let textureLoader = new TextureLoader(); // 材质加载器
let marker;
let orbitControls: OrbitControls;
let animateTime;

//相机的默认坐标
const defaultMap = {
  x: 50,
  y: 10,
  z: 0,
};

let map = reactive(defaultMap); // 把相机坐标设置为可观察对象
let { x, y, z } = toRefs(map); // 输出坐标

/** 创建场景 */
const setScene = () => {
  scene = new Scene();
  renderer = new WebGLRenderer();
  renderer.physicallyCorrectLights = true;
  renderer.shadowMap.enabled = true;
  renderer.setSize(innerWidth, innerHeight);
  renderer.setClearColor(0xc9c9c9, 1);
  document.querySelector(".boxs").appendChild(renderer.domElement);
};

/** 创建相机 */
const setCamera = () => {
  const { x, y, z } = defaultMap;
  camera = new PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
  camera.position.set(x, y, z);
};

/** 设置场景灯光 */
const setLight = () => {
  directionalLight = new DirectionalLight(0xffffff, 5);
  directionalLight.position.set(-4, 8, 4);
  dhelper = new DirectionalLightHelper(directionalLight, 5, 0xff0000);
  hemisphereLight = new HemisphereLight(0xffffff, 0xffffff, 5);
  hemisphereLight.position.set(0, 8, 0);
  hHelper = new HemisphereLightHelper(hemisphereLight, 5);
  scene.add(directionalLight, hemisphereLight);
  ambientLight = new AmbientLight(0xffffff, 5);
  ambientLight.position.set(0, 10, 0);
  scene.add(ambientLight);
};

/** 设置轨道控制器 */
const setControls = () => {
  controls = new OrbitControls(camera, renderer.domElement);
  /**  */
  controls.maxPolarAngle = (0.9 * Math.PI) / 2;
  /** 是否开启缩放 */
  controls.enableZoom = true;
  /** 是否开启右键拖拽 */
  controls.enablePan = true;
  controls.addEventListener("change", render);
};

/** 渲染场景 */
const render = () => {
  map.x = camera.position.x;
  map.y = camera.position.y;
  map.z = camera.position.z;
};

/** 循环渲染 场景 相机 和位置更新 */
const animate = () => {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
  controls.update();
  stats.update();
  TWEEN.update();
};

/** 设置模型动画 */
const setTweens = (obj, newObj, duration = 1500) => {
  var ro = new TWEEN.Tween(obj);
  ro.to(newObj, duration); // 变化后的位置以及动画时间
  ro.easing(TWEEN.Easing.Sinusoidal.InOut);
  ro.onUpdate(function () {});
  ro.onComplete(function () {});
  ro.start();
};

/** 是否自动转动 */
const autoRotate = () => {
  controls.autoRotate = true;
};

/** 停止自动转动 */
const stopRotate = () => {
  controls.autoRotate = false;
};

/** 设置颜色 */
const setColor = (index) => {
  const currentColor = new Color(colorArray[index]);
  scene.traverse((child) => {
    if (child instanceof Mesh) {
      console.log(child.name);
      if (child.name.includes("")) {
        child.material.color.set(currentColor);
      }
    }
  });
};

const loadWithDraco = (module: GLTFLoader, url): any => {
  return new Promise((resovle, reject) => {
    const dracoLoader = new DRACOLoader();
    dracoLoader.setDecoderPath("../../public/models/draco/");

    module.setDRACOLoader(dracoLoader);
    dracoLoader.load(
      url,
      (gltf) => {
        resovle(gltf);
      },
      ({ loaded, total }) => {
        let load = Math.abs((loaded / total) * 100);
        loadingWidth.value = load;
        if (load >= 100) {
          setTimeout(() => {
            isLoading.value = false;
          }, 1000);
        }
        console.log((loaded / total) * 100 + "% loaded");
      },
      (err) => {
        reject(err);
      }
    );
  });
};

/** 通过Promise处理一下loadfile函数 */
const loadFile = (url): any => {
  loader = new GLTFLoader();
  return new Promise((resolve, reject) => {
    loader.load(
      url,
      (gltf) => {
        resolve(gltf);
      },
      ({ loaded, total }) => {
        let load = Math.abs((loaded / total) * 100);
        loadingWidth.value = load;
        if (load >= 100) {
          setTimeout(() => {
            isLoading.value = false;
          }, 1000);
        }
        console.log(load + "% loaded");
      },
      (err) => {
        reject(err);
      }
    );
  });
};

const loadFBX = (url) => {
  const loader = new FBXLoader();
  return new Promise((resolve, reject) => {
    loader.load(
      url,
      (fbx) => resolve(fbx),
      ({ loaded, total }) => {
        let load = Math.abs((loaded / total) * 100);
        loadingWidth.value = load;
        if (loaded >= 100) {
          setTimeout(() => {
            isLoading.value = false;
          }, 1000);
        }
        console.log(load + "% loaded");
      }
    );
  });
};

const processFBX = (obj) => {
  obj.scale.set(0.004, 0.008, 0.004);
  obj.position.set(0, 0, -4);
  obj.rotation.set(0, -41, 0);
  car.wheel = obj.children[1].children[5].children;
  car.wheel.map((cell) => {
    cell.rotation.set(cell.rotation.x, -0.5 * Math.PI, cell.rotation.z);
  });
  console.log("obj:", obj);
  obj.name = "cart";
  car.door = obj.children[1].children[3].children[0].children;
  const texture = textureLoader.load("../../public/models/marker3.png");
  car.main = [
    obj.children[1].children[0],
    ...obj.children[1].children[1].children,
    ...obj.children[1].children[3].children,
  ];
  car.trim = [
    ...obj.children[1].children[2].children,
    ...obj.children[1].children[4].children,
    ...obj.children[1].children[6].children,
  ];
  const marker = new Mesh( // 创建平面
    new PlaneGeometry(1, 1),
    new MeshLambertMaterial({
      map: texture,
      aoMapIntensity: 0,
      side: DoubleSide,
      opacity: 0.1,
      transparent: true,
      depthTest: false,
    })
  );
  car.marker = marker;
  marker.position.set(2.5, 3, 3);
  marker.rotation.y = 0.5 * Math.PI;
  var group = new Group();
  group.add(obj);
  group.add(marker);
  scene.add(group);
};

const addStats = () => {
  stats = Stats();
  document.querySelector(".boxs").appendChild(stats.domElement);
};

const robotAnimate = () => {
  //   robot.robot = gltf;
  //   console.log(gltf);
  //   robot.robot = gltf;
  //   robot.bottom = gltf.scene.children[1];

  //   robot.sole = gltf.scene.children[0];
  //   robot.arm001 = gltf.scene.children[0].children[2];
  //   robot.armHeader = gltf.scene.children[0].children[2].children[0];
  //   robot.fork001 = gltf.scene.children[0].children[2].children[0].children[4];
  //   robot.pulley001 =
  //     gltf.scene.children[0].children[2].children[0].children[4].children[4];
  //   robot.tong001 =
  //     gltf.scene.children[0].children[2].children[0].children[4].children[4].children[3];

  const gltf = robot.robot;

  const object = gltf.scene;
  object.position.set(0, 0, 0);
  object.rotation.set(0,-90,0)
  // 中电
  const bbox = new Box3();
  object.traverse(function (node) {
    if (node.isMesh) node.castShadow = true;
    bbox.expandByObject(object);
  });
  // get the animation
  console.log("gltf.animations[0]:", gltf.animations);
  robot.mixer2 = new AnimationMixer(object);
  // that.mixer2.clipAction(gltf.animations[0]).play();
  object.scale.set(1, 1, 1);

  controls.reset(); // 回到初始化视角

  const setCircle = (num: number, upperLimit?, lowerLimit?) => {
    // console.log("before", num);

    if (!!upperLimit && !!lowerLimit) {
      if (num > upperLimit) {
        num = lowerLimit;
      } else if (num < lowerLimit) {
        num = upperLimit;
      }
      return parseFloat((num % 360).toString()).toPrecision(3);
    }
    // console.log("after", num);
  };

  animateTime = setInterval(() => {
    setTweens(
      robot.sole.rotation,
      {
        x: robot.sole.rotation.x,
        y: robot.sole.rotation.y,
        z: setCircle(robot.sole.rotation.z + 1, 360, 0),
      },
      1000
    );

    console.log(
      "sole",
      robot.sole.rotation.x,
      robot.sole.rotation.y,
      robot.sole.rotation.z
    );

    setTweens(
      robot.arm001.rotation,
      {
        x: robot.arm001.rotation.x,
        y: setCircle(robot.arm001.rotation.y + 0.05, 1, -1),
        z: robot.arm001.rotation.z,
      },
      1000
    );

    console.log(
      "arm001",
      robot.arm001.rotation.x,
      robot.arm001.rotation.y,
      robot.arm001.rotation.z
    );

    setTweens(
      robot.armHeader.rotation,
      {
        x: robot.armHeader.rotation.x,
        y: setCircle(robot.armHeader.rotation.y + 0.02, 0.2, -0.4),
        z: robot.armHeader.rotation.z,
      },
      1000
    );

    console.log(
      "armHeader",
      robot.armHeader.rotation.x,
      robot.armHeader.rotation.y,
      robot.armHeader.rotation.z
    );

    setTweens(
      robot.tong001.rotation,
      {
        x: robot.tong001.rotation.x,
        y: robot.tong001.rotation.y,
        z: setCircle(robot.tong001.rotation.z + 1, 360, -360),
      },
      1000
    );

    console.log(
      "tong001",
      robot.tong001.rotation.x,
      robot.tong001.rotation.y,
      robot.tong001.rotation.z
    );
  }, 1000);
};

const stopRobotAnimate = () => {
  clearInterval(animateTime);

  setTimeout(() => {
    setTweens(camera.position, { x: 50, y: 10, z: 0 }, 1000);
    console.log("this.camera.up:", camera.up);
    camera.lookAt(camera.position);
    renderer.render(scene, camera);
    controls.reset(); // 回到初始化视角
    setTimeout(() => {}, 1000);
  }, 1000);
};

//初始化所有函数
const init = async () => {
  console.log(stats);

  setScene();
  setCamera();
  setLight();
  setControls();
  addStats();

  const loader = new GLTFLoader();
  const robotUrl = `../../public/models/zhongzhuan001.glb`;
  const ferarrisUrl = `../../public/models/ferrari.glb`;

  const gltf = await loadFile(robotUrl);

  if (gltf?.scene?.children[0].name == "sole") {
    robot.robot = gltf;
    console.log(gltf);
    robot.robot = gltf;
    robot.bottom = gltf.scene.children[1];

    robot.sole = gltf.scene.children[0];
    robot.arm001 = gltf.scene.children[0].children[2];
    robot.armHeader = gltf.scene.children[0].children[2].children[0];
    robot.fork001 = gltf.scene.children[0].children[2].children[0].children[4];
    robot.pulley001 =
      gltf.scene.children[0].children[2].children[0].children[4].children[4];
    robot.tong001 =
      gltf.scene.children[0].children[2].children[0].children[4].children[4].children[3];

    console.log(robot);
  }

  //const fbx = await loadFBX("../../public/models/MBSL.fbx");
  //processFBX(fbx);

  console.log(gltf);

  scene.add(gltf.scene);

  animate();
};
//用vue钩子函数调用
onMounted(init);
</script>
<style scoped>
body {
  margin: 0;
}

.maskLoading {
  background: #ccc;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1111111;
  color: #fff;
}

.maskLoading .loading {
  width: 400px;
  height: 20px;
  border: 1px solid #fff;
  background: #000;
  overflow: hidden;
  border-radius: 10px;
}

.maskLoading .loading div {
  background: #fff;
  height: 20px;
  width: 0;
  transition-duration: 500ms;
  transition-timing-function: ease-in;
}

canvas {
  width: 100%;
  height: 100%;
  margin: auto;
}

.mask {
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
  justify-content: center;
}

.flex div {
  width: 10px;
  height: 10px;
  margin: 5px;
  cursor: pointer;
}
</style>

注意事项

  • vue-router
  • vue3.0 setup模式
  • 引用文件路径
  • 引用页面组件

稍后整理后将上传源代码

https://github.com/cugzhaolei/three-v.git

参考链接

Vite 官方中文文档
vue3.0添加路由router
vue3.0配置vue-router
用最简单方式打造Three.js 3D汽车展示厅

Three_ST
关注
  • 1
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue2，3+js+ts的three.js 项目，一共四个项目 ，厂房，机台，楼层显示
07-17
vue2，3+js+ts的three.js 项目，一共四个项目 ，厂房，机台，楼层显示
Vue3 + Three.js 商城可视化实战
04-06
在本项目"Vue3 + Three.js 商城可视化实战"中，我们将探讨如何结合现代前端框架Vue3与3D图形库Three.js，构建一个具有高度交互性和视觉吸引力的虚拟商城。Vue3提供了强大的组件化开发模式，而Three.js则是JavaScript...
three.js+vue3打造VR掌上博物馆
04-23
本课程通过three.js+vue3框架打造掌上VR博物馆，可以在手机端和PC端全方位观察文物和书画。通过本次课程您将学会：1.vue3开发环境搭建及基本用法。2.three.js基本用法及操作模型。3.书画及文物的渲染及操作。4.如何利用手机来对现实中的文物进行3D建模。
探索TypeScript与Three.js的完美结合：`@types/three`
最新发布
gitblog_00084的博客
06-20 337
探索TypeScript与Three.js的完美结合：@types/three 项目地址:https://gitcode.com/three_types/three-ts-types 在3D可视化领域，Three.js无疑是前端开发者心中的明星库，它简化了WebGL的复杂性，让网页上的3D体验触手可及。而今天，我们要深入探讨的是一个不可或缺的伙伴——TypeScript类型定义项目：TypeScr...
three.js+vue3+vite教学（一、项目初始化）
随便写写
02-02 748
three.js+vue3+vite教学，后面会把代码方法gitee上，会教大家three的基础用法，并书写一些demo
智慧校园-数字孪生
qq_36412635的博客
05-22 1516
介绍 使用 vue 结合 threejs 搭建 3D 校园数字孪生。支持整合校园现有信息系统的数据资源，全面实现校园智能化健康监控。 视频演示 视频地址：https://www.bilibili.com/video/BV15L4y157M2 源码获取方式 微信：18239981062 官网地址 官网地址： http://hesy.mincox.cn ...
vue3.0 + threejs 在vue中的基本使用
zlguaizhang的博客
10-26 419
学习threejs的基本使用
three.js+vue3+vite教学（四、监控性能，交互控制）
随便写写
02-02 756
three.js+vue3+vite教学，后面会把代码方法gitee上，会教大家three的基础用法，并书写一些demo
前端 vue3.0 + typescript 三维可视化数字城市数字孪生选用 cesium开源GIS 加入主流地图 Web
04-13
前端开发中，结合Vue 3.0和TypeScript技术，实现了一款强大的三维可视化数字城市和数字孪生应用。通过整合开源GIS工具Cesium，为用户提供了丰富的地图数据展示和交互体验。利用WebGL技术，展现出流畅的地图效果，让...
个Vite+Vue3+TypeScript+Cesium.js集成模板是一个开箱即用的项目模板
04-01
这个Vite+Vue3+TypeScript+Cesium.js集成模板是一个开箱即用的项目模板，旨在帮助开发者快速搭建基于Cesium.js的Vue3应用程序。该模板使用了最新的Vite构建工具和Vue3框架，并集成了TypeScript和Cesium.js技术栈。 ...
Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端）.zip
05-02
Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端），使用了最新的vue3 vite2 Element-Plus TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。 Vue3.0+TypeScript+...
three.js+vue3打造VR掌上博物馆源代码
05-17
这个资源是我自己在CSDN上的视频课程的源代码，课程地址：https://download.csdn.net/course/detail/37135 版权所有，盗版或者拷贝在互联网上传播者，会通过法律途径起诉 购买源代码者，如果有不懂的地方可以私信我，我可以协助购买者把项目跑起来，并且回答购买者提出的问题。 凡盗版者，追究到底！
( 演示例子) NFT 数字藏品 3D 展示方案（obj、mtl、png）引用 three.js
03-27
NFT 数字藏品 3D 展示方案（obj、mtl、png）引用 three.js
three.js+vue3打造VR掌上博物馆源代码--如何启动
liuhao9999的博客
07-03 347
输入 npm run serve,敲回车。大概10几分钟请等待。
Vue3+ThreeJS的简单使用
无敌暗黑暴龙神的博客
12-21 9016
Vue3中简单使用Three.js,步骤清晰,一看就会
使用vue3创建一个简单的threeJS实例（学习笔记）
yancy_peng的博客
03-22 442
一个关于使用vue3+ts+threeJS的学习小demo
Vue实现前端3D展示及node环境搭建
楠鱼的博客
08-18 3826
目录 1.前端Vue的环境配置 1.1 通过cdn方式直接在js代码中引入Vue和Vue-3d-model（新手推荐使用） 1.2 整体的前端代码 1.3 效果 2. 学习中遇到的bug 2.1 Failed to load resource: net::ERR_FAILED 2.2 解决办法：基于nodejs的http-server，以http的形式加载文件 3. Vue及Vue-3d-model官方教程及下载： 最近参加的大创项目涉及到前端的3D模型展示，借此机会学习了Vue以及...
VUE3+ VITE 使用Three.js展示3D模型
Jayce_he的博客
05-11 2626
VUE3+ VITE 使用Three.js展示3D模型
用vue3.0 +vite +pinia +ts搭建一个vue的架子
05-24
好的，下面是搭建 Vue 3.0 + Vite + Pinia + TypeScript 的步骤： 1. 安装 Node.js，推荐使用 LTS 版本。 2. 安装 Vite： ``` npm init vite-app my-project ``` 这里我们使用 Vite 初始化一个新项目，名称为 my-project。 3. 安装依赖： ``` cd my-project npm install ``` 4. 安装 Vue 3.0： ``` npm install vue@next ``` 5. 安装 Pinia： ``` npm install pinia ``` 6. 安装 TypeScript： ``` npm install --save-dev typescript ``` 7. 配置 TypeScript： 在项目根目录下创建 `tsconfig.json` 文件，内容如下： ```json { "compilerOptions": { "target": "esnext", "module": "esnext", "strict": true, "jsx": "preserve", "sourceMap": true, "moduleResolution": "node", "esModuleInterop": true, "experimentalDecorators": true, "emitDecoratorMetadata": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true }, "include": ["src/**/*.ts", "src/**/*.tsx", "tests/**/*.ts", "tests/**/*.tsx"], "exclude": ["node_modules"] } ``` 8. 安装 Pinia Devtools（可选）： ``` npm install @pinia/devtools --save-dev ``` 9. 在 `main.ts` 中进行配置： ```typescript import { createApp } from 'vue' import { createPinia } from 'pinia' import App from './App.vue' const app = createApp(App) // 创建 Pinia 实例 const pinia = createPinia() // 将 Pinia 实例挂载到 app 上 app.use(pinia) app.mount('#app') ``` 10. 编写组件： 在 `src` 目录下创建一个 `components` 目录，然后创建一个 `HelloWorld.vue` 组件： ```vue <template> <div> <h1>Hello, {{ name }}</h1> <button @click="increase">Increase</button> <p>{{ count }}</p> </div> </template> <script lang="ts"> import { defineComponent } from 'vue' import { useStore } from 'pinia' export default defineComponent({ name: 'HelloWorld', setup() { const store = useStore() const name = store.getters.getName const count = store.state.count const increase = () => { store.commit('increase') } return { name, count, increase } }, }) </script> ``` 11. 在 `App.vue` 中使用组件： ```vue <template> <HelloWorld /> </template> <script lang="ts"> import { defineComponent } from 'vue' import HelloWorld from './components/HelloWorld.vue' export default defineComponent({ name: 'App', components: { HelloWorld, }, }) </script> ``` 12. 运行项目： ``` npm run dev ``` 至此，我们已经成功搭建了 Vue 3.0 + Vite + Pinia + TypeScript 的项目。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值