As Lao Tzu said,
“The journey of a thousand miles begins with one step”.
Created my first 3D scene using threejs. I also added the ability to rotate and zoom the 3D object. I mostly followed the official threejs doc.
Demo:
(Drag to rotate and Scroll to zoom)
Things I Learned
Scene, Camera and Renderer
Threejs requires three things to display content: scene, camera and renderer.
Scene - Allows you to set up what and where to be rendered.
Camera - A viewport through which we observe the 3D scene. There are many types of camera in Three.js like PerspectiveCamera, OrthographicCamera, CubeCamera, etc. Perspective Camera is the most widely used which shows the objects in more realistic perspective view.
Renderer - Renderer is responsible for showing the 3D objects on a web browser. Mostly used WebGLRenderer.
BoxGeometry, MeshBasicMaterial and Mesh
BoxGeometry - Geometry defines the shape and structure of 3D objects in a scene. There are several types of predefined geometries in threejs such as, BoxGeometry, SphereGeometry, CircleGeometry, ConeGeometry, CylinderGeometry, etc. BoxGeometry is used to create a cube.
MeshBasicMaterial - A material for drawing geometries in a simple shaded(flat or wireframe) way. This material is not affected by lights.
Mesh - An object that takes a geometry and applies a material to it.
Threejs Addons: OrbitControls
OrbitControls Addon allows the camera to move around a target. This addon enable us to rotate and zoom our object by dragging and scrolling.
That's a good start for now. Feel free to play around in codesandbox. Stay tuned.
Top comments (0)