feat: create basic Three.js scene with cubes and lighting
This commit is contained in:
parent
06de1b54a5
commit
5b1849d98a
45
vanilla/main.js
Normal file
45
vanilla/main.js
Normal 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()
|
||||
Loading…
x
Reference in New Issue
Block a user