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

    前言

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

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

    下载代码

    理论

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

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

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

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

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

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

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

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

    demo解析

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

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

    1. html>
    2. <html>
    3. <head>
    4.     <title>three.js css3d - panoramatitle>
    5.     <meta charset="utf-8">
    6.     <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    7.     <style>
    8.         body {
    9.             background-color: #000000;
    10.             margin: 0;
    11.             cursor: move;
    12.             overflow: hidden;
    13.         }
    14.         .surface { width: 1026px; height: 1026px; background-size: cover; position: absolute; }
    15.         .surface .bg { position: absolute; width: 1026px; height: 1026px; }
    16.     style>
    17. head>
    18. <body>
    19. <p>
    20.     <p id="surface_0" class="surface">
    21.         <img class="bg" src="images/posx.jpg" alt="">
    22.     p>
    23.     <p id="surface_1" class="surface">
    24.         <img class="bg" src="images/negx.jpg" alt="">
    25.     p>
    26.     <p id="surface_2" class="surface">
    27.         <img class="bg" src="images/posy.jpg" alt
  • 相关阅读:
    面经——C++语言1
    关于 GIN 的路由树
    深度学习调参指南
    十一、DS18B20温度传感器
    【接口测试】如何在 Eolink Apilkit 中使用 cookie ？
    戴着人工心脏上脱口秀大会——王十七的充电人生
    python的安装及常用语法(一)
    MechMind结构光相机 采图SDK python调用
    HTTP代理是什么，有什么用？
    基于模板引擎的博客系统
  • 原文地址：https://blog.csdn.net/lmrylll/article/details/133648262