ZikoGl is a Zikojs plugin built on the top of Threejs

Demo

Windows entaglement

Scene

ZikoGl provides a variety of scene setups to meet diverse rendering needs. Scenes in ZikoGl are an instance of ZikoElement, allowing you to utilize all ZikoElement methods. Here are the main scene types:

SceneGl

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(/* ...ZikoGlObject */)
  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.

 gl=SceneCss(WIDTH,HEIGHT,BACKGROUND)
 gl.add(/* ...ZikoGlObject,...ZikoElement*/)
 gl.useMapControls()  

Objects

ZikoGl 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()

Controls

ZikoGl 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:

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

• DragContros:

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