使用three.js 实现vr全景图展示,复制即可用

1.实现效果

2.代码

1.npm安装three.js

复制代码
npm install three

2.引入three.js

复制代码
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

3.初始化模型

javascript 复制代码
init(val) {
                this.container = document.querySelector('.container')
                // 初始场景
                this.scene = new THREE.Scene()
                // 初始化相机
                this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
                // 相机位置
                this.camera.position.z = 5
                // 初始化渲染器
                this.renderer = new THREE.WebGLRenderer()
                this.renderer.setSize(window.innerWidth, window.innerHeight)
                // 添加球体方式一:对于.hdr图片

                // 添加球体方式二:对于.jpg .png图片
                const geometry = new THREE.SphereGeometry(5, 32, 32)
                const meterial = new THREE.MeshBasicMaterial()
                // 这里图片的地址val默认位置在public文件下方,所以测试的图片直接添加在public文件夹内部即可,val格式'./images/demo1.jpg'
                let texture = new THREE.TextureLoader().load(val)
                meterial.map = texture
                this.sphere = new THREE.Mesh(geometry, meterial)
                // 改变视角,进入球体内部
                this.sphere.geometry.scale(1, 1, -1)
                this.scene.add(this.sphere)
                // 添加控制器,控制视角
                const controls = new OrbitControls(this.camera, this.container)
                // controls.enableDamping = true
                // 容器上面添加渲染器
                this.container.appendChild(this.renderer.domElement)
                // 逐帧渲染
                const circleRender = () => {
                    this.renderer.render(this.scene, this.camera)
                    requestAnimationFrame(circleRender)
                }
                circleRender()
            },

4.展示结束销毁模型

javascript 复制代码
disposeThreeJS() {
                if (this.renderer) {
                    this.renderer.domElement.remove(); // 从DOM中移除渲染器元素
                    this.renderer.dispose();
                }
                if (this.sphere && this.sphere.geometry) {
                    this.sphere.geometry.dispose();
                }
                if (this.sphere && this.sphere.material) {
                    this.sphere.material.dispose();
                }
                if (this.controls) {
                    // OrbitControls没有直接的dispose方法,但可以通过设置引用为null来释放它
                    this.controls.dispose = () => { }; // 假设你有一个空方法来标记它已被"处理"
                    this.controls = null;
                }
                // 注意:场景和相机通常不需要显式销毁,除非你有大量的资源需要清理
                // 但为了完整性,你可以将它们设置为null
                this.scene = null;
                this.camera = null;
            },

5.测试图片

相关推荐
Dfreedom.8 分钟前
一文掌握Python四大核心数据结构:变量、结构体、类与枚举
开发语言·数据结构·python·变量·数据类型
一半烟火以谋生9 分钟前
Python + Pytest + Allure 自动化测试报告教程
开发语言·python·pytest
虚行9 分钟前
C#上位机工程师技能清单文档
开发语言·c#
小羊在睡觉42 分钟前
golang定时器
开发语言·后端·golang
CoderCodingNo1 小时前
【GESP】C++四级真题 luogu-B4068 [GESP202412 四级] Recamán
开发语言·c++·算法
saadiya~1 小时前
ECharts 实时数据平滑更新实践(含 WebSocket 模拟)
前端·javascript·echarts
百锦再1 小时前
Vue Scoped样式混淆问题详解与解决方案
java·前端·javascript·数据库·vue.js·学习·.net
Larry_Yanan1 小时前
QML学习笔记(四十四)QML与C++交互:对QML对象设置objectName
开发语言·c++·笔记·qt·学习·ui·交互
百锦再2 小时前
对前后端分离与前后端不分离(通常指服务端渲染)的架构进行全方位的对比分析
java·开发语言·python·架构·eclipse·php·maven
Want5952 小时前
C/C++大雪纷飞①
c语言·开发语言·c++