3d-elements 中文文档教程

Question

3d-Elements

Description

一个渲染几何实体的库，由 html 和 svg 元素组成，使用 transform CSS 属性进行 3d 旋转，提供用于控制渲染形状的旋转和位置的接口。

Installation

load as script tag

<script src='https://unpkg.com/3d-elements'></script>

NPM

npm install --save 3d-elements

Examples

rendering shapes in HTML

在下面的 HTML 片段中，库是从脚本标签加载的，因此：

• the library will:

1. the e3d base stylesheet to the document,
2. attach an event listener to the document to run the buildShapesInDom function after the onLoad event. The buildShapesInDom function selects all elements with the "e3d-shape" attribute (except those created in javascript) and calls the fromDom method of the Shape corresponding to the attribute value.

• Decagon.fromDom will be called with the figure element as its argument which so:

1. any existing children of the e3d-shape element will become e3d-faces, with their children still in place.
2. Extra e3d-face children will be added to ensure the e3d-shape element has the right number of faces.
3. the figure element will be styled based on its size, spin and face-class attribute
4. the 'gradual' and 'constant' properties will be added to the element - these are interfaces for moving and rotating the shape during runtime.

<script src='https://unpkg.com/3d-elements'></script>
<figure e3d-shape="Decagon" 
size="50 100 50" 
spin="30 60 10" 
face-class="preset-e3d-green preset-e3d-centered">
    <div>first face</div>
    <div>
        <p>second face</p>
        <p>it has <b>more</b> content</p>
    </div>
</figure>

creating shapes in javascript

'make' 对象公开了用于创建新形状的函数。 每个函数返回可以附加到文档的 e3d-shape 元素（带有 e3d-face 子元素）。

var dodecahedron = e3d.make.Dodecahedron({
    faceClass:'preset-e3d-black',
    size: [200],
    spin: [0,0,0],
    move: [0,100,0],
    faceContent: '<p>This mark-up will be added to each face</p>'
})
document.querySelector('div').appendChild(dodecahedron)

supported shapes

• Cube
• Pyramid
• Dodecahedron
• Cuboid
• Decagon
• Hexagon
• Icosahedron
• Octahedron
• PentagonalTrapezohedron
• Tetrahedron
• TruncatedCube