voxel折腾指南

voxel是一个轻便的3D渲染的库，开发3D场景非常方便，当然你甚至可以很方便的利用他来搭建你的宫殿。

目前我将它用到了我的博客主页，演示地址：http://djlxs.herokuapp.com/

voxel

var myVoxel = new voxelcss.Voxel(100, 250, 0, 300, {
  mesh: voxelcss.Meshes.grass
});

 

当然如果要单独设置每个面的颜色可以这种

new voxelcss.Voxel(0, 0, 0, 100, {
    mesh: new voxelcss.Mesh({top:new voxelcss.ColorFace("#c40000")})
 })

 

用于创建一个新的立方体 Voxel(x, y, z, dimension, options) x,y,z代表立方体的位置坐标，dimension就是尺寸 option用来设置立方体的颜色也可以是背景图片

sence

场景 可以看成一个相机 主要用来对整个的 进行平移 旋转 缩放（就像一个相机一样进行调焦） 属性：rotate(x, y, z) 和css动画里面的rotate类似。当然就会有类似的三个细分的属性 rotateY(Y) rotateX(x) rotateZ(z)

pan(x, y, z) 平移 也有类似的3个细分的属性，类似于translate

zoom：缩放

attach(document) 在相应的元素里面呈现。比如body里面，一个div里面

enableOrbit() 是建立的3D场景能够随鼠标的移动旋转，当然disableOrbit()用来禁止这一特性；就是禁止rotate；当然与此类似的还有enablePan()，disablePan()， enableZoom()，disableZoom()

add(voxel) 添加一个立方体

addLightSource(lightSource) 添加光源

editor

主要是允许用户通过点击鼠标左右键来实现立方体的新建与删除，当然如果你不希望别人能够进行更改，那么可以禁止 。 里面的方法都很简单： enable() 允许editor功能，用户按下鼠标左右键就可以实现立方体的增删 disable() 禁止

enableAutoSave() 就是将你添加或者删除的voxel自动保存到本地缓存，默认是开启的，当然要关闭，就是用disableAutoSave()。所以你可以发现就算是关闭了浏览器，再次打开后，还是你当初退出的模样，肯定就是用了本地缓存啊

直接通过鼠标的点击来建造出一个我们想要的3D效果，是比较直观的，但是如果代码来写的话，一般人的3D思维都是有限的。所以我们可以将我们通过鼠标点击来直观的创建3D世界，这些信息会本地存储，当然你可以使用export()将本地存储的内容以字符串形式导出。然后通过import导入，那么这样就非常方便了 export() import(exportString)

当然如果是从浏览器中复制过来，那么复制过来的时候是一个数组，那么我们将这个数组转换成字符串数组

world

用来保存voxel的 positions, meshes, and sizes。keep in mind that a world only saves voxels added to that world or an editor connected to the world。It will not save voxels added to the scene but not thought the world。 也就是说通过scene添加的voxel是不会保存的

ColorFace

允许你为每个方块设置颜色

editor.add(new voxelcss.Voxel(x*50, y*50, z*50, 50, {
      mesh: new voxelcss.Mesh(new voxelcss.ColorFace('#ca8940'))
}));

 

既可以是16进制,也可以是rgb,具体可以看它的构造函数。 构造函数：

ColorFace(r, g, b, a)
ColorFace(hex)
ColorFace(dict{r, g, b})

 

ImageFace

Contains image information for a single voxel face. Used by the Mesh class. 包含一个面的图片信息，来供meshclass使用

ImageFace()
\\Creates an image face containing a transparent gif.
ImageFace(source)
\\Creates an image face containing the provided source.

 

当然有两个构造函数，不多解释。

Mesh

用来给每个面设置背景图片，背景颜色等等，当然如果你要单独为每个面来设置，可以使用setFront(face) setBack(face)setLeft(face) setRight(face) setTop(face) setBottom(face)等等细化的方法来实现

editor.add(new voxelcss.Voxel(0, 0, 0, 100, {
    mesh: new voxelcss.Mesh({top:new voxelcss.ColorFace("#c40000")})
 }));

 

LightSource

LightSource(x, y, z, lightDistance, darkness, lightness)

 

 主要用来设置场景的光源 包括光源的位置（x,y,z） 光源的距离：travelDistance 光源明暗darkness，值[0-1] 0：dark lightness值[0-1] 1：light 这个不用过多解释

由于比较简单可能有点泛泛而谈，理解的最好方式，就是看tests文件夹下的测试例程，所有的用法也就一目了然了。