60 lines
1.6 KiB
JavaScript
60 lines
1.6 KiB
JavaScript
import * as THREE from 'three'
|
|
|
|
const scene = new THREE.Scene()
|
|
scene.background = new THREE.Color('#111111')
|
|
|
|
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 geometry = new THREE.BoxGeometry(2, 2, 2)
|
|
const material = new THREE.MeshBasicMaterial({ color: 'orange' })
|
|
const cube = new THREE.Mesh(geometry, material)
|
|
scene.add(cube)
|
|
|
|
const raycaster = new THREE.Raycaster()
|
|
const mouse = new THREE.Vector2()
|
|
let isHovered = false
|
|
|
|
window.addEventListener('mousemove', (e) => {
|
|
mouse.x = (e.clientX / window.innerWidth) * 2 - 1
|
|
mouse.y = -(e.clientY / window.innerHeight) * 2 + 1
|
|
|
|
raycaster.setFromCamera(mouse, camera)
|
|
const hits = raycaster.intersectObject(cube)
|
|
|
|
if (hits.length > 0) {
|
|
if (!isHovered) {
|
|
isHovered = true
|
|
cube.material.color.set('hotpink')
|
|
cube.scale.set(1.15, 1.15, 1.15)
|
|
document.body.style.cursor = 'pointer'
|
|
}
|
|
} else {
|
|
if (isHovered) {
|
|
isHovered = false
|
|
cube.material.color.set('orange')
|
|
cube.scale.set(1, 1, 1)
|
|
document.body.style.cursor = 'default'
|
|
}
|
|
}
|
|
})
|
|
|
|
window.addEventListener('resize', () => {
|
|
camera.aspect = window.innerWidth / window.innerHeight
|
|
camera.updateProjectionMatrix()
|
|
renderer.setSize(window.innerWidth, window.innerHeight)
|
|
})
|
|
|
|
function animate() {
|
|
requestAnimationFrame(animate)
|
|
cube.rotation.x += 0.01
|
|
cube.rotation.y += 0.01
|
|
renderer.render(scene, camera)
|
|
}
|
|
|
|
animate()
|