创建 3d 立方体的 jQuery 插件 jCube

码农软件 · 软件分类 · 其他jQuery插件 · 2020-01-02 22:43:33

授权协议: MIT
开发语言: JavaScript
操作系统: 跨平台
软件首页: https://justinzzc.github.io/jCube/
软件文档: https://github.com/justinzzc/jCube/blob/master/README.md
官方下载: https://github.com/justinzzc/jCube/archive/master.zip

软件介绍

jCube

只需添加一行js脚本就可以创建出一个可以拖动旋转的3d立方体。

用法

基本使用方法

<head>
    <script src="jquery.min.js"></script>  
    <script src="../dist/jCube.min.js"></script> 
</head>

<body>
...

<div class="room">

</div>
... 
<script>  
    $(function(){  
        $('.room').jCube({  
            wallWidth:635,  
            wallHeight:664,  
            cube:{  
                back:'a/back.jpg',
                front:'a/front.jpg',
                left:'a/left.jpg',
                right:'a/right.jpg',
                top:'#90c0c0',
                bottom:'#9f5d3b'  
                },  perspectiveRate:1.21  });  
           });
</script> 
</body>

配置项

可用配置项

墙纸宽度 wallWidth , 墙纸高度 wallHeight
立方体背景配置 cube
墙面附加物配置 attach
立方体class名称 cubeClass
视角调整比例 perspectiveRate

默认配置

{
    wallWidth: 300,
    wallHeight: 300,
    cube: {
        front: 'white',
        back: 'white',
        left: '#d3d3d3',
        right: '#d3d3d3',
        top: '#f3f3f3',
        bottom: '#ddd' },
    attach: {
        front: '',
        back: '',
        left: '',
        right: '',
        top: '',
        bottom: '' },
    cubeClass: 'room-cube',
    perspectiveRate: 1,
    viewLimit: {
        xMin: -15,
        xMax: 15,
        yMin: -360,
        yMax: 360 }
}

详细请查看

demo页面1-立方体

本文地址：https://codercto.com/soft/d/22535.html

码农书籍

区块链

长铗、韩锋 / 中信出版社 / 2016-7 / CNY 58.00

《区块链：从数字货币到信用社会》从历史与背景、发展现状、基础原理与技术、应用生态、存在的问题与挑战等方面论述了区块链是怎样立起来的，为什么人人都在谈论区块链，区块链的秘密在哪里、进阶区块链（第二代区块链技术）是什么，区块链怎么玩，怎样从信息互联网走向价值互联网，如何用法规约束和监管区块链，区块链走向何处、争议与挑战，并通过经济、金融、货币、法律、科技哲学等角度来加以分析区块链在各个方面遇到的问题和......一起来看看《区块链》这本书的介绍吧!

码农工具

UNIX 时间戳转换

HSV CMYK 转换工具

HSV CMYK互换工具