html3d

1.0.9 • Public • Published

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
  • [X] Perspective camera
  • [ ] Orthographic camera
  • [ ] Stereo camera

Geometries 18/25

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

Materials 5/17

  • [X] Line basic material
  • [X] Line dashed material
  • [X] Mesh basic material
  • [X] Mesh depth material
  • [ ] Mesh distance material
  • [ ] Mesh lambert material
  • [ ] Mesh metcap material
  • [ ] Mesh normal material
  • [X] 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

  • [X] Ambient light
  • [X] Ambient light probe
  • [X] Directional light
  • [X] Hemisphere light
  • [X] Hemisphere light probe
  • [ ] Light probe
  • [X] Point light
  • [X] Rect area light
  • [X] Spotlight

Fogs 0/2

  • [ ] Fog
  • [ ] FogExp2

Controllers 6/8

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

Renderers 1/5

  • [X] WebGL renderer
  • [ ] WebGL1 renderer
  • [ ] CSS 2D renderer
  • [ ] CSS 3D renderer
  • [ ] SVG renderer

Loaders 1/14

  • [ ] 3DM loader
  • [ ] DRACO loader
  • [X] 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

  • [X] Groups

Package Sidebar

Install

npm i html3d

Weekly Downloads

0

Version

1.0.9

License

MIT

Unpacked Size

2.5 MB

Total Files

27

Last publish

Collaborators

  • oguzhanumutlu