Skip to content

Latest commit

 

History

History
258 lines (197 loc) · 4.71 KB

README.md

File metadata and controls

258 lines (197 loc) · 4.71 KB
Raw

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