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

Windows entaglement

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:

SceneGl is used for creating standard WebGL scenes. It supports adding 3D objects and includes various controls for interacting with the scene.

  gl=SceneGl(WIDTH,HEIGHT,BACKGROUND)
  gl.add(/* ...ziko-tglObject */)
  gl.useMapControls() 
  gl.useOrthographicCamera() 

SceneCss allows for the integration of HTML/CSS elements into the 3D scene. This is useful for combining 3D graphics with traditional web elements.

 gl=SceneCss(WIDTH,HEIGHT,BACKGROUND)
 gl.add(/* ...ziko-tglObject,...ZikoElement*/)
 gl.useMapControls()  

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.

 let sphere = sphere3(1)
               .style({
                   texture: /* Img Video Svg Canvas ...*/
               })
               .pos(x,y,z);
               .useStandardMaterial()

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 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 are used to manipulate individual objects within the scene.

• TransformControls:

 let mode="translate"; // use can use either "rotate" and scale;
 ctrl = useTransformControls(object);

• DragContros:

ctrl = useDragControls([objects]);
ctrL.onStart(callback1)
    .onDrag(callback2)