写点什么

虚拟现实 VR 展厅演示

  • 2024-04-23
    江苏
  • 本文字数:6270 字

    阅读完需:约 21 分钟

虚拟现实VR展厅演示

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


本案例的源代码及相关模型下载链接:https://www.aspiringcode.com/content?id=17136874254415


体验地址:https://display.aspiringcode.com:8888/html/17136874254415/#/index

项目搭建

本案例还是借助框架书写 three 项目,借用 vite 构建工具搭建 vue 项目,搭建完成之后,用编辑器打开该项目,在终端执行 npm i 安装一下依赖,安装完成之后终端在安装 npm i three 即可。

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

npm install reset.css --save
复制代码


配置 scss 预处理器:SASS 是一种预编译的 CSS,作用类似于 Less,这里我们在 vue 项目中采用该预处理器进行处理样式,终端执行如下命令安装相应的插件:

npm install sass
复制代码

配置 element-plus 组件库:因为本项目需要采用 element-plus 组件库进行创建项目,其官方地址为:element-plus ,所以接下来需要对组件库进行一个安装配置,具体的实现过程如下,终端执行如下安装命令:

npm install element-plus @element-plus/icons-vue
复制代码

安装完成之后,在入口文件 main.js 对 element 的插件进行一个挂载,这里顺便配置一下国际化:

import { createApp } from 'vue'import 'reset.css'import App from './App.vue'import ElementPlus from 'element-plus' // 引入element-plus插件与样式import 'element-plus/dist/index.css'import zhCn from 'element-plus/dist/locale/zh-cn.mjs' createApp(App)    .use(ElementPlus, { locale: zhCn }) // 安装element-plus插件并进行国际化配置    .mount('#app')
复制代码

路由配置:因为本项目主要展示的是 3D 场景的登陆页面,所有这里也是需要配置一些路由的,先我们要先创建几个路由作为路由模块,在 src 目录下新建一个 pages 文件夹,其用于存放路由组件相关的内容,如下:

安装完插件之后,接下来就可以对路由进行相关配置了,在 src,目录下新建 router 文件,如下:

