69 lines
2.0 KiB
JavaScript
69 lines
2.0 KiB
JavaScript
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)
|