Skip to content

3D rendering implementation to HTML made with three.js

License

Notifications You must be signed in to change notification settings

OguzhanUmutlu/html3d

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

30 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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