没有合适的资源？快使用搜索试试~ 我知道了~

文库首页前端TypescriptVue3+ts+threejs实现360度VR全景

Vue3+ts+threejs实现360度VR全景

vue.js

360全景

需积分: 3 0 下载量 22 浏览量 2024-09-12 14:42:57 上传评论收藏 13.47MB DOC 举报

温馨提示

试读

22页

一、项目介绍： Vue3+ts+threejs实现360度VR全景功能如下： 1. 360度自由视角：用户可以拖拽观看房内全景和自由旋转视角，查看房间的每个角落。 2. 场景切换：用户可以通过点击房间名称热点标注，实现不同房间之间的切换，体验整个房屋的布局。 3.楼层之间上下：用户点击一楼的热点标注可以上到二楼的房间和上到三楼的房间观察全景。二、项目架构与使用： 1、介绍如何基于Vue3+ts+threejs搭建三维场景。 2、介绍实现全景图的两种方案：立方体和球体两种形式全景图制作。 3、实现房间切换功能，文字说明，代码实现以及效果图展示都写在文档中。 4、介绍如何创建精灵文字 5、实现多个房间切换功能。

资源推荐

资源详情

资源评论

Vue3+ts+threejs 实现 360 度 VR 全景

一、基本场景搭建

</template>

import * as THREE from "three";

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";

import { ref, onMounted } from "vue";

// 初始化场景

const scene = new THREE.Scene();

// 初始化相机

const camera = new THREE.PerspectiveCamera(

75,

window.innerWidth / window.innerHeight,

0.1,

1000

);

// 设置相机位置

camera.position.set(0, 0, 0);

// 初始化渲染器

const renderer = new THREE.WebGLRenderer({

antialias: true,

alpha: true,

logarithmicDepthBuffer: true,

});

renderer.setSize(window.innerWidth, window.innerHeight);

const container = ref(null);

const render = () => {

renderer.render(scene, camera);

requestAnimationFrame(render);

};

onMounted(() => {

container.value.appendChild(renderer.domElement);

render();

});

</script>

<style>

* {

margin: 0;

padding: 0;

}

.container {

height: 100vh;

width: 100vw;

background-color: #f0f0f0;

}

.map {

width: 300px;

height: 260px;

position: absolute;

left: 0;

bottom: 0;

overflow: hidden;

border-radius: 10px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

}

.map > img {

width: 100%;

height: 100%;

position: absolute;

left: 0;

top: 0;

}

.map > .tag {

position: absolute;

top: 0;

left: 0;

width: 30px;

height: 30px;

/* background-image: url(./assets/location.png); */

background-size: cover;

z-index: 1;

}

.loading {

position: fixed;

top: 0;

left: 0;

width: 100vw;

height: 100vh;

/* background-image: url(./assets/loading.png); */

background-size: cover;

filter: blur(50px);

z-index: 100;

}

.progress {

position: absolute;

top: 0;

left: 0;

width: 100vw;

height: 100vh;

z-index: 101;

display: flex;

justify-content: center;

align-items: center;

font-size: 20px;

color: #fff;

}

.progress > img {

padding: 0 15px;

}

.title {

width: 180px;

height: 40px;

position: fixed;

right: 100px;

top: 50px;

background-color: rgba(0, 0, 0, 0.5);

line-height: 40px;

text-align: center;

color: #fff;

border-radius: 5px;

z-index: 110;

}

</style>

二、创建立方体盒子（在 onMounted 里面）

小知识：获取鼠标当前位置

let mouseX = (event.clientX / window.innerWidth) * 2 -1;

let mouseY = (event.clientY / window.innerHeight) * 2 -1;

console.log(mouseX,mouseY);

cube.rotation.y = mouseX * Math.PI;

cube.rotation.x = mouseY * Math.PI;

三、简单的全景图做好了

1、基于立方体的

</template>

import * as THREE from "three";

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";

import { ref, onMounted } from "vue";

// 初始化场景

const scene = new THREE.Scene();

// 初始化相机

