在vue2、vue3中基于Three.js使用多张全方位照片拼接全景vr效果

Vue3

代码如下（示例）：

<template><div class="Create"></div>
</template>
<script>
import * as Three from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
export default {name: 'Create',data () {return {}},setup () {// 1、创建场景和摄像机const scene = new Three.Scene()// 2、创建摄像机 PerspectiveCamera('视角', '指定投影窗口长宽比', '从距离摄像机多远开始渲染', '截止多远停止渲染100')const camera = new Three.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 2, 1000)// 3、创建ThreeJs 渲染器const renderer = new Three.WebGLRenderer({ antialias: true })// 设置渲染器场景大小renderer.setSize(window.innerWidth, window.innerHeight)document.body.appendChild(renderer.domElement)debugger// 创建几何模型 BoxGeometry('x轴', '轴', 'z轴')const geometry = new Three.BoxGeometry(10, 10, 10)// 创建纹理贴图  前后  上下  左右const texture0 = new Three.TextureLoader().load(require('@/assets/imgs/1.png'))const texture1 = new Three.TextureLoader().load(require('@/assets/imgs/2.png'))const texture2 = new Three.TextureLoader().load(require('@/assets/imgs/3.png'))const texture3 = new Three.TextureLoader().load(require('@/assets/imgs/4.png'))const texture4 = new Three.TextureLoader().load(require('@/assets/imgs/5.png'))const texture5 = new Three.TextureLoader().load(require('@/assets/imgs/6.png'))// 添加材质const material = [new Three.MeshBasicMaterial({ map: texture0, side: Three.DoubleSide }),new Three.MeshBasicMaterial({ map: texture1, side: Three.DoubleSide }),new Three.MeshBasicMaterial({ map: texture2, side: Three.DoubleSide }),new Three.MeshBasicMaterial({ map: texture3, side: Three.DoubleSide }),new Three.MeshBasicMaterial({ map: texture4, side: Three.DoubleSide }),new Three.MeshBasicMaterial({ map: texture5, side: Three.DoubleSide })]// 创建网格对象const cube = new Three.Mesh(geometry, material)// 添加到场景中去scene.add(cube)// 摄影机空间Z轴camera.position.set(2, 0, 0)camera.lookAt(scene.position)// camera.position.z = 4// 鼠标操作缩放// eslint-disable-next-line no-newnew OrbitControls(camera, renderer.domElement)// 添加帧渲染const animate = () => {requestAnimationFrame(animate)// 渲染场景renderer.render(scene, camera)}animate()// 自适应window.addEventListener('resize', () => {// 初始化摄像机camera.aspect = window.innerWidth / window.innerHeightcamera.updateProjectionMatrix()// 初始化渲染器尺寸renderer.setSize(window.innerWidth, window.innerHeight)})}
}
</script>

Vue2

代码如下（示例）：

<template><div id="Create"></div>
</template><script>
import * as Three from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";export default {name: "Create",components: {},data() {return {scene: null,camera: null,renderer: null,geometry: null,// 添加材质material: [new Three.MeshBasicMaterial({map: new Three.TextureLoader().load(require("../../../assets/img/1.png")),side: Three.DoubleSide,}),new Three.MeshBasicMaterial({map: new Three.TextureLoader().load(require("../../../assets/img/2.png")),side: Three.DoubleSide,}),new Three.MeshBasicMaterial({map: new Three.TextureLoader().load(require("../../../assets/img/3.png")),side: Three.DoubleSide,}),new Three.MeshBasicMaterial({map: new Three.TextureLoader().load(require("../../../assets/img/4.png")),side: Three.DoubleSide,}),new Three.MeshBasicMaterial({map: new Three.TextureLoader().load(require("../../../assets/img/5.png")),side: Three.DoubleSide,}),new Three.MeshBasicMaterial({map: new Three.TextureLoader().load(require("../../../assets/img/6.png")),side: Three.DoubleSide,}),],cube: null,};},methods: {init() {this.scene = new Three.Scene();this.camera = new Three.PerspectiveCamera(75,window.innerWidth / window.innerHeight,2,1000);this.renderer = new Three.WebGLRenderer({ antialias: true });this.renderer.setSize(window.innerWidth, window.innerHeight);document.getElementById("Create").appendChild(this.renderer.domElement);this.geometry = new Three.BoxGeometry(10, 10, 10);this.cube = new Three.Mesh(this.geometry, this.material);this.scene.add(this.cube);this.camera.position.set(2, 0, 0);this.camera.lookAt(this.scene.position);new OrbitControls(this.camera, this.renderer.domElement);// 添加帧渲染},animate() {requestAnimationFrame(this.animate);// 渲染场景this.renderer.render(this.scene, this.camera);},},created() {},mounted() {this.init();this.animate();},
};
</script><style></style>

