基于 HTML5 Canvas 的 3D 渲染引擎界面以及吸附等效果的运用

// 地板

floor = createNode([0, 0, 0], [600, 5, 400]).s({

　　'all.color': '#A0A0A0',// 六面颜色

　　'label': '地板',// 图元文字内容

　　'label.face': 'top',// 文字在3d下的朝向，可取值（left|right|top|bottom|front|back|center）

　　'label.background': 'yellow',// 图元文字背景

　　'label.position': 22,// 图元文字位置

　　'label.t3': [10, 0, -10],// 文字在3d下的偏移，格式为 [x,y,z]

　　'label.font': '28px arial, sans-serif'// 图元文字字体

});

// 桌面

table = createNode([0, 120, 0], [400, 10, 280], floor).s({

　　'shape3d': 'cylinder',// 为空时显示为六面立方体，cylinder 圆柱

　　'shape3d.side': 60,// 决定 3d 图形显示为几边型，为 0 时显示为平滑的曲面效果

　　'shape3d.color': '#E5BB77',// 3d 图形整体颜色

　　'label': '桌子',

　　'label.face': 'top',

　　'label.background': 'yellow',

　　'label.position': 23,

　　'label.t3': [0, 0, -10],

　　'label.font': '20px arial, sans-serif'

});

// 四个桌腿

foot1 = createNode([100, 60, 80], [20, 110, 20], table).s({

　　'shape3d': 'cylinder',

　　'shape3d.color': '#E5BB77',

});

foot2 = createNode([-100, 60, 80], [20, 110, 20], table).s({

　　'shape3d': 'cylinder',

　　'shape3d.color': '#E5BB77',

});

foot3 = createNode([100, 60, -80], [20, 110, 20], table).s({

　　'shape3d': 'cylinder',

　　'shape3d.color': '#E5BB77',

});

foot4 = createNode([-100, 60, -80], [20, 110, 20], table).s({

　　'shape3d': 'cylinder',

　　'shape3d.color': '#E5BB77',

});

// 盒子

box = createNode([0, 150, 0], [100, 50, 60], table).s({

　　'all.color': '#2e2f32',

　　'front.color': '#BDC3C7',// 前面颜色

　　'note': '盯着你看', // 图元冒泡标注

　　'note.face': 'top',

　　'note.position': 7,

　　'note.t3': [0, 0, 10],

　　'note.autorotate': true// 图标在 3D 下是否自动朝向眼睛的方向

});