const camera = new THREE.PerspectiveCamera(

75,

window.innerWidth / window.innerHeight,

0.1,

1000

);

// 设置相机位置

camera.position.set(0, 0, 0);

// 初始化渲染器

const renderer = new THREE.WebGLRenderer({

antialias: true,

alpha: true,

logarithmicDepthBuffer: true,

});

renderer.setSize(window.innerWidth, window.innerHeight);

const container = ref(null);

const render = () => {

renderer.render(scene, camera);

requestAnimationFrame(render);

};

onMounted(() => {

// 创建立方体

const geometry = new THREE.BoxGeometry(10, 10, 10);

geometry.scale(1, 1, -1); //-1 代表反向，1 代表正面朝向我们的

let textureUrl = "./img/livingroom/"; //给立方体添加纹理

let roomIndex = 0; //房间的索引

var arr = [

`${roomIndex}_l`, //左，默认这个顺序

`${roomIndex}_r`, //右

`${roomIndex}_u`, //上

`${roomIndex}_d`, //下

`${roomIndex}_b`, //后

`${roomIndex}_f`, //前

];

let boxMaterials = []; // 设置一个盒子材质的数组

arr.forEach((item) => { //循环遍历取出每一张图片纹理

// 纹理加载

const texture = new THREE.TextureLoader().load(

textureUrl + item + ".png"

);

boxMaterials.push(new THREE.MeshBasicMaterial({ map: texture, })); //

把每一次取出的纹理图片放入盒子数组

剩余21页未读，继续阅读

评论收藏

内容反馈

资源评论

资源反馈

评论星级较低，若资源使用遇到问题可联系上传者，3个工作日内问题未解决可申请退款~

qq_35430208

粉丝: 1436
资源: 33

上传资源快速赚钱

我的内容管理展开

我的资源快来上传第一个资源

我的收益

登录查看自己的收益

我的积分登录查看自己的积分

我的C币登录后查看C币余额

我的收藏

我的下载

下载帮助

前往需求广场，查看用户热搜

Vue3+ts+threejs实现360度VR全景

vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化

Vite + Vue3 + ts 注册登录页面书写 搭配Nodejs + Express + postgresql接口

Vue2.0+ThreeJs写的一个3D粮仓管理系统源码.zip

vue3+ts+threejs全景家居VR看房系统v1.0

vue2，3+js+ts的three.js 项目，一共四个项目 ，厂房，机台，楼层显示

基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip

Vue3+TS图片裁切组件

vue3+ts+vite+router+vuex+api请求封装

datav Vue3+TS+Vite版.zip

基于Vite+Vue3+TS+Nuxt3的仿爱彼迎网站源码.zip

Vue3+Vite4+TS 后台模板

vue3+ts实战项目组件工具库.zip

vue3+ts入门（todolist案例）

使用vue3+ant-design-vue+vite+ts开发的通用中后台框架，实现了权限系统.zip

使用vue3+ant-design-vue+vite+ts开发的通用后台框架.zip

vue3+ts (源码+笔记+生命周期截图)

vue3+ts+antd 前端基础模板

基于vue3+TS构建的商城后台管理系统

uniapp + vue3 +vite + ts + pinia 框架模板

nsis-3.08-setup.zip

webrtc-streamer

Vue3+Typescript日历组件

【HarmonyOS】HarmonyOS应用开发者高级认证96分 分享题库

鸿蒙应用开发，实现点击图片或文字进行页面跳转

Vue3集成ThreeJS实现3D效果，threejs+Vite+Vue3+TypeScript 实战课程

Element-Components-v2.1.0.rplib

vue3移动端项目构建TS，vue3+vant+vite+axios+pinia+sass+typescript

自己build的gitlens插件(vscode)，gitlens-15.5.1.vsix

最新资源

Vite + Vue3 + ts 注册登录页面书写搭配Nodejs + Express + postgresql接口

vue2，3+js+ts的three.js 项目，一共四个项目，厂房，机台，楼层显示

【HarmonyOS】HarmonyOS应用开发者高级认证96分分享题库