feat: create basic Three.js scene with cubes and lighting

This commit is contained in:
divyap 2026-03-18 11:46:34 +05:30
parent 06de1b54a5
commit 5b1849d98a

45
vanilla/main.js Normal file
View File

@ -0,0 +1,45 @@
import * as THREE from 'three'
const scene = new THREE.Scene()
scene.background = new THREE.Color(0xf0f0f0)
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.z = 5
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
const ambientLight = new THREE.AmbientLight(0xffffff, Math.PI / 2)
scene.add(ambientLight)
const pointLight = new THREE.PointLight(0xffffff, Math.PI)
pointLight.position.set(-10, -10, -10)
pointLight.decay = 0
scene.add(pointLight)
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material1 = new THREE.MeshStandardMaterial({ color: 'orange' })
const cube1 = new THREE.Mesh(geometry, material1)
cube1.position.x = -1.2
scene.add(cube1)
const material2 = new THREE.MeshStandardMaterial({ color: 'orange' })
const cube2 = new THREE.Mesh(geometry, material2)
cube2.position.x = 1.2
scene.add(cube2)
function animate() {
requestAnimationFrame(animate)
cube1.rotation.x += 0.01
cube1.rotation.y += 0.01
cube2.rotation.x += 0.01
cube2.rotation.y += 0.01
renderer.render(scene, camera)
}
animate()