3 basic things required to start any 3 js project :
- Scene
- Camera
- Renderer
2 basic things required to setup any object in 3 js :
- Geometry
- Material
-
INITIATING A PROJECT WITH - scene, camera, renderer
import * as THREE from 'three' //! INITIATING A PROJECT WITH - scene, camera, renderer const scene = new THREE.Scene() const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ) const renderer = new THREE.WebGLRenderer({ canvas : document.querySelector('#bg') }) renderer.setPixelRatio(window.devicePixelRatio) renderer.setSize(window.innerWidth, window.innerHeight) camera.position.setZ(20) renderer.render(scene, camera)
-
Adding an object
//! ADDING A NEW OBJECT const geometry = new THREE.TorusGeometry(10, 3, 16, 100) // const material = new THREE.MeshBasicMaterial({ color: 0xFF6347, wireframe: true }) const material = new THREE.MeshStandardMaterial({ color: 0xFF6347 }) const torus = new THREE.Mesh(geometry, material) scene.add(torus)
-
Working with lights, light helpers and grid lines
//! WORKING WITH LIGHTS, LIGHT HELPERS AND GRID LINES const pointLight = new THREE.PointLight(0xffffff) pointLight.position.set(20, 5, 5) const ambientLight = new THREE.AmbientLight(0xffffff) // scene.add(pointLight) // scene.add(ambientLight) scene.add(pointLight, ambientLight) const lightHelper = new THREE.PointLightHelper(pointLight) const gridHelper = new THREE.GridHelper(200,50) scene.add(lightHelper, gridHelper) // Listen to DOM events on mouse and update camera position accordingly const controls = new OrbitControls(camera, renderer.domElement)
-
Animating an object
//! ANIMATING AN OBJECT (principle of recursion used) const animate = () => { requestAnimationFrame(animate) torus.rotation.x += 0.01 torus.rotation.y += 0.005 torus.rotation.z += 0.01 controls.update() renderer.render(scene, camera) } animate()
-
Randomly populating space with multiple objects
//! RANDOMLY POPULATE THE SPACE WITH A LARGE NUMBER OF OBJECTS function addStar() { const geometry = new THREE.SphereGeometry(0.25, 24, 24) const material = new THREE.MeshStandardMaterial({ color: 0xffffff }) const star = new THREE.Mesh(geometry, material) const [x,y,z] = Array(3).fill().map(() => THREE.MathUtils.randFloatSpread(100)) star.position.set(x, y, z) scene.add(star) } Array(200).fill().forEach(addStar)
-
Images, Texture mapping and Depth Maps
//! LOADING IMAGES USING TEXTURE const spaceTexture = new THREE.TextureLoader().load('./stars.jpg') scene.background = spaceTexture //! CUSTOM SURFACE OBJECTS USING TEXTURE MAPPING const ankitTexture = new THREE.TextureLoader().load('./ankit-profile.png') const ankit = new THREE.Mesh ( new THREE.BoxGeometry(3, 3, 3), new THREE.MeshStandardMaterial({map : ankitTexture}) ) scene.add(ankit) **** //! USING DEPTH MAP const moonTexture = new THREE.TextureLoader().load('./moon.jpg'); const normalTexture = new THREE.TextureLoader().load('./purple.jpg') const moon = new THREE.Mesh( new THREE.SphereGeometry(3,32,32), new THREE.MeshStandardMaterial({map:moonTexture, normalMap:normalTexture}) ) moon.position.z = 10 moon.position.setX(-9) scene.add(moon)
-
Moving camera on scroll
const moveCamera = () => { const t = document.body.getBoundingClientRect().top moon.rotation.x += 0.05 moon.rotation.y += 0.75 moon.rotation.z += 0.05 jeff.rotation.y += 0.01; jeff.rotation.z += 0.01; camera.position.z = t*(-0.01) } document.body.onScroll = moveCamera