ZikoGl is a Zikojs plugin built on the top of Threejs
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 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 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()
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()
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 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)