import { createRouter, createWebHashHistory } from "vue-router" const routes = [    {        path: '/',         redirect: '/login', // 重定向    },    {        path: '/index',        name: 'home',        component: () => import('../pages/home/index.vue'),        meta: {            title: '首页'        }    },    {        path: '/login',        name: 'login',        component: () => import('../pages/login/index.vue'),        meta: {            title: '登录页'        }    }] // createRouter用于创建路由器实例,可以管理多个路由const router = createRouter({    // 路由的模式的设置    history: createWebHashHistory(),    routes}) export default router
复制代码

初始化 three 代码

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

import * as THREE from 'three' const scene = new THREE.Scene()scene.fog = new THREE.Fog(0x000000, 0, 10000) // 添加雾的效果
复制代码

初始化相机

const camera = new THREE.PerspectiveCamera(15, window.innerWidth / window.innerHeight, 1, 30000)// 计算相机距离物体的位置const distance = window.innerWidth / 2 / Math.tan(Math.PI / 12)const zAxisNumber = Math.floor(distance - 1400 / 2)camera.position.set(0, 0, zAxisNumber) // 设置相机所在位置camera.lookAt(0, 0, 0) // 看向原点scene.add(camera)
复制代码

初始化渲染器

const renderer = new THREE.WebGLRenderer({ antialias: true })renderer.setSize(window.innerWidth, window.innerHeight)
复制代码

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

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

导入轨道控制器

// 添加轨道控制器import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' // 添加控制器const controls = new OrbitControls(camera, renderer.domElement)controls.enabled = true // 设置控制是否可用// 设置缩放范围controls.minDistance = zAxisNumber // 设置最小缩放距离controls.maxDistance = zAxisNumber + 500 // 设置最大缩放距离controls.enableDamping = true // 设置控制阻尼
复制代码

设置渲染函数

// 设置渲染函数const render = (time) =>{   controls.update()  renderer.render(scene,camera)  requestAnimationFrame(render)}
复制代码

页面加载调用

<template>    <div class="loginBg">        <div class="login" ref="login"></div>    </div></template> <script setup>import { ref, onMounted } from 'vue' // 获取div实例对象let login = ref(null)onMounted(() => {    login.value.appendChild(renderer.domElement) // 添加渲染器到div中    render()    })</script>
复制代码

ok,写完基础代码之后,接下来开始具体的 Demo 实操。  

设置登录界面

首先我们先添加好背景和地球的贴图:

// 加载图片const SKYIMG = new URL('../../assets/images/sky.png', import.meta.url).hrefconst EARTHIMG = new URL('../../assets/images/earth_bg.png', import.meta.url).href// 添加背景let texture = new THREE.TextureLoader().load(SKYIMG)const geometry = new THREE.BoxGeometry(window.innerWidth, window.innerHeight, 1400) // 创建立方体const material = new THREE.MeshBasicMaterial({ // 创建材质    map: texture, // 纹理贴图    side: THREE.BackSide, // 背面})const mesh = new THREE.Mesh(geometry, material) // 创建网格模型scene.add(mesh) // 添加到场景
复制代码

这里顺便设置一下地球模型的自传效果,代码如下我们在 render 渲染函数中调用一下:

// 球体自转const renderSphereRotate = () => {    sphere.rotateY(0.001)}// 设置渲染函数const render = () =>{   controls.update()  renderer.render(scene, camera)  requestAnimationFrame(render)  renderSphereRotate() // 自转}
复制代码

接下来我们给正对我们电脑屏幕的角度后面添加星星,让其向着我们的角度进行运动,这里我们要先引入一下星星的图片,这里准备了两张星星的图片,在页面刚加载的时候将获取星星的位置数据,然后在渲染函数中进行调用即可:

onMounted(() => {    login.value.appendChild(renderer.domElement) // 添加渲染器到div中    initSceneStar(initZposition) // 初始化星星    zprogress_first = initSceneStar(zprogress1) // 初始化点1    zprogress_second = initSceneStar(zprogress2) // 初始化点2    render()    }) // 设置渲染函数const render = () =>{   controls.update()  renderer.render(scene, camera)  requestAnimationFrame(render)  renderSphereRotate() // 自转  renderStarMove() // 星星移动}
复制代码

最终实现的效果如下,总体来说还是不错的:

接下来我们给星云设置运动效果,这里借助 three 中的 CatmullRomCurve3 创建 3 维曲线:

// 渲染星云的运动效果const renderCloudMove = (cloud, route, speed) => {    let cloudProgress = 0 // 星云位置    // 创建三维曲线    const curve = new THREE.CatmullRomCurve3(route)    // 创建星云的运动轨迹    return () => {        if(cloudProgress <= 1) {            cloudProgress += speed            const point = curve.getPoint(cloudProgress) // 获取当前位置            if (point && point.x) {                cloud.position.set(point.x, point.y, point.z) // 设置位置            }        } else {            cloudProgress = 0        }    }}
复制代码

最终达到的效果如下:

接下来开始撰写 html 上面的内容:

最终的效果如下,有那味了!


camera-controls 使用

因为本次项目 vr 展厅需要我们去进行视角的移动,采用 three 本身的控制器是无法满足我们的需求的,所以这里我们需要换一个新的控制器去进行视角的移动和切换,首先我们先加载好我们的场景,借助 three 库自带的 GLTFLoader 函数来加载场景,GLTFLoader 函数是一个用于加载和解析 glTF(GL Transmission Format)文件的 JavaScript 库,其可以让开发人员在 Web 应用程序中轻松地加载和显示 glTF 格式的 3D 模型和场景。它提供了一种简单而有效的方式来将 glTF 文件加载到 WebGL 渲染器中,使开发人员能够通过 JavaScript 代码轻松地操作和展示 3D 内容。

接下来我们直接引入该库,然后加载场景,并给场景中添加环境光源:

// 加载GLTF模型import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; // 加载模型let gltfLoader = new GLTFLoader();gltfLoader.load("/public/assets/room1/msg.gltf", (gltf) => {    scene.add(gltf.scene)}) // 添加环境光源const ambientLight = new THREE.AmbientLight(0xffffff, 1) // 环境光scene.add(ambientLight)
复制代码

添加完成之后,我们运行我们的项目,可以看到如下场景,说明我们的场景已经加载完成:

接下来设置监控事件来控制相机的移动,代替人视角的移动:

let isDragging = false // 判断是否拖动// 获取容器div点击事件const handleClick = (e) => {  // 如果发生了拖动,则不执行点击事件  if (isDragging) return  // 获取鼠标位置  mouse.x = (e.offsetX / window.innerWidth) * 2 - 1   mouse.y = -(e.offsetY / window.innerHeight) * 2 + 1   // 计算射线坐标  raycaster.setFromCamera(mouse, camera)  // 计算物体和射线的焦点  const intersects = raycaster.intersectObjects(eventMeshs)  // 判断是否有焦点  const mesh = intersects[0]  if (mesh) {    const v3 = mesh.point // 获取焦点位置    if (mesh.object.name === 'meishu01') {      cameraControls.moveTo(v3.x, 1, v3.z, true)    }  }} let startXY// 获取容器div鼠标按下事件const handleMouseDown = (e) => {  // 获取鼠标位置  startXY = [e.offsetX, e.offsetY]} // 获取容器div鼠标抬起事件const handleMouseUp = (e) => {  // 获取鼠标位置  const [ endX, endY ] = startXY  if (Math.abs(e.offsetX - endX) > 3 || Math.abs(endY - e.offsetY) > 3) {  // 标记发生了拖动    isDragging = true  } else {    // 标记未发生拖动    isDragging = false  }}
复制代码

最终呈现的效果如下:

添加画框

接下来开始编写相应的函数给展厅场景中添加对应的图片了,如下:

// 添加画框const loadItem = (items, deepth) => {  items.forEach(async (item) => {    // 加入到画布当中    const { id, url, position, scale, rotation } = item    // 绘制画框,贴图    const texture = await new THREE.TextureLoader().loadAsync(url)    let width, height    let originwidth = texture.image.width // 获取图片原始宽度    let originheight = texture.image.height // 获取图片原始高度    let maxSize = 10 // 最大尺寸    if (width > maxSize) {      width = maxSize      height = (maxSize / originwidth) * originheight    } else {      height = maxSize      width = (maxSize / originheight) * originwidth    }        const geometry = new THREE.BoxGeometry(width, height, deepth) // 创建画框    const material = new THREE.MeshBasicMaterial({ color: 0xffffff }) // 创建贴图    const imgMaterial = new THREE.MeshBasicMaterial({       color: 0xffffff,      map: texture    })    const mesh = new THREE.Mesh(geometry, [ material, material, material, material, material, imgMaterial ]) // 创建画框    scene.add(mesh)  })}
复制代码

执行如下函数,给图片添加对应的信息,函数如下:

loadItem([  {     url: "/public/assets/pictures2/1.jpg",    name: "名称",    desc: "信息描述",    scale: { x: 0.1, y: 0.1, z: 0.1 },    position: { x: 24.23375412142995, y: 2.3, z: 10.729648829537796 },    view: { x: 24.011, y: 2.1, z: 4.379 },    id: "1",    rotation: { x: 0, y: 0, z: 0 },    type: "picture",  }], 0.1)
复制代码

最终呈现的效果如下,总体来说还是不错的,现在的问题就是将图片贴到场景的墙壁上:

如何把画框贴到墙壁上,换句话说如何知道画框与墙壁之间的具体位置呢?这里我们需要借助 three 给我们提供的 TransformControls 库,使用 TransformControls 可以为用户提供更直观、友好的界面,使他们能够轻松地在 3D 场景中进行对象的编辑和操作,代码如下:

import { TransformControls } from 'three/examples/jsm/controls/TransformControls'; // 实例化TransformControlsconst transformControls = new TransformControls(camera, renderer.domElement)transformControls.setSpace('local') // 设置空间transformControls.addEventListener('mousedownn', () => {  controls.enabled = false})transformControls.addEventListener('mouseup', () => {  controls.enabled = true})transformControls.addEventListener('objectChange', () => {  const { position, scale, rotation } = transformControls.object  console.log(JSON.stringify({ position, scale, rotation: { x: rotation.x, y: rotation.y, z: rotation.z } }))})scene.add(transformControls)
复制代码

我们通过 TransformControls 控制器移动画框到墙壁上,并通过监听事件拿到对应的位置数据:

后面通过手动修改参数,将图片全部铁道墙壁上,最终达到的效果如下,还是很完美的:

后面通过插件 zoomtastic 来设置点击图片进行放大展示的效果,代码如下:

// 导入第三方库import Zoomtastic from 'zoomtastic';// 挂载Zoomtastic.mount(); // 设置画框点击事件const handleClickPicture = (item) => {  // 展示当前的图片  Zoomtastic.show(item.url);}
复制代码

现在当我点击对应的图片之后,得到如下结果:

接下来再在场景中添加一个机器人模型:

// 加载机器人模型let robotLoader = new GLTFLoader();robotLoader.load("/public/assets/robot/robot.glb", (gltf) => {  gltf.scene.scale.set(5, 5, 5)  gltf.scene.position.set(0.1324808945523861, -10.232245896556929, -30.95853005109946)  eventMeshs.push(gltf.scene)  gltf.scene.odata = { id: "robot" }  const mixer = new THREE.AnimationMixer(gltf.scene) // 创建动画控制器  const ani = gltf.animations[0] // 获取动画  mixer.clipAction(ani).setDuration(5).play() // 播放动画  mixer.update(0) // 更新动画  animateFuns.push(d => mixer.update(d))    scene.add(gltf.scene)})
复制代码

最终呈现的效果如下:

本案例的源代码及相关模型下载链接:https://www.aspiringcode.com/content?id=17136874254415


体验地址:https://display.aspiringcode.com:8888/html/17136874254415/#/index

发布于: 刚刚阅读数: 6
用户头像

csdn博主、阿里云专家博主、51CTO博主 2022-06-29 加入

怨尤不会让困难消失,但乐观会让人变得强大。

评论

发布
暂无评论
虚拟现实VR展厅演示_JavaScript_-亦世凡华、_InfoQ写作社区