Three.js--》探秘虚拟现实VR展厅的视觉盛宴

今天简单实现一个three.js的小Demo，加强自己对three知识的掌握与学习，只有在项目中才能灵活将所学知识运用起来，话不多说直接开始。

源码下载地址：地址

在线体验地址：地址

目录

项目搭建

初始化three代码

camera-controls控制器使用

添加画框

画框处理事件

添加机器人模型

项目搭建

本案例还是借助框架书写three项目，借用vite构建工具搭建vue项目，vite这个构建工具如果有不了解的朋友，可以参考我之前对其讲解的文章：vite脚手架的搭建与使用。搭建完成之后，用编辑器打开该项目，在终端执行 npm i 安装一下依赖即可。接下来对项目进行一些初始化操作：

在项目中我们都会用到一些标签，但是这些标签可能本身自带一些默认样式，这些默认样式可能会影响我们的排版布局，如果每次引用就去清除一遍默认样式有点太过繁琐，因此这里需要我们清除一下默认样式。执行如下命令安装第三方包： 

npm install reset.css --save

因为我搭建的是vue3项目，为了便于代码的可读性，所以我将three.js代码单独抽离放在一个组件当中，在App根组件中进入引入该组件。具体如下：

<template>
    <div class="container">
        <Show></Show>
    </div>
</template>

<script setup>
import Show from "./pages/index.vue"

</script>

<style lang="scss">
.container {
    width: 100%;
    height: 100%;
}
</style>

初始化three代码

本次项目使用three.js代码必须要基于下面的基础代码才能实现：

导入three库：

import * as THREE from 'three'

初始化场景：

const scene = new THREE.Scene()

初始化相机：

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(5, 1, 0)
camera.lookAt(0, 0, 0)
scene.add(camera)

初始化渲染器：

const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(window.innerWidth, window.innerHeight) // 设置渲染器大小
renderer.setPixelRatio(window.devicePixelRatio) // 设置像素比

监听屏幕大小的改变，修改渲染器的宽高和相机的比例：

window.addEventListener("resize",()=>{ 
  renderer.setSize(window.innerWidth, window.innerHeight)
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
})

导入轨道控制器：

const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true // 设置控制阻尼

设置渲染函数： 

const render = () =>{ 
  contr