ziko-tgl

ziko-tgl is a Zikojs plugin built on the top of Threejs

Demo

Windows entaglement

Scene

ziko-tgl provides a variety of scene setups to meet diverse rendering needs. Scenes in ziko-tgl are an instance of ZikoElement, allowing you to utilize all ZikoElement methods.
Here are the main scene types:
### scene_gl
scene_gl is used for creating standard WebGL scenes. It supports adding 3D objects and includes various controls for interacting with the scene.
``js
gl=scene_gl(WIDTH,HEIGHT,BACKGROUND)
gl.add(/ ...ziko-tglObject /)
gl.useMapControls()
gl.useOrthographicCamera()
`
### SceneCss
SceneCss allows for the integration of HTML/CSS elements into the 3D scene. This is useful for combining 3D graphics with traditional web elements.
`js
gl=SceneCss(WIDTH,HEIGHT,BACKGROUND)
gl.add(/ ...ziko-tglObject,...ZikoElement/)
gl.useMapControls()
`

Objects

ziko-tgl provides a set of predefined objects that you can easily add to your scene. These objects can be styled and positioned as needed.
`js
let sphere = sphere3(1)
.style({
texture: / Img Video Svg Canvas .../
})
.pos(x,y,z);
.useStandardMaterial()
`

Controls

ziko-tgl includes a variety of control mechanisms to manipulate the camera and objects within the scene. These controls enhance user interaction and make it easier to navigate and modify the 3D environment.
### Camera Based Controls
Camera-based controls allow users to navigate the scene by manipulating the camera's position and orientation.
- OrbitControls : Enables orbiting around a target.
- MapControls :
- FlyControls :
- TrackballControls :
- FirstPersonControls :
- PointerControls :
### Object Based Controls
Object-based controls are used to manipulate individual objects within the scene.

- TransformControls:
`js
let mode="translate"; // use can use either "rotate" and scale;
ctrl = useTransformControls(object);
`
- DragContros:
`js
ctrl = useDragControls([objects]);
ctrL.onStart(callback1)
.onDrag(callback2)
``