• 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++初阶 日期类的实现(上)
    使用sysctl调优Linux内核
    activiti开源工作流集成示例
    多肽介导PEG磷脂——靶向功能材料之DSPE-PEG-RGD/TAT/NGR/APRPG
    Mac M1使用UTM安装centos7 x86_64虚拟机
    回溯系列--11个题
    Docker-Compose安装Gitlab
    Centos安装Rclone，操作Minio基本命令
    孤儿进程，守护进程，僵尸进程
    新零售数智化转型，需要怎样的数据底座？
  • 原文地址：https://blog.csdn.net/lmrylll/article/details/133648262