前言：

        页面渲染3D特效，可以从各种图表库（例如ECharts）中寻找各种适用的模版，也可以寻找第三方插件。。。

                一直以来都对three.js充满向往，终于偷闲找了个借口学了起来

参考资料

Three.js – JavaScript 3D Libraryhttps://threejs.org/Three.js中文网提供Three.js、WebGL视频课程http://www.webgl3d.cn/项目环境介绍：vue3+ts+vite

一、安装

yarn add three

 yarn add @types/three -D

二、引用

1、安装成功后，首先在env.d.ts同级目录下创建three.d.ts，并且申明下载文件

declare module 'three'

declare module 'three/addons/controls/OrbitControls.js'

三、简单使用

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as THREE from 'three'
// 导入轨道控制器
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

const container = ref<HTMLDivElement>()

// 创建场景
const scene = new THREE.Scene()

// 创建相机对象
const camera = new THREE.PerspectiveCamera(
	75,
	window.innerWidth / window.innerHeight,
	0.1,
	1000
)
// 设置相机位置
camera.position.set(0, 0, 10)
scene.add(camera)

// 添加物体
// 创建几何体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1)
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 })
// 根据几何体和材质创建物体
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
// 修改元素位置
// cube.position.x = 2
// 缩放
// cube.scale.x = 2
// 旋转
cube.rotation.set(Math.PI / 4, 0, 0, 'XYZ')
// 将几何体添加到场景中
scene.add(cube)

// 初始化渲染器
const renderer = new THREE.WebGLRenderer()
renderer.setClearColor(new THREE.Color(0xeeeeee))
// 设置three.js渲染区域的尺寸(像素px)
renderer.setSize(window.innerWidth, window.innerHeight)

// 创建控制器
const controls = new OrbitControls(camera, renderer.domElement)

// 坐标轴
const axesHelper = new THREE.AxesHelper(10)
scene.add(axesHelper)
// 渲染
const render = () => {
	controls.update()
	renderer.render(scene, camera) // 执行渲染操作
	requestAnimationFrame(render)
}

onMounted(() => {
	container.value?.appendChild(renderer.domElement)
	render()
})
</script>

<template>
	<div ref="container" class="container"></div>
</template>
<style scoped lang="scss">
.container {
	height: 100%;
	width: 100%;
}
</style>