3D rendering implementation to HTML made with three.js
MIT License
3D rendering implementation to HTML made with three.js
<script src="https://unpkg.com/html3d"></script>
<html3d>
<!-- Your code will be here! -->
</html3d>
Note: By default its a 1x1x1 box and has mesh basic material with the color white.
<html3d>
<mesh></mesh>
</html3d>
Note: This will allow you to actually see the cube.
<html3d z="5">
<mesh></mesh>
</html3d>
<html3d z="5">
<mesh>
<mesh-basic-material color="red"></mesh-basic-material>
</mesh>
</html3d>
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>
<html3d maximize z="5">
</html3d>
<html3d center z="5">
</html3d>
<html3d maximize center z="5">
</html3d>
Note: The origin of the world is 0-0-0.
<html3d maximize center z="5">
<point-light y="100"></point-light>
</html3d>
<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>
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>