threejs 安装教程

嗨，我是小路。今天主要和大家分享的主题是“threejs 安装教程”。

在当今的数字化时代，用户对视觉体验的要求越来越高。传统的2D网页已经无法满足所有需求，而三维（3D）图形技术则为前端开发者提供了新的方向。

Three.js 是一个强大的 JavaScript 库，专门用于创建和展示复杂的3D图形，并且可以直接在浏览器中运行。本文将为你详细介绍在项目开发过程中如何创建vue3项目，并在vue3结合Three.js进行3D网页的开发，帮助你快速入门并创建令人惊叹的3D网页应用。

一、创建vue3项目

1.安装nvm

注意：想要创建vue3项目，前提是安装对应的nodejs。在实际的开发中，我们经常会遇到不同的项目使用不同的nodejs版本，就会出现频繁切换nodejs的情况。为了解决这个问题，推荐小伙伴们使用nvm安装nodejs。具体的安装教程，可以点击查看以下链接：NVM 重新设置开发环境-CSDN博客

2.安装vue3

注意：在安装nvm时，注意下载对应的nodejs版本。这个项目中主要使用的nodejs是18.20.2版本。在nodejs安装完成之后，紧接着安装对应的vite，并运用vite创建vue项目。具体的步骤可以参考以下的npm命令：

#安装vite
npm install vite --save-dev   #创建vue项目
npm create vite myCase1 --template vue#项目初始化  进入到myCase1项目，安装对应的依赖
cd myCase1
npm install
#启动项目
npm run dev

3.安装vue-router

注意：router的安装步骤，可以参考以下链接：
vue3 创建vue-router-CSDN博客

vue2 配置router_vue2 router.js-CSDN博客

二、安装threejs

1、vue安装threejs

// 比如安装148版本
npm install three@0.148.0 --save

3、加载three.js

three.js依赖可以直接在对应的页面中进行加载。如下图：

3、按照概念搭建示例

<template><div class="pageBox"><div class="leftBox" ref="leftRef"></div><div class="rightBox"></div></div></template>
<script setup>
import { onMounted, reactive, ref } from 'vue';
import * as THREE from 'three';
// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 设置相机控件轨道控制器OrbitControls
const leftRef = ref();
// 定义相机输出画布的尺寸(单位:像素px)
let width = 800; //宽度
let height = window.innerHeight; //高度
// 创建3D场景对象Scene
const scene = new THREE.Scene();// 实例化一个透视投影相机对象
const camera = new THREE.PerspectiveCamera(50, width / height, 2, 6000);//创建一个长方体几何对象Geometry
const geometry = new THREE.BoxGeometry(50, 50, 50);//创建一个材质对象Material
const material = new THREE.MeshBasicMaterial({color: 0xff0000,//0xff0000设置材质颜色为红色
});
//将集合形体和材质融合
const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh// 创建渲染器对象
const renderer = new THREE.WebGLRenderer();onMounted(() => {initData()render();//添加相机空间const controls = new OrbitControls(camera, renderer.domElement);// 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景controls.addEventListener('change', function () {renderer.render(scene, camera); //执行渲染操作});//监听鼠标、键盘事件//当窗口发生改变时，触发时间，重新渲染window.onresize = () => {height = window.innerHeight;width = window.innerWidth / 2;renderer.setSize(width, height); //设置three.js渲染区域的尺寸(像素px)initData()}
})
const initData = () => {//设置网格模型在三维空间中的位置坐标，默认是坐标原点mesh.position.set(0, 10, 0);scene.add(mesh);//相机在Three.js三维坐标系中的位置// 根据需要设置相机位置具体值camera.position.set(200, 200, 200);camera.lookAt(mesh.position);//指向mesh对应的位置// AxesHelper：辅助观察的坐标系const axesHelper = new THREE.AxesHelper(150);scene.add(axesHelper);renderer.setSize(width, height); //设置three.js渲染区域的尺寸(像素px)//将innerHTML置空，避免append重复添加渲染leftRef.value.innerHTML = ''leftRef.value.append(renderer.domElement);
}
//渲染
const render = () => {renderer.render(scene, camera); //执行渲染操作mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度mesh.rotateX(0.01);//每次绕x轴旋转0.01弧度mesh.rotateZ(0.01);//每次绕z轴旋转0.01弧度//重复渲染requestAnimationFrame(render);//请求再次执行渲染函数render，渲染下一帧
}</script>
<style scoped lang="less">
.pageBox {width: 100%;height: 100vh;padding: 0;margin: 0;display: flex;justify-content: space-between;align-items: center;.rightBox {width: 100%;height: 100%;background: yellow;}
}
</style>