import * as THREE from "three"

const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
document.body.appendChild(renderer.domElement)

const scene = new THREE.Scene()
scene.background = new THREE.Color(0x101418)

const camera = new THREE.PerspectiveCamera(60, 2, 0.1, 100)
camera.position.set(0, 1.2, 8)

scene.add(new THREE.AmbientLight(0xffffff, 0.65))

const light = new THREE.DirectionalLight(0xffffff, 1.1)
light.position.set(4, 6, 5)
scene.add(light)

const pillarGeometry = new THREE.BoxGeometry(0.7, 1.6, 0.7)
const pillarMaterial = new THREE.MeshStandardMaterial({ color: 0xf6bd60 })
const capGeometry = new THREE.SphereGeometry(0.4, 24, 24)
const capMaterial = new THREE.MeshStandardMaterial({ color: 0x84a59d })

const groupedStructure = new THREE.Group()

const pillar = new THREE.Mesh(pillarGeometry, pillarMaterial)
pillar.position.y = -0.2
groupedStructure.add(pillar)

const cap = new THREE.Mesh(capGeometry, capMaterial)
cap.position.y = 0.95
groupedStructure.add(cap)

groupedStructure.position.set(-1.4, 0, 0)
scene.add(groupedStructure)

const groupedStructureClone = groupedStructure.clone()
groupedStructureClone.position.set(1.4, 0, 0)
scene.add(groupedStructureClone)

function resizeRendererToDisplaySize() {
	const width = window.innerWidth
	const height = window.innerHeight
	const needResize = renderer.domElement.width !== width || renderer.domElement.height !== height

	if (needResize) {
		renderer.setSize(width, height, false)
		camera.aspect = width / height
		camera.updateProjectionMatrix()
	}
}

function animate(time) {
	const seconds = time * 0.001

	resizeRendererToDisplaySize()

	groupedStructure.rotation.y = seconds * 0.7
	groupedStructure.rotation.x = Math.sin(seconds * 1.1) * 0.2

	groupedStructureClone.rotation.y = -seconds * 0.7
	groupedStructureClone.rotation.x = Math.sin(seconds * 1.1) * 0.2

	renderer.render(scene, camera)
	requestAnimationFrame(animate)
}

requestAnimationFrame(animate)