<canvas id="canvas"></canvas>

* {
	box-sizing: border-box;
}

body {
	margin: 0;
}

const canvas = document.querySelector('#canvas')
const scene = new THREE.Scene()
const width = window.innerWidth
const height = window.innerHeight
const camera = new THREE.PerspectiveCamera(50, width / height, 40, 500)
const renderer = new THREE.WebGLRenderer({ canvas })

renderer.setSize(window.innerWidth, window.innerHeight)
camera.position.z = 150

/* Light */
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.85)
// const ambientLight = new THREE.AmbientLight(0x98e0eb, 0.2)
directionalLight.position.set(-1, 2, 4)

scene.add(directionalLight)
// scene.add(ambientLight)
scene.background = new THREE.Color(0x1a2330)

const geometry = new THREE.SphereGeometry(15, 32, 12)

/* Shape */
const createSphere = (x = 0, y = 5, z = 5, t = 'https://assets.codepen.io/85648/piers%401x.jpg') => {
	const texture = new THREE.TextureLoader().load(t)
	const material = new THREE.MeshLambertMaterial({ map: texture })
	const shape = new THREE.Mesh(geometry, material)
	console.log(material)
	
	shape.position.x = x
	shape.position.y = y
	shape.position.z = z
	
	
	scene.add(shape)
	
	return shape
}

const spheres = [
	createSphere(25, 5, 0, 'https://assets.codepen.io/85648/piers%401x.jpg'),
	createSphere(-40, 35, -80, 'https://assets.codepen.io/85648/ben%401x.jpg'),
	createSphere(-80, -35, 5, 'https://assets.codepen.io/85648/michelle%401x.jpg'),
	createSphere(60, -20, -25, 'https://assets.codepen.io/85648/duncan%401x.jpg'),
	createSphere(-100, 85, -150, 'https://assets.codepen.io/85648/megan%401x.jpg'),
	createSphere(-110, 10, 5, 'https://assets.codepen.io/85648/joana%401x.jpg'),
	createSphere(-60, 5, -10, 'https://assets.codepen.io/85648/colin%401x_1.jpg'),
	createSphere(70, -10, 0, 'https://assets.codepen.io/85648/jade%401x.jpg'),
	createSphere(30, 0, -20, 'https://assets.codepen.io/85648/conor%401x.jpg'),
	createSphere(90, 0, 20, 'https://assets.codepen.io/85648/steve%401x.jpg'),
	createSphere(-130, -20, -20, 'https://assets.codepen.io/85648/matt%401x.jpg'),
	createSphere(2, -5, 15, 'https://assets.codepen.io/85648/aidan.png'),
	createSphere(40, -10, 20, 'https://assets.codepen.io/85648/kate.png'),
	createSphere(0, -25, -5, 'https://assets.codepen.io/85648/david%401x_1.jpg')
]


spheres.forEach((el, i) => {
	const { y } = el.position
	gsap.to(el.rotation, { duration: 15, y: Math.PI * 2, repeat: -1, ease: "none" })
	gsap.to(el.position, { duration: 2, y: y + 40, repeat: -1, yoyo: true, ease: "power1.out", delay: i * 0.1 })
})


function animate() {
	requestAnimationFrame(animate)
	renderer.render(scene, camera);
}

animate()

/* Render */
// renderer.render(scene, camera)