介绍

文章中使用到的案例图片都来源于：Humus - Textures

这个网站里面有很多免费的资源。每个资源里面都提供6个不同方位的图片。我们只需要通过threejs稍微处理一下，就能实现3d场景了。

demo演示

源码

安装依赖

npm install three
yarn add three

<template><div v-loading="loading" style="position: relative"><div style="position:absolute;left:0;top:0;opacity:0.5;height: 35px;width: 100%;z-index: 9999;display: flex;justify-content: flex-start;align-items: center;padding: 0 20px"><el-button size="mini" @click="changeName('indoor')">室内</el-button></div><div ref="environment"></div></div>
</template><script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import {Scene,PerspectiveCamera,WebGL1Renderer,AmbientLight,CubeTextureLoader,Mesh,PlaneGeometry,MeshLambertMaterial,
} from 'three'
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";export default defineComponent({components: {},setup() {const loading = ref(true)let scene: any = new Scene()const environment = ref<HTMLDivElement>()/*** 默认场景*/const nameDefault = ref<string>('indoor')/*** 切换场景事件*/const changeName = (environmentName: string) => {if (nameDefault.value === environmentName) {return}if (environmentName === '') {environmentName = nameDefault.value}loading.value = truescene.background = new CubeTextureLoader().setPath(`/ambient/${environmentName}/`).load(['posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg'], function () {loading.value = falsenameDefault.value = environmentName})}/*** 初始化*/const init = () => {loading.value = true/*** 相机 PerspectiveCamera(视野大小, 视图的长宽比, 近景， 远景)*/const camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000)camera.position.set(0, 0, 300)camera.lookAt(scene.position)/*** antialias消除锯齿*/const renderer = new WebGL1Renderer({antialias: true})// 背景颜色renderer.setClearColor(0xffffff)// 设置设备像素比renderer.setPixelRatio(window.devicePixelRatio)renderer.setSize(window.innerWidth, window.innerHeight)/*** 添加环境灯光*/scene.add(new AmbientLight(0xFFFFFF, 2))environment.value?.appendChild(renderer.domElement)const planeGeometry = new PlaneGeometry(60, 20)// 材质 MeshBasicMaterial和MeshLambertMaterial的区别 MeshLambertMaterial它不会自己发光,而是需要一个光源照射const planeMaterial = new MeshLambertMaterial({color: 0xcccccc})// 用来定位音源的网格模型const audioMesh = new Mesh(planeGeometry, planeMaterial);// 设置网格模型的位置，相当于设置音源的位置audioMesh.position.set(0, 0, 300);scene.add(audioMesh);window.addEventListener('resize', () => onWindowResize())/*** 轨道控制器 也就是鼠标转动等操作*/let orbitControls = new OrbitControls(camera, renderer.domElement)orbitControls.autoRotateSpeed = 1orbitControls.minDistance = 50renderScene()function renderScene(){requestAnimationFrame(renderScene)renderer.render(scene, camera)}const onWindowResize = () => {renderer.setSize(window.innerWidth, window.innerHeight)camera.aspect = window.innerWidth / window.innerHeightcamera.updateProjectionMatrix()}}onMounted(() => {init()changeName('')})return {environment,changeName,loading}},
})
</script>

安装好依赖，复制源码，下载好相对应的图片就能使用。这里只是一个简单的demo。纯属学习记录。我是Etc.End，如果文章对你有帮助，记得帮我点个赞

VUE3+ThreeJs实现3D全景场景，可自由旋转视角相关推荐

Vue3 结合threejs构建3D基础场景
Vue3 结合threejs构建3D基础场景上图为uv贴图还有加载gltf模型代码链接 gitee地址: 项目地址.
threejs实现3d全景看房
背景随着电商时代的发展,网上购物的方式已经成为主流,良好的购物体验已经显得极为重要.展示给用户的视觉效果便不能仅仅局限于2D视觉效果,全方位的3D立体展示效果能让用户对商品进行 360度无死角的认识 ...
使用threejs实现3D全景漫游
最近发现谷歌相机蛮好玩儿的,可以通过拍摄多幅照片将其合成一张全景图,于是我在宿舍中拍摄了宿舍内和阳台的两张全景图,并使用threejs实现了全景漫游. 只是一个简单的全景场景浏览比较简单,就是创建一个 ...
threejs 实现3d全景鼠标旋转
1.引入 <script type="text/javascript" src="../libs/OrbitControls.js"></s ...
基于threejs + CSS3DRenderer的3D全景
基于threejs + CSS3DRenderer的3D全景可以理解为将相机置放在一个立方体内,调整相机的位置可以拍摄到场景中不同内容.本篇是通过CSS3DRenderer来实现全景浏览,分别铺满一 ...
php框架三维图展示,HTML5开发实例-3D全景(ThreeJs全景Demo) 详解（图）
前言在现在市面上很多全景H5的环境下,要实现全景的方式有很多,可以用css3直接构建也可以用基于threeJs的库来实现,还有很多别的制作全景的软件使用本教学适用于未开发过3D全景的工程狮如果觉 ...
html5 3d场景设计,打造H5里的“3D全景漫游”秘籍－腾讯ISUX
原标题:打造H5里的"3D全景漫游"秘籍 - 腾讯ISUX 近来风生水起的VR虚拟现实技术,抽空想起年初完成的"星球计划"项目,总结篇文章与各位分享一下制作基于 ...
小程序中使用threeJs渲染3D场景
淘宝小程序中使用threeJs渲染3D场景demo 在做淘宝小程序的项目的时候需要有用到3d场景,然后就想到使用threeJs来做渲染,但是threeJs依据的dom元素在小程序里面是没有的,故而需要 ...
3D全景沉浸式体验场景未来城质量保障方案总结
未来城是淘宝探索下一代互联网电商在3D场景中的创新尝试,借助了云端强大的GPU完成高清复杂的场景渲染,实现3A影视级画面,端到端200ms时延,用户无需下载大型的安装包,就可在淘宝APP上启用自己的3 ...

VUE3+ThreeJs实现3D全景场景，可自由旋转视角

介绍

demo演示

源码

VUE3+ThreeJs实现3D全景场景，可自由旋转视角相关推荐

最新文章

热门文章