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

原创

已于 2024-12-27 11:56:21 修改 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言

于 2024-12-27 11:23:54 首次发布

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.初始化模型

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, windo