Vue3+ts+threejs+vite项目搭建

simp-lickingdog

已于 2024-04-03 15:54:31 修改

阅读量865

点赞数 4

文章标签： vue.js 前端 web typescript

于 2024-03-20 17:33:41 首次发布

本文链接：https://blog.csdn.net/qq_45929977/article/details/136883535

版权

本文介绍了如何使用Vue3、TypeScript、Three.js和Vite框架快速搭建项目，包括安装依赖、创建基本结构、添加3D模型、设置相机和渲染器，以及解决bodymargin影响canvas显示的问题。

摘要由CSDN通过智能技术生成

Vue3+ts+threejs+vite项目搭建

参考:

vue3 +ts +three.js+ vite 快速入门

02-项目搭建与模型加载

VUE_vue去掉自带的body margin 8px

项目搭建

新建项目

项目名称:vue-ts-threejs-first

npm create vite vue-ts-threejs-first --template vue-ts

选择项目框架为vue
在这里插入图片描述
选择语言为TypeScript

切换到该文件夹中

cd .\vue-ts-threejs-first\

安装依赖

安装threejs依赖。本例中使用的threejs版本为v0.162.0

npm install three@0.162.0

查看依赖安装情况，确保已经安装完成
在这里插入图片描述

threejs Demo

App.vue


<template>
  <div></div>
</template>

<script setup lang="ts">
import * as THREE from "three";
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

// 初始化场景
const scene = new THREE.Scene();

// 创建相机
const camera = new THREE.PerspectiveCamera(
  75, //视角
  window.innerWidth / window.innerHeight, //宽高比
  0.1, // 近平面
  1000 // 远平面
);

// 设置相机位置
camera.position.set(2,2,5);
// 设置相机朝向点
camera.lookAt(0, 0, 0);

// 创建渲染器
const renderer = new THREE.WebGLRenderer({
  //设置抗锯齿
  antialias:true,
});
// 设置渲染器大小为窗口大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 添加到界面中
document.body.appendChild(renderer.domElement);


// 添加轨道控制器(控制的是相机)
const controls = new OrbitControls(camera, renderer.domElement);
// 设置带阻尼的惯性
controls.enableDamping = true;
// 设置阻尼系数，系数越小惯性越大
controls.dampingFactor = 0.05;

// 鼠标控制
controls.mouseButtons = {
  //左键平移
  LEFT: THREE.MOUSE.PAN,
  //滚轮滑动
  MIDDLE: THREE.MOUSE.DOLLY,
  //右键旋转
  RIGHT: THREE.MOUSE.ROTATE,
};


//----------------------
// 添加具体的代码

// 创建几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);
// 创建材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// 创建网格
const cube = new THREE.Mesh(geometry, material);
// 添加进场景中
scene.add(cube);



// 循环渲染
function render() {
  controls.update();

  // 每帧执行此函数
  requestAnimationFrame(render);

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

}

render();

// 监听窗口变化更新renderer
window.addEventListener("resize", () => {
  // console.log("resize");
  // 重置渲染器宽高比
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 重置相机宽高比
  camera.aspect = window.innerWidth / window.innerHeight;
  // 更新相机投影矩阵
  camera.updateProjectionMatrix();
});
</script>


<style scoped>
/* 铺满整个网页 */
*{
  margin:0;
  padding: 0;
}
/* 设置画布canvas铺满，并位于左上角 */
canvas{
  width:100vw;
  height:100vh;
  position:fixed;
  left:0;
  top:0;
}
</style>

ps:可以将/src/components/文件夹下的HelloWorld.vue删除，此文件已无用

设置App样式

/* 铺满整个网页 */
*{
  margin:0;
  padding: 0;
}
/* 设置画布canvas铺满，并位于左上角 */
canvas{
  width:100vw;
  height:100vh;
  position:fixed;
  left:0;
  top:0;
}

取消使用style.css样式

打开main.ts注释import ''./style.css'

main.ts

import { createApp } from 'vue'
// import './style.css'
import App from './App.vue'

createApp(App).mount('#app')

运行项目

npm run dev

最终效果

在这里插入图片描述

其他说明

如果出现如下效果，网页中body样式出现margin:8px，导致canvas设置了与网页一样大小但是由于body的margin并不是0，导致canvas左上角与网页存在空隙，右侧和下面出现滑动条。
在这里插入图片描述
解决方式
当前仅能解决左上角的空隙，即是的body样式中的margin:8px无效。并未解决右侧和下面的出现滑动条问题。
找到vue项目中的index.html文件，添加标签<style></style>，设置body样式
index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue + TS</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
<style>
  body{
    margin: 0;
    padding: 0;
  }
</style>