shrekshrek / css3d-engine

css 3d light engine. very easy to use. 14k

css3d-engine

css 3d引擎，为方便工作需要制作
优势:因为是基于div+css3实现,相对canvas webgl拥有更好的平台兼容性。
劣势:渲染性能相比canvas webgl要弱,只适合创建较小的三维面片场景。
但是只有14k,相比那些动辄300-400k的大型3d库,这是个非常小巧实用的辅助支持库。

这个库只是基于原生css transform中除了matrix之外的属性，可以使用比较容易理解的欧拉角来控制旋转，建立简单的3D应用，对于3d开发0基础的开发者是个友善简单的入门类库。对于有更高3d要求的开发者建议使用three.js等类库。但同样对开发者的基础要求会更高，这里我整理了一个更通用的3d基础学习案例
https://github.com/shrekshrek/css3d-matrix-es6
抽取出three中3D核心类库，组织了一个简化版的3D引擎，并做了大量的注释，可以帮助了解3D算法基础中的矢量，矩阵及四元数等的相互关系。

有3d问题欢迎加入研讨。QQ群:572807793（webgl技术交流）

注意1:为了节约计算量,transform部分没有使用matrix,只用了最基本的translate,rotation,scale等属性的排列,默认的旋转顺序是rotationX(),rotationY(),rotationZ(),这样无法解决万向锁等问题,所以在使用时需要了解适应这点。如果需要调整可以使用sort()命令调整旋转顺序。

注意2:旧版的Cube更新为Box。

实现案例（移动端H5）:

adidas绝不凋谢 https://shrek.imdevsh.com/show/drose/

adidas胜势全开 https://shrek.imdevsh.com/show/bbcny/

adidas绝不跟随 https://shrek.imdevsh.com/show/crazylight/

淘宝造物节 https://shrek.imdevsh.com/show/zwj/

这种Interactive 3d motion graphic类型的网站开发，以前都是程序来做动画，需要书写大量的tween代码，开发效率难以提高。从2018年初开始已经改用更先进高效的内部工具套装AEP开发，demo地址如下：
https://github.com/shrekshrek/aep

• VERSION: 0.1.0 DATE: 2014-11-20

License

This content is released under the MIT License.

css3d-engine's Issues

请问这个是不是不支持ios9以下版本

请问这个是不是不支持ios9以下版本，是css3前缀的问题吗

最好可以在readme上面布置源代码,简易demo

方便大家看readme就可以直接入手，及调用各个接口

文档有点匮乏，看了你的几个demo但是用起来还是吃力

能否分享下淘宝造物节的源码，就是如何将css3d、orienter、jstween这几个库结合起来用的完整案例。

C3D.create 创建的场景 外部怎么获取 子场景来做动画？

var scene1 = C3D.create({
            type: 'sprite',
            position: [0,170,-s.fov],
            scale: [0.29198],
            children: [
                {
                    type: 'plane',
                    name: 'market',
                    size: [2192, 5134],
                    material: [
                        { image: this.bgData[0].url, repeat:'no-repeat' }
                    ]
                },
                {
                    type: 'sprite',
                    name: 'classes',
                    position: [-420,-1260],
                    children: [
                        {
                            type: 'plane',
                            name: 'leftWin',
                            position: [0,0],
                            size: [834, 797],
                            material: [
                                { image: this.bgData[2].url, repeat: 'no-repeat' }
                            ]
                        },
                        {
                            type: 'plane',
                            name: 'rightWin',
                            size: [835, 797],
                            position: [835,0],
                            material: [
                                { image: this.bgData[3].url, repeat: 'no-repeat' }
                            ]
                        },
                    ]
                },
                {
                    type: 'plane',
                    name: 'door',
                    size: [2192, 1114],
                    position: [0,-1410],
                    material: [
                        {image: this.bgData[4].url, repeat: 'no-repeat'}
                    ]
                }

            ]
        });

如果获取children 中 name 为 leftWin 的 plane？
补充：因为要取出来使用Tween做动画

C3D.Skybox 全景出现直角

您好，目前我使用您的代码，做一个移动端全景页面，发现当移动到左右两面的时候因为视角的原因出现直角，页面折起来的感觉请问该如何处理呢？

@shrekshrek

pano模板中会出现闪条

Invalid assignment value for "this.originX"

Throw an Error when webpack import / require.

抓取源代码

怎么抓取源码，不会只是右键另存为吧~
http://shrek.imdevsh.com/demo/kfc/

建议增加webgl能力，然后可以回退到css3

这样就性能大增 现在微信里好像已经支持webgl了吧？

您好，可以请教下造物节开场动画思路嘛~

您好，最近用了css3d-engine在做一个项目，也想实现造物节开场那个旋转入场，然后拼合成一个全景的动画，全景部分我计算，并摆好位置了，想请教下入场旋转那部分思路，谢谢啦~

Ok

JT.restart?undefined?

doc里有写这个这个方法，但是并没有
怎么restart呢

有没有demo的源码，有偿

有没有demo的源码，有偿，绝不商用，仅是学习

无法通过require引入此库呢

使用vue 通过require引入报错

需要使用Array.isArray(obj)来判断变量是否为数组

C3D.create = function (obj) {
        var _obj;
        switch (typeof(obj)) {
            case 'array':
                _obj = {type: 'sprite', children: obj};
                break;
            case 'object':
                _obj = obj;
                break;
            default:
                return;
        }

        return createObj(_obj);
    };

这段代码里面使用了typeof(obj)来判断是否为数组。事实上typeof([])返回的是'object'

Stage的children为空数据

导致stage.removeAllChild() 无法使用。

怎么添加文本显示

建议增加场景导出数据的功能

s.toJSON() // return JSON data
这样就可以把整个场景导出保存啦