在vue2、vue3中基于Three.js使用多张全方位照片拼接全景vr效果相关推荐

在 Vue2 Annotate 中通过 Annotate JS 生成自定义注解（面向切面编程）
在 Vue2 Annotate 中通过 Annotate JS 生成自定义注解(面向切面编程) 本文基于在了解 Vue2 Annotate 框架基本用法后的进阶使用技巧 Vue2 Annotate 简 ...
Vue watch监听详解，一篇文章彻底搞懂Vue2/Vue3中的watch监听
watch监听在vue2和vue3中的用法详解(全) Vue2中的watch用法 Vue3中的watch用法首先写一个vue页面 <template><div><h1& ...
vue3中使用swiper.js实现轮播功能
vue3中使用swiper6实现轮播 vue用的3.0版本,swiper用的swiper6 安装Swiper // "swiper": "^6.7.5",npm ...
dropzone.js php,Laravel 5.1 中基于 Dropzone.js 实现图片拖拽上传及删除功能
注:本教程代码适用于Laravel 5.1版本. 1.概述 Dropzone 是目前最好的免费文件拖拽上传库,它拥有很多特性和选项以便你可以使用多种方式来自定义. 在Laravel项目集成Dropzo ...
下拉刷新和上拉加载 php,基于iscroll.js实现下拉刷新和上拉加载效果
现在已经不是纯Android独霸天下的时代了,H5嵌入Android的Hybrid混合开发是大势所趋.今天给大家带来的就是移动端中常见的"上拉刷新,下拉加载"特效,这个特效将会基于 ...
福田中心区中海华庭航拍看楼体和周围配套全景VR解读（40P）
空中看中海华庭每个角度,看周围配套等等. 目录: 一.这是属于福田中心区综合介绍的一部分二.主要内容三.楼体整体介绍四.楼盘地址五.周围学校六.商业配套七.医院配套八.交通配套九.公园 ...
黑马前端Vue2+Vue3全套视频教程上新！500+集资源免费领
互联网发展至今,前端工程师以其高需求量和高薪酬成为IT行业职场新贵. 走进现代前端开发行业,播妞发现,每一位前端开发人员都面临着一个重要决策,选择一个合适的框架. 这时,更符合时代大势所趋的前端框架 ...
深入浅出虚拟 DOM 和 Diff 算法，及 Vue2 与 Vue3 中的区别
因为 Diff 算法,计算的就是虚拟 DOM 的差异,所以先铺垫一点点虚拟 DOM,了解一下其结构,再来一层层揭开 Diff 算法的面纱,深入浅出,助你彻底弄懂 Diff 算法原理认识虚拟 DOM ...
笔记,前端重点 js,es6,vue2,vue3,小程序...... (记得收藏)
------------vue2 部分面试题--------# (1)防抖:就是将一段时间内连续的多次触发转化为一次触发. (2)节流:减少一段时间内触发的频率区别:两者区别在于函数节流是固定时间做 ...

在vue2、vue3中基于Three.js使用多张全方位照片拼接全景vr效果

在vue2、vue3中基于Three.js使用多张全方位照片拼接全景vr效果

Vue3

Vue2

在vue2、vue3中基于Three.js使用多张全方位照片拼接全景vr效果相关推荐

最新文章

热门文章