推荐一款3D插件可以用纯html+css打造3D效果

Room3D

介绍

Room3D是一款JS插件，它能帮你用纯html/css快速构建3D房间和盒子。
这是一个轻量且不依赖任何第三方库的插件，设计它的初衷仅用于帮助开发者快速构建简单布局的3D场景，或者用于简易3D特效。如果你需要构建复杂场景，且对渲染效果要求较高，建议使用基于WebGL的3D库，如threeJs/babylonJs等。

---

中文文档    |    English Document   |   DEMO on gitee   |   DEMO on git   |   Github仓库   |   Npm Package

---

使用方法

1. 安装插件，你将获得一个名为 Scene3D 的构造函数

   • 通过 <script src="https://blog.csdn.net/DAN90s_/article/details/room3d.js"></script> 标签引入html文件，或者
   • 在模块化开发中，通过 npm install room3d 安装插件，然后
     • 使用 const Scene3D = require("room3d") 或者
     • import Scene3D from "room3d" 都能获得 Scene3D 构造函数

2. 引入样式文件 room3d.css

3. 准备Html元素 <div id="wraper"><div> ，选择器可使用id或class。你可以手动为元素设置css width 和 height ，如果未设置，插件将会为其设置 widt:100%; height:100%;

4. 编写脚本使用配置项创建场景和元素吧

   let myScene = new Scene3D("#wraper",{
     width:"400px",
     depth:"400px",
     rooms:[
       {
         height:"400px",
         boxes:[
           {
             width:"100px",
             depth:"100px",
             height:"100px",
             left:"150px",
             top:"160px",
             color:"green"
           }
         ]
       }
     ]
   })
   

   

关系图

API

Scene 场景对象

配置项

方法

创建一个Scene对象 let Scene = new Scene3D("#Scene1",{options...}) ，该对象将可以使用以下方法：

• Scene.showGrid( boolean )

  • 参数
    boolean {boolean} | 必须 | 传true表示显示，false表示隐藏

  • 返回值
    返回当前Scene对象，可用于链式调用

  • 说明
    用于显示或隐藏场景的网格

• Scene.resetScene()

  • 参数
    -

  • 返回值
    返回当前Scene对象，可用于链式调用

  • 说明
    重置场景旋转和缩放状态至初始值

• Scene.buildRoom( options )

  • 参数
    options {object} | 可选 | 配置对象，参照Room配置项

  • 返回值
    返回被创建的Room对象

  • 说明
    用传入的配置参数，手动创建Room，如果不传options参数，则使用默认配置创建Room

---

Room 房间对象

配置项

其中 top right bottom left 用于定位房间在场景中的水平位置，一般 left 和 right 只需要设置其中一项即可。top 和 bottom 同理
关于宽度、进深、高度如何定义，可查看文档顶部的图示。

方法

创建一个Room对象 let Room = Scene.buildRoom() 。如果是通过配置对象生成的Room，则可以通过 let Room = Scene.rooms[index] 获得Room对象，该对象可以使用以下方法：

• Room.showFloor( boolean )

• Room.showWall( boolean )

• Room.showLine( boolean )

  • 参数
    boolean {boolean} | 必须 | 传true表示显示，false表示隐藏

  • 返回值
    返回当前Room对象，可用于链式调用

  • 说明
    用于显示或隐藏Room的Floor地板、Wall墙壁、Line墙角线。

• Room.backface( value )

  • 参数
    value {string} | 必须 | value可以为 “hidden” 或 “visible”

  • 返回值
    返回当前Room对象，可用于链式调用

  • 说明
    用于设置墙壁元素的 backface-visibility 样式，具体表现是：设置为"hidden"，朝向屏幕方向的墙壁将变成透明的，从而可以看见房间内的元素，且不会遮挡鼠标与房间内元素的交互。

