第一步：安装threejs

npm install three
npminstall @types/three -D

第二歩，创建和使用

html部分

<template>
   <div ref="containerRef" class="smian"></div>
</template>

js逻辑部分

<script setup lang="ts">
import {onMounted, ref} from 'vue'
import {
  PerspectiveCamera,
  Scene,
  WebGLRenderer,
  Color,
  AxesHelper,
  PlaneGeometry,
  MeshBasicMaterial,
  Mesh, BoxGeometry,SphereGeometry
} from "three";
const containerRef = ref<HTMLDivElement>()

//创建场景
const scene = new Scene()
//创建相机
const camera = new PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000)
camera.position.set(-30,40,30) //设置相机的位置
camera.lookAt(scene.position)

//创建渲染器
const renderer = new WebGLRenderer()
renderer.setClearColor(new Color(0xeeeeeee))
// renderer.setSize(window.innerWidth,window.innerHeight)
renderer.setSize(1200,600)


//右手坐标系
//红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴.
const axes = new AxesHelper(20)
scene.add(axes)
//添加一个平面几何体
const planeGeometry = new PlaneGeometry(60,20) //创建平面缓冲几何体
const meshBasicMaterial = new MeshBasicMaterial({color:0xcccccc}) //基础网格材质
const plane = new Mesh(planeGeometry,meshBasicMaterial); //网格
plane.rotation.x = -0.5*Math.PI
scene.add(plane)
//创建几何体
const cubeGeometry = new BoxGeometry(4,4,4)
const cubeMaterial = new MeshBasicMaterial({color:0xff0000,wireframe:true})
const cube = new Mesh(cubeGeometry,cubeMaterial)
cube.position.set(2,2,2)
scene.add(cube)

//创建一个球体
const sphereGeometry = new SphereGeometry(5)
const sphereMaterial = new MeshBasicMaterial({
  color:0x7777ff,
  wireframe:true
})
const sphere = new Mesh(sphereGeometry,sphereMaterial)
sphere.position.x = 20
sphere.position.y =4
sphere.position.z =2
scene.add(sphere)

onMounted(()=>{
  containerRef.value?.appendChild(renderer.domElement)
  renderer.render(scene,camera)
})
</script>