当前位置： 首页 > news >正文

HTML5开发实例-3D全景(ThreeJs全景Demo) 详解（图）

news 2025/7/6 21:24:55

前言

在现在市面上很多全景H5的环境下，要实现全景的方式有很多，可以用css3直接构建也可以用基于threeJs的库来实现，还有很多别的制作全景的软件使用
本教学适用于未开发过3D全景的工程狮

如果觉得内容太无聊可以直接跳到最后

下载代码

理论

整个3D全景所用的相关理论就不多说了，就稍微讲一下本案例用到的相关理论

相信程序猿们会更加关注代码实现的内容

这次讲解的demo是用css3DRender来构建一个正方体的全景场景

想象一下，我们需要做的就是构建一个正方体的盒子

然后把镜头放在以下这个正方体盒子里

每个面都贴上我们场景的一个面，那么当镜头转动时看到的就是置身其中的全景

HTML5开发实例-3D全景(ThreeJs全景Demo) 详解（图）

详细理论的东西以后再说，这次先跑起来一个简单的demo吧

demo解析

本教学用到两个库：
threeJS和基于它的CSS3DRender.js

代码是从官网上样例上扒下来做了一点调整。

<!DOCTYPE html>
<html>
<head><title>three.js css3d - panorama</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><style>body {background-color: #000000;margin: 0;cursor: move;overflow: hidden;}.surface { width: 1026px; height: 1026px; background-size: cover; position: absolute; }.surface .bg { position: absolute; width: 1026px; height: 1026px; }</style>
</head>
<body>
<p><p id="surface_0" class="surface"><img class="bg" src="images/posx.jpg" alt=""></p><p id="surface_1" class="surface"><img class="bg" src="images/negx.jpg" alt=""></p><p id="surface_2" class="surface"><img class="bg" src="images/posy.jpg" alt

相关文章：

HTML5开发实例-3D全景(ThreeJs全景Demo) 详解（图）

前言 在现在市面上很多全景H5的环境下，要实现全景的方式有很多，可以用css3直接构建也可以用基于threeJs的库来实现，还有很多别的制作全景的软件使用 本教学适用于未开发过3D全景的工程狮 如果觉得内容太无聊可以直接跳到最后 下载代码 理论 整个3D全景所用的相关理论就…...

编程日记 2023/10/11 2:58:21

springboot项目静态资源映射

1. springboot项目静态资源映射 import org.springframework.boot.web.client.RestTemplateBuilder; import org.springframework.context.annotation.Bean; import...

编程日记 2023/10/11 2:56:15

【Linux初阶】多线程1 | 页表的索引作用，线程基础（优缺点、异常、用途），线程VS进程，线程控制，C++多线程引入

文章目录 ☀️一、深入理解页表☀️二、Linux线程概念&#x1f33b;1.什么是线程&#xff08;重点&#xff09;⚡&#xff08;1&#xff09;线程的概念⚡&#xff08;2&#xff09;线程库初识 &#x1f33b;2.线程的优点&#x1f33b;3.线程的缺点&#x1f33b;4.线程异常&…...

编程日记 2023/10/11 2:55:15

Flink--9、双流联结（窗口联结、间隔联结）

星光下的赶路人star的个人主页 我还有改变的可能性&#xff0c;一想起这点&#xff0c;我就心潮澎湃 文章目录 1、基于时间的合流——双流联结&#xff08;Join&#xff09;1.1 窗口联结&#xff08;Window Join&#xff09;1.2 间隔联结&#xff08;Interval Join&#xff09;…...

编程日记 2023/10/11 2:54:14

家政服务行业做开发微信小程序可以实现什么功能

家政服务行业开发微信小程序可以实现多种功能&#xff0c;从而提升服务品质和效率&#xff0c;下面我们来详细介绍一些可能实现的功能。 一、展示服务信息 家政服务微信小程序可以展示各种服务信息&#xff0c;包括各类家政服务项目、价格、服务流程、服务人员信息等。用户可以…...

编程日记 2023/10/11 2:53:12

20哈希表-三数之和

目录 LeetCode之路——15. 三数之和 分析&#xff1a; 官方题解&#xff1a; LeetCode之路——15. 三数之和 给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k &#xff0c;同时还满足 nums[i] nums[j] nu…...

编程日记 2023/10/11 2:52:11

JVM 运行时数据区和垃圾收集算法

在 《深入理解 Java 虚拟机》一书中&#xff0c;作者将运行时数据区和垃圾收集算法放在开头章节&#xff0c;说明了这两个知识点是进一步学习 JVM 的基础知识点&#xff0c;相比后续的 垃圾收集器和 JMM&#xff0c;它也更加的简单。 运行时数据区 运行时数据区是《Java 虚拟…...

编程日记 2023/10/11 2:51:10

Java基于SpringBoot的高校招生系统

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝30W、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 文章目录 简介系统设计思路1 数据库设计2 系统整体设计 系统详细设计1系统功能模块2. 管理员功能模块3学生…...

编程日记 2023/10/11 2:50:09

6. Python使用Asyncio开发TCP服务器简单案例

1. 说明 在Python中开发TCP/IP服务器有两种方式&#xff0c;一种使用Socket&#xff0c;需要在py文件中引入对应的socket包&#xff0c;这种方式只能执行单项任务&#xff1b;另一种方式使用Asyncio异步编程&#xff0c;可以一次创建多个服务器执行不同的任务。 2. 接口说明 …...

编程日记 2023/10/11 2:49:08

景联文科技：AI大模型强势赋能，助力自动驾驶迭代升级

我国一直以来都将自动驾驶作为新兴产业发展的重点领域之一&#xff0c;工信部等相关部委出台了一系列自动驾驶发展战略、规划和标准&#xff0c;一些地方政府也在积极开展关于自动驾驶的地方立法&#xff0c;为自动驾驶技术的研发和应用提供更加具体的法律保障。例如&#xff0…...

编程日记 2023/10/11 2:48:07

多周期CPU设计

多周期CPU设计 指令类型clock skew 指令类型 在计算机体系结构中&#xff0c;指令可以分为不同的类型&#xff0c;通常有R-type、I-type和J-type指令。 R-type指令&#xff08;Register-type指令&#xff09;&#xff1a; R-type指令通常用于执行寄存器之间的操作&#xff0c;…...

编程日记 2023/10/11 2:47:06

Go 复合类型之字典类型介绍

Go 复合类型之字典类型介绍 文章目录 Go 复合类型之字典类型介绍一、map类型介绍1.1 什么是 map 类型&#xff1f;1.2 map 类型特性 二.map 变量的声明和初始化2.1 方法一&#xff1a;使用 make 函数声明和初始化&#xff08;推荐&#xff09;2.2 方法二&#xff1a;使用复合字…...

编程日记 2023/10/11 2:46:04

对于无法直接获取URL的数据爬虫

在爬学校安全教育题库的时候发现题库分页实际上执行了一段js代码&#xff0c;如下图所示 点击下一页时是执行了函数doPostBack&#xff0c;查看页面源码如下 点击下一页后这段js提交了一个表单&#xff0c;随后后端返回对应数据&#xff0c;一开始尝试分析获取对应两个参数&a…...

编程日记 2023/10/11 2:45:03

35.树与二叉树练习（1）（王道第5章综合练习）

【所用的树&#xff0c;队列&#xff0c;栈的基本操作详见上一节代码】 试题1&#xff08;王道5.3.3节第3题&#xff09;&#xff1a; 编写后序遍历二叉树的非递归算法。 参考&#xff1a;34.二叉链树的C语言实现_北京地铁1号线的博客-CSDN博客https://blog.csdn.net/qq_547…...

编程日记 2023/10/11 2:44:01

JSON数据处理工具-在线工具箱网站tool.qqmu.com的使用指南

导语&#xff1a;无论是处理JSON数据、进行文本数字处理、解码加密还是使用站长工具&#xff0c;我们都希望能够找到一个功能强大、简便易用的在线平台。tool.qqmu.com作为一款瑞士军刀般的在线工具箱网站&#xff0c;满足了众多用户的需求。本文将介绍tool.qqmu.com的多项功能…...

编程日记 2023/10/11 2:42:59

leetcode：190. 颠倒二进制位

一、题目&#xff1a; 函数原型&#xff1a; uint32_t reverseBits(uint32_t n) 解释&#xff1a;uint32是无符号int或short的别称&#xff0c;传入的参数是一个32位二进制串&#xff0c;返回值是该32位二进制串逆序后的十进制值 二、思路&#xff1a; 实际上并不需要真的去逆…...

编程日记 2023/10/11 2:41:58

Spring Cloud--@RefreshScope动态刷新的注意事项

原文网址&#xff1a;Spring Cloud--RefreshScope动态刷新的注意事项_IT利刃出鞘的博客-CSDN博客 简介 本文介绍Spring Cloud的RefreshScope动态刷新的注意事项。 不用RefreshScope也能动态刷新 Spring Cloud的默认实现了动态刷新&#xff0c;不加RefreshScope就能实现动态…...

编程日记 2023/10/11 2:40:58

visual-studio-code通过跳板机连接远程服务器的配置操作

step1:在本机上生成私钥和公钥 sh-keygen -t rsa -C “your_emailxxx.com”生成的两个默认文件中&#xff0c;id_rsa.pub是公钥&#xff0c;id_rsa是私钥 step2:在vscode安装Remote-SSH插件 step3:将本机生成的私钥和公钥上传服务器上 把本机生成的rsa_id.pub公钥上传至服务…...

编程日记 2023/10/11 2:38:55

LuatOS-SOC接口文档(air780E)-- gpio - GPIO操作

常量 常量 类型 解释 gpio.LOW number 低电平 gpio.HIGH number 高电平 gpio.PULLUP number 上拉 gpio.PULLDOWN number 下拉 gpio.RISING number 上升沿触发 gpio.FALLING number 下降沿触发 gpio.BOTH number 双向触发,部分设备支持 gpio.HIGH_IRQ …...

编程日记 2023/10/11 2:37:54

一个命令让redis服务端所有信息无所遁形~(收藏吃灰系列)

Redis服务器是一个事件驱动程序&#xff0c;它主要处理两类事件&#xff1a;文件事件和时间事件。这些事件的处理和Redis命令的执行密切相关。下面我将以Redis服务端命令为切入点&#xff0c;深入解析其工作原理和重要性。 首先&#xff0c;我们先了解Redis服务端有哪些命令。…...

编程日记 2023/10/11 2:36:53

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

编程新知 2025/7/5 21:19:47

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

编程新知 2025/7/6 7:25:51

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

编程新知 2025/7/5 2:19:17

YSYX学习记录（八）

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

编程新知 2025/7/5 19:43:21

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

编程新知 2025/7/6 1:52:36

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

编程新知 2025/7/6 14:02:05

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

编程新知 2025/7/4 14:40:43

【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

编程新知 2025/7/6 16:09:40

BCS 2025｜百度副总裁陈洋：智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

编程新知 2025/7/6 8:09:34

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

编程新知 2025/7/5 9:25:53