vue3简单实现Three.js

依赖安装

npm install three

如果有用 typeScript 安装

npm install @types/three

开始建一个.vue文件准备一个空的模板

在这里插入图片描述

我们需要给生成的canvas准备一个容器

<template>
    <div id="three"></div>
</template>

引入Threejs依赖

<script lang='ts' setup>
import {
    
     reactive, ref, onMounted } from 'vue';
import * as THREE from 'three'
</script>

1.创建场景 scene

//创建一个三维场景
const scene = new THREE.Scene()
//添加光源 这里添加了两个光源
//AmbientLight：环境光源，均匀照亮所有物体，防止有些光源照射不到呈现不出来
//PointLight：点光源，类似灯泡发出的光，可以投射阴影，使模型更加立体
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5),
    pointLight = new THREE.PointLight(0xffffff, 0.4)
    
//设置点光源所在位置
pointLight.position.set(200,300,400)

//每创建一个object都需要将其添加到三维场景中 将环境光源和点光源添加到场景中
scene.add(ambientLight)
scene.add(pointLight)

2.创建相机 camera

//创建一个透视相机camera  这里的width、height是整个画布的宽高度
const width = window.innerWidth, height = window.innerHeight  ,
const camera = new THREE.PerspectiveCamera(45, width/height, 1, 1000)
//设置相机位置
camera.position.set(200,200,200) 
//设置相机方向
camera.lookAt(0,0,0)

到此时只是创建了场景和场景中的光源、还有相机位置，还没有把scene和camera渲染到
canvas容器内，所以在页面上还是没有效果的，我们需要借助webGL渲染器把他们渲染到页面上

3.创建WebGL渲染器 renderer

//创建一个WebGL渲染器 这里的width、height是整个画布的宽高度
const renderer = new THREE.WebGLRenderer()
renderer.setSize(width,height)
renderer.render(scene,camera

4.放入canvas容器内

onMounted(()=>{
    
    
  document.getElementById('three')?.appendChild(renderer.domElement)
})

效果如下
在这里插入图片描述

5.创建辅助坐标轴要在渲染器之前创建并添加到scene.add()


//创建辅助坐标轴
const axesHelper = new THREE.AxesHelper(100)
scene.add(axesHelper)


//创建一个WebGL渲染器 width、height是整个画布的宽高度
const renderer = new THREE.WebGLRenderer()

renderer.setSize(width,height)
renderer.render(scene,camera)

效果如下
在这里插入图片描述

辅助线对应 x y z轴如下在这里插入图片描述

6.创建一个物体也要在渲染器之前创建并添加到scene.add()

//创建辅助坐标轴
const axesHelper = new THREE.AxesHelper(100)
scene.add(axesHelper)

//创建一个物体（形状）
const geometry = new THREE.BoxGeometry(100, 100, 100)
// //创建材质（外观）
const material = new THREE.MeshLambertMaterial({
    
    
    color: 0x00ffff,//设置材质颜色
    transparent: true,//开启透明度
    opacity: 0.5 //设置透明度
})
// //创建一个网格模型对象,将上面设置好的物体及其材质注入到模型对象中
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

//创建一个WebGL渲染器 width、height是整个画布的宽高度
const renderer = new THREE.WebGLRenderer()

renderer.setSize(width,height)
renderer.render(scene,camera)

在这里插入图片描述
此时我们鼠标不能对物体做旋转或者拉进的控制
所以需要使用轨道控制器来对模型增加一些简单功能
引入轨道控制器

//引入轨道控制器（用来通过鼠标事件控制模型旋转、缩放、移动），没有这个需求可不引入
import {
    
     OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

7.创建轨道控制器

//创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)
//添加事件监听 当事件发生改变时触发
controls.addEventListener('change',()=>{
    
    
    //重新渲染
    renderer.render(scene, camera)
})

在这里插入图片描述
完整代码

<template>
    <div id="three"></div>
</template>
<script lang='ts'>
export default {
    
    
name: 'three',
};
</script> 
<script lang='ts' setup>
import {
    
     reactive, ref, onMounted } from 'vue';
import * as THREE from 'three'
//引入轨道控制器（用来通过鼠标事件控制模型旋转、缩放、移动），没有这个需求可不引入
import {
    
     OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

//创建一个三维场景
const scene = new THREE.Scene()
//添加光源 这里添加了两个光源
//AmbientLight：环境光源，均匀照亮所有物体，防止有些光源照射不到呈现不出来
//PointLight：点光源，类似灯泡发出的光，可以投射阴影，使模型更加立体
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5),
    pointLight = new THREE.PointLight(0xffffff, 0.4)
    
//设置点光源所在位置
pointLight.position.set(200,300,400)

//每创建一个object都需要将其添加到三维场景中 将环境光源和点光源添加到场景中
scene.add(ambientLight)
scene.add(pointLight)


//创建一个透视相机camera  这里的width、height是整个画布的宽高度
const width = window.innerWidth, height = window.innerHeight  ,
      camera = new THREE.PerspectiveCamera(45, width/height, 1, 1000)
//设置相机位置
camera.position.set(200,200,200) 
//设置相机方向
camera.lookAt(0,0,0)

//创建辅助坐标轴
const axesHelper = new THREE.AxesHelper(100)
scene.add(axesHelper)

//创建一个物体（形状）
const geometry = new THREE.BoxGeometry(100, 100, 100)
//创建材质（外观）
const material = new THREE.MeshLambertMaterial({
    
    
    color: 0x00ffff,//设置材质颜色
    transparent: true,//开启透明度
    opacity: 0.5 //设置透明度
})
//创建一个网格模型对象,将上面设置好的物体及其材质注入到模型对象中
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

//创建一个WebGL渲染器 width、height是整个画布的宽高度
const renderer = new THREE.WebGLRenderer()

renderer.setSize(width,height)
renderer.render(scene,camera)

//创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)
//添加事件监听 当事件发生改变时触发
controls.addEventListener('change',()=>{
    
    
    //重新渲染
    renderer.render(scene, camera)
})
onMounted(()=>{
    
    
  document.getElementById('three')?.appendChild(renderer.domElement)
})