当前位置：首页 > news >正文

threejs 安装教程

news 来源：原创 2025/5/19 2:14:31

嗨，我是小路。今天主要和大家分享的主题是“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>