three.js实战模拟VR全景视图

这篇具有很好参考价值的文章主要介绍了three.js实战模拟VR全景视图。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

文章中使用到的案例图片都来源于:Humus - Textures
里面有很多免费的资源,可以直接下载,每个资源里面都提供6个不同方位的图片,我们通过threejs稍微处理一下,就能实现以下3D效果的场景了。
three.js实战模拟VR全景视图,javascript,vr,three.js文章来源地址https://www.toymoban.com/news/detail-765451.html

<template>
    <div id="view-3D"></div>
</template>

<script setup>
import {  onMounted } from "vue";
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

onMounted(() => {
    init()
    renderScene()
})
// 定义场景
const scene = new THREE.Scene()
// 创建一个能看场景的相机
const camare = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
// 定义渲染器
const renderer = new THREE.WebGLRenderer()
// 轨道控制器
let orbitControls
const init = () => {
	// 给场景设置纹理贴图
    const texture = new THREE.CubeTextureLoader().setPath('/assets/').load([
        'posx.jpg',
        'negx.jpg',
        'posy.jpg',
        'negy.jpg',
        'posz.jpg',
        'negz.jpg'
    ])
    scene.background = texture
    // 设置相机的位置
    camare.position.set(0, 0, 300)
    // 设置相机看的方向
    camare.lookAt(scene.position)
	// 设置要渲染的场景大小
    renderer.setSize(window.innerWidth, window.innerHeight)
    // 把相机添加到场景中
    scene.add(camare)
    // 在页面元素上画出元素
    document.getElementById('view-3D').appendChild(renderer.domElement)
	// 创建轨道控制器,使鼠标前后左右上下方位移动
    orbitControls = new OrbitControls(camare, renderer.domElement)
}
const renderScene = () => {
	// 创建动画刷新机制  请求再次执行渲染函数render,渲染下一帧
    requestAnimationFrame(renderScene)
    // 更新控制器
    orbitControls.update()
    // 最后一步渲染场景
    renderer.render(scene, camare)
}
</script>

到了这里,关于three.js实战模拟VR全景视图的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue2+three.js实现类似VR、3D全景效果

    效果图: 俩图标是我自己加的前进后退按钮,也是百度了好久,再加上GPT的帮助,才给搞出来。因为需求急,都不看官方文档,百度到一个能跑的demo之后改吧改吧,就先用着了。 下面是代码: 这里 代码有很多用不到的地方和需要优化的地方,我是来不及改了,就先这样吧

    2024年02月15日
    浏览(49)
  • Three.js 实战【1】—— 3D全景视图开发

    在现代开发过程当中,3D开发是越来越不可或缺的一部门,在前面的文章当中简单的说明了一些threeJs的基础,从这里开始,我们将对ThreeJs整体进行一定的应用。 我们先看一下这篇文章主要要实现的一个demo效果,现如今在第三方租房、买房App、或者百度、高德地图上会出现这

    2024年02月12日
    浏览(49)
  • three.js实现VR看房自由

           在很多看房软件,例如贝壳看房、VR博物馆或者VR展厅等等,为了更加真实的展示产品或者场景的特色,通常会通过一些VR或者全景图的方式,给用户带来沉浸式的体验,给视觉上带来比较震撼的效果,再加上一些动感的音乐,仿佛让人深陷其中,无法自拔。假的,因

    2024年01月18日
    浏览(39)
  • three.js入门篇8 之 实现VR看房

    vue create vr360-vue3 yarn add three code 效果 code 效果

    2024年02月06日
    浏览(36)
  • 高层建筑全景vr火灾隐患排查模拟培训软件助力群众防范火灾伤害

    随着城市化进程的加快,楼宇建筑的数量也在不断增加。然而,楼宇消防安全问题也日益突出。为了提高楼宇员工和居民的消防安全意识,楼宇VR消防安全教育培训应运而生。VR安全培训公司深圳华锐视点制作的楼宇vr消防安全教育培训,包括消防设备认知及使用、安全标识、

    2024年02月12日
    浏览(46)
  • Three.js--》探秘虚拟现实VR展厅的视觉盛宴

    今天简单实现一个three.js的小Demo,加强自己对three知识的掌握与学习,只有在项目中才能灵活将所学知识运用起来,话不多说直接开始。 源码下载地址:地址 在线体验地址:地址 目录 项目搭建 初始化three代码 camera-controls控制器使用 添加画框 画框处理事件 添加机器人模型

    2024年04月23日
    浏览(57)
  • Three.js系列: 在元宇宙看电影,享受 VR 视觉盛宴

    本文 gihtub 地址: https://github.com/hua1995116/Fly-Three.js 最近元宇宙的概念很火,并且受到疫情的影响,我们的出行总是受限,电影院也总是关门,但是在家里又没有看大片的氛围,这个时候我们就可以通过自己来造一个宇宙,并在 VR 设备(Oculus 、cardboard)中来观看。 今天我打算

    2024年02月08日
    浏览(40)
  • uniapp中使用photo-sphere-viewer.js实现全景VR图

    最近项目中要求vr功能,可以进行图片的全景查看,在此,用到了vue里的一个实现全景预览的插件:photo-sphere-viewer.js。这些插件,在uniapp中不能直接用。不过uniapp有个组件web-view,可以引入内部或外部的HTML。 首先写一个html,在html中引入三个js文件 在body中放一个div 在js中ne

    2024年02月11日
    浏览(70)
  • 上海VR全景展示,快速了解VR全景拍摄

    导语: 随着科技的不断进步,虚拟现实技术的应用日益广泛。在这其中,VR全景图片作为一种数字化助力的全景拍摄方式,正逐渐成为人们关注的焦点。通过数字化技术,VR全景图片能够以360度全方位的视角呈现真实的场景,为观众带来身临其境的感受。本文将重点探讨VR全景

    2024年02月15日
    浏览(42)
  • 0基础学习VR全景平台篇 第78篇:全景相机-拍摄VR全景

    新手入门 圆周率科技,成立于2012年,是中国最早投身嵌入式全景算法研发的团队之一,亦是全球市场占有率最大的全景算法供应商。相继推出一体化智能屏、支持一键高清全景直播的智慧全景相机--Pilot Era和Pilot One,为用户带来实时畅享8K的高清沉浸式直播体验。 这里以Pi

    2024年02月14日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包