html3d

3D rendering implementation to HTML made with three.js

Examples

Spinning cube

Spinning heart

Perfect sphere

The rock

A quick example

Implementation

<script src="https://unpkg.com/html3d"></script>

Create a scene

<html3d>
    <!-- Your code will be here! -->
</html3d>

Creating a mesh

Note: By default its a 1x1x1 box and has mesh basic material with the color white.

<html3d>
    <mesh></mesh>
</html3d>

Moving the camera back

Note: This will allow you to actually see the cube.

<html3d z="5">
    <mesh></mesh>
</html3d>

Changing the color of the material

<html3d z="5">
    <mesh>
        <mesh-basic-material color="red"></mesh-basic-material>
    </mesh>
</html3d>

Adding a controller

Note: This will allow you to move the camera object with your mouse.

<html3d z="5">
    <mesh>
        <mesh-basic-material color="red"></mesh-basic-material>
    </mesh>
    <trackball-controls></trackball-controls>
</html3d>

Maximizing the scene

<html3d maximize z="5">
    
</html3d>

Centering the scene

<html3d center z="5">
    
</html3d>

Making scene fill the window

<html3d maximize center z="5">
    
</html3d>

Adding a point light

Note: The origin of the world is 0-0-0.

<html3d maximize center z="5">
    <point-light y="100"></point-light>
</html3d>

Using mesh phong material

<html3d maximize center z="5">
    <mesh>
        <mesh-phong-material color="#156289" emissive="#072534" side="double"></mesh-phong-material>
    </mesh>
    <point-light y="200"></point-light>
    <point-light x="100" y="200" z="100"></point-light>
    <point-light x="-100" y="-200" z="-100"></point-light>
    <trackball-controls></trackball-controls>
</html3d>

Using mesh behaviors

Changeable variables: x(position x), y, z, rx(rotation x), ry, rz, sx(scale x), sy, sz

Actions: **=, |=, &=, +=, -=, *=, /=

<html3d maximize center z="5">
    <mesh behavior="rx += 0.01; ry += 0.01">
        <mesh-phong-material color="#156289" emissive="#072534" side="double"></mesh-phong-material>
    </mesh>
    <point-light y="200"></point-light>
    <point-light x="100" y="200" z="100"></point-light>
    <point-light x="-100" y="-200" z="-100"></point-light>
    <trackball-controls></trackball-controls>
</html3d>

TODO

Wiki 0/3

• Plain code explanations
• Image explanations
• Video explanations

Cameras 1/4

• Cube camera
• Perspective camera
• Orthographic camera
• Stereo camera

Geometries 18/25

• Box geometry
• Capsule geometry
• Circle geometry
• Cone geometry
• Cylinder geometry
• Dodecahedron geometry
• Edges geometry
• Extrude geometry
• Icosahedron geometry
• Lathe geometry
• Octahedron geometry
• Plane geometry
• Polyhedron geometry
• Ring geometry
• Shape geometry
• Sphere geometry
• Tetrahedron geometry
• Torus geometry
• Torus Knot geometry
• Tube geometry
• Wireframe geometry
• Convex geometry
• Decal geometry
• Parametric geometry
• Text geometry

Materials 5/17

• Line basic material
• Line dashed material
• Mesh basic material
• Mesh depth material
• Mesh distance material
• Mesh lambert material
• Mesh metcap material
• Mesh normal material
• Mesh phong material
• Mesh physical material
• Mesh standard material
• Mesh toon material
• Points material
• Raw shader material
• Shader material
• Shadow material
• Sprite material

Lights 8/9

• Ambient light
• Ambient light probe
• Directional light
• Hemisphere light
• Hemisphere light probe
• Light probe
• Point light
• Rect area light
• Spotlight

Fogs 0/2

• Fog
• FogExp2

Controllers 6/8

• Arc ball controls
• Drag controls
• First person controls
• Fly controls
• Orbit controls
• Pointer lock controls
• Trackball controls
• Transform controls

Renderers 1/5

• WebGL renderer
• WebGL1 renderer
• CSS 2D renderer
• CSS 3D renderer
• SVG renderer

Loaders 1/14

• 3DM loader
• DRACO loader
• Font loader
• GLTF loader
• KTX2 loader
• LDraw loader
• MMD loader
• MTL loader
• OBJ loader
• PCD loader
• PDB loader
• PRWM loader
• SVG loader
• TGA loader

Miscellaneous 1/1

• Groups