使用css3d-engine.js编写简单的 360全景h5页面

最新推荐文章于 2025-05-17 12:26:25 发布

原创

最新推荐文章于 2025-05-17 12:26:25 发布 · 5.2k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#css3d-engine #360全景 #h5

本文介绍了如何使用css3d-engine.js编写360全景h5页面，通过实例展示了C3D.Stage、C3D.Sprite和C3D.Plane的用法，以及如何创建背景、添加交互按钮、处理触摸事件和实现卷轴展开动画。项目中还使用了jstween和PxLoader进行动画和资源预加载。文章适合初学者入门，但复杂的交互逻辑未深入探讨。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是这里所说的360全景h5页面？查看下面的案例进行了解：

开发项目：http://game.flyh5.cn/resources/game/wechat/zjh/fangtuo/index.html
案例1：http://cpic18ny1.energytrust.com.cn/
案例2：https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxc8a2ce35fa3799ea&redirect_uri=https%3A%2F%2Fapi-wx.51h5.com%2Fweb%2Foauth%2Fcallback%2Fid%2Fzhihuipingmu.html%3Fredirect%3Dhttp%253A%252F%252Fevent.ews.m.jaeapp.com%252Foneleaf%252Fwx%252F&response_type=code&scope=snsapi_base&connect_redirect=1&state=af817cf4f82372fbb17733029aebd16e#wechat_redirect
案例3：http://wap.i-h5.cn/hzx_game/dell/index.html?from=groupmessage&isappinstalled=0

我所做的项目是一个展示类的h5营销项目，没有太多的交互逻辑，主要在于那个360场景的编写，其实我也是赶鸭子上架，boos突然丢了一个案例给我研究一下，说会有一个项目进来要做成360旋转效果，我&*￥@%*@￥%@@—￥#￥。

好吧，研究的坎坷历程就略过了吧，我也是在别人的项目基础上做的文章，而且之前也没有写过3d动画，所以只拿一些我研究出来的东西说道记录一下，具体原理我也一知半解，不过使用他写个简单项目应该还是够了。

项目中主要使用的3d动画库为：css3d-engine.js。github为：https://github.com/shrekshrek/css3d-engine
还使用了一个名为jstween的动画库，可以配合css3d-engine.js使用。代码中以JT代替。github为：https://github.com/shrekshrek/jstween

项目过程中使用了PxLoader进行360场景图片等资源的预加载。github为：https://github.com/thinkpixellab/PxLoader

话不多说，让我们一步一步来构建一个简单的360场景动画吧。

C3D.Stage

三维场景，需要首先创建，其他所有显示内容都通过addchild方法放入场景即可。

const anta = new C3D.Stage({
    el: $("#anta")[0]
});

我们选用一个id为anta的一个div作为场景的承载元素。

C3D.Sprite

C3D.Sprite是一个三维显示元素基类，一般作为容器使用，用它来创建一个显示在页面上的元素的容器

const spMain = new C3D.Sprite();
spMain.position(0, 0, -750).update();
anta.addChild(spMain);

创建一个C3D.Sprite容器作为承载所有显示内容的主容器，后续所有的显示内容都添加到这个容器中。并添加这个主容器到场景中。

C3D.Plane

C3D.Plane表示为一个平面，就是一个二维平面，一般用它来创建一个显示元素，也就是场景中所有可以看到的平面都是用它来创建，比如场景中交互的按钮这些，通过创建一个C3D.Plane，并把它添加到C3D.Sprite容器中即可。

ps：刷新相应的dom内容，位置，角度，尺寸，材质等信息只有在执行了update方法后才会被作用到dom节点，具体可以参考github

创建场景背景

场景的背景也是通过一个C3D.Sprite容器来承载，并且显示的背景元素会通过C3D.Plane来创建，这里会配置一些参数，具体看代码：

    // 一些参数定义

    // 定义背景图片的个数
    var bg_num = 20;

    // 背景的宽高信息，也就是那张背景大图的宽高 bgInfo
    var o = {
            w: 3868,
            h: 2474
        },
        // 每一个背景元素的宽度。其实就是背景大图的宽度除以你的切好的背景图片个数
        M = o.w / 20,

        // 此处需要根据不同的场景宽度（大图的总宽度）进行调整，否则背景图片元素之间可能有间隔
        h = 605,

        //
        bgImage = [
            // 这里是场景的背景图片url链接，比如：
            'bg-image1.jpg',
            'bg-image2.jpg',
            ...
        ];


    // 创建背景容器
    var panoBg = new C3D.Sprite();

    // No need for attention
    var d = {
            lat: 0,
            lon: 0
        },
        f = {
            lon: 0,
            lat: 0
        };

    // c.lon设置场景的水平初始的位置,也就是场景生成后，默认停留到哪一个位置，这里是角度
    // 你可以根据项目自行设置场景最后停留的位置。而且在场景初始动画中，他的动画结束位置也需要
    // 和此处保持一致
    var c = {
        lon: 205,
        lat: 0,
    };

    var p = true;


    // 设置背景容器初始信息，并添加至spMain这个主容器中。
    panoBg.name("panoBg").position(0, 0, 0).update();
    spMain.addChild(panoBg);

    for (var R = 0; R < bg_num; R++) {
        // No need for attention