• Room.buildDoor( wall , doorOptions )

  • 参数
    wall {string} | 必须 | wall参数可选值为 "left" , "right" , "fore" , "back"
    
    doorOptions {object} | 可选 | 门的配置项对象，详细配置参数见下方的Door配置项。

  • 返回值
    返回被创建的Door对象

  • 说明
    用传入的配置参数，手动创建Door。

    Door 配置项

    属性名	值类型	默认值	说明
    className	string	“”	门类名，将使用 "Room3D_door_" 进行拼接，用作门容器的class类名
    width	string	“60px”	门宽度，必须包含px等单位，允许使用百分比，不允许负值
    height	string	“120px”	门高度，必须包含px等单位，允许使用百分比，不允许负值
    left	string	“50%”	门距墙左边缘距离，可设置为包含单位的数值或百分比值
    right	string	-	门距墙右边缘距离，可设置为包含单位的数值或百分比值，如果希望以 right 值作为定位，必须将 left 设置为 auto
    show	boolean	true	是否显示门，如果为 false ，则只能看到门洞。
    type	string	“single left”	门类型，可选参数："single left" 单开门，门轴在左侧、 "single right" 单开门，门轴在右侧、 "double" 双开门。
    openSide	string	“outside”	开门的方向，"outside" 朝外开门、 "inside" 朝内开门。
    color	string	“#634A42”	颜色色值，设置门板的颜色。
    doorFrameWidth	string	“3px”	门框宽度，可以为包含单位的数值，不允许百分比。
    doorFrameColor	string	“#3B2A24”	门框颜色

    Door 方法

    使用 let Door = Room.buildDoor( wall , doorArray )[index] 或者 let Door = Room.walls[wall].doors[index] 获取Door对象，该对象可以使用以下方法：

    • Door.openDoor() 将门打开
    • Door.closeDoor() 将门关闭

• Room.buildBox( options )

  • 参数
    options {object} | 可选 | 配置对象，参数见Box配置项

  • 返回值
    返回被创建的Box对象

  • 说明
    用传入的配置参数，手动创建Box，如果不传options参数，则使用默认配置创建Box

• Room.destroy()

  • 参数
    -

  • 返回值
    -

  • 说明
    销毁Room实例对象

---

Box 盒子对象

配置项

其中 top right bottom left 用于定位盒子在房间中的水平位置，一般 left 和 right 只需要设置其中一项即可。top 和 bottom 同理

方法

创建一个Box对象 let Box = Room.buildBox() 。如果是通过配置对象生成的Box，则可以通过 let Box = Room.boxes[index] 获得Box对象，该对象可以使用以下方法：

• Box.showLine( boolean )

• Box.showMarker( boolean )

  • 参数
    boolean {boolean} | 必须 | 传true表示显示，false表示隐藏

  • 返回值
    返回当前Box对象，可用于链式调用

  • 说明
    用于显示或隐藏Box的Line边角线、Marker标注。

• Box.buildMarker( options )

  • 参数
    options {object} | 可选 | 配置对象，参数见Marker配置项

  • 返回值
    返回被创建的Marker对象

  • 说明
    每一个Box对象被创建的时候会顺便自动创建相应的Marker对象，所以该方法实际上是先销毁原有的标注，再用新的配置项重新创建一个标注。如果你只是希望改变标注的一些数据，可以使用Marker对象的 updateMarker() 方法。

• Box.destroy()

  • 参数
    -

  • 返回值
    -

  • 说明
    销毁Box实例对象

---

Marker 标注对象

配置项

由于在dom结构中标注是直接创建在场景中，所以其 top right bottom left 是相对于场景的定位，同样 left 和 right 以及top 和 bottom只需要设置其中一项即可。并且由于 left 和 top 的默认值是一个表达式，用于将标注创建在盒子的正上方，所以如果需要用 right 和 bottom 进行定位，则必须将对应的 left 和 top 值设置为 auto 。

方法

创建一个Marker对象并获取它 let Marker = Box.buildMarker() 。如果要获取已经生成的Marker，则可以通过 let Marker = Box.marker 获得，该对象可以使用以下方法：

• Marker.updateMarker( params )

  • 参数
    params {object} | 必须 | params对象必须包含与标注content模板相匹配的属性，以及需要更新的值。

  • 返回值
    返回当前Marker对象

  • 说明
    用于更新Marker内容模板。

• Marker.destroy()

  • 参数
    -

  • 返回值
    -

  • 说明
    销毁Marker实例对象

---

注意事项

1. 所有的长度及距离数值必须使用统一的单位，推荐使用px，否则会出现一些因为单位换算而导致的bug

2. 两个紧贴相邻的Room如果需要在紧贴着的墙上创建门，需要在两个Room上对应的墙上都使用 buildDoor() 方法，在对称的位置创建门，同时将其中一个门设置为不可见，即可实现。

3. 你还可以使用css为场景内的各种元素设置 background-image 样式，模仿贴图效果，从而实现更丰富的场景。

NPM包版本与更新

• 1.0.0 发布时间：2022/6/8
  • 1.0.1 & 1.0.2 发布时间：2022/6/8
    • 修改说明文档
  • 1.1.0 发布时间：2022/6/15
    • Marker 对象添加 scene 属性，它的值指向当前场景对象；
    • Box 对象增加 .destroy() 方法；
    • Room 对象增加 .destroy() 方法。

其他

这篇好文章是转载于：学新通技术网