Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/oguzhanumutlu/html3d
3D rendering implementation to HTML made with three.js
https://github.com/oguzhanumutlu/html3d
3d html javascript js npm threejs unpkg web webgl
Last synced: 12 days ago
JSON representation
3D rendering implementation to HTML made with three.js
- Host: GitHub
- URL: https://github.com/oguzhanumutlu/html3d
- Owner: OguzhanUmutlu
- License: mit
- Created: 2022-08-02T16:59:01.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-06-12T20:10:55.000Z (over 1 year ago)
- Last Synced: 2024-10-13T04:38:46.650Z (25 days ago)
- Topics: 3d, html, javascript, js, npm, threejs, unpkg, web, webgl
- Language: JavaScript
- Homepage:
- Size: 624 KB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# html3d
3D rendering implementation to HTML made with three.js
# Examples
[Spinning cube](https://oguzhanumutlu.github.io/html3d/examples/cube.html)
[Spinning heart](https://oguzhanumutlu.github.io/html3d/examples/heart.html)
[Perfect sphere](https://oguzhanumutlu.github.io/html3d/examples/sphere.html)
[The rock](https://oguzhanumutlu.github.io/html3d/examples/rock.html)
# A quick example
## Implementation
```html
```
## Create a scene
```html
```
## Creating a mesh
Note: By default its a 1x1x1 box and has mesh basic material with the color white.
```html
```
## Moving the camera back
Note: This will allow you to actually see the cube.
```html
```
## Changing the color of the material
```html
```
## Adding a controller
Note: This will allow you to move the camera object with your mouse.
```html
```
## Maximizing the scene
```html
```
## Centering the scene
```html
```
## Making scene fill the window
```html
```
## Adding a point light
Note: The origin of the world is 0-0-0.
```html
```
## Using mesh phong material
```html
```
## Using mesh behaviors
Changeable variables: x(position x), y, z, rx(rotation x), ry, rz, sx(scale x), sy, sz
Actions: `**=`, `|=`, `&=`, `+=`, `-=`, `*=`, `/=`
```html
```
# 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