jRoom 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
jRoom 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
授权协议: GPL
开发语言: JavaScript HTML/CSS
操作系统: 跨平台
收录时间: 2016-09-27
提 交 者: Justin_zzc

jRoom

 一个可以创建3d房间的jquery插件。只需添加一行js脚本就可以创建出一个可以拖动旋转的3d房间。

配置项

  • 可用配置项

    • 墙纸宽度 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
    }
}

基本使用方法

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

<body>
...

<div class="room">

</div>
...

<script>
    $(function(){
       $('.room').jRoom({
           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>

详细请查看 demo页面 / demo页面2

展开阅读全文

代码

jRoom 的相关资讯

还没有任何资讯

jRoom 的相关博客

还没有任何博客,写博客

jRoom 的相关问答

还没有任何问答,马上提问

评论 (0)

加载中
更多评论
0 评论
13 收藏
分享
返回顶部
顶部