gsap.registerPlugin(SplitText); function loader() { const button = document.querySelector(".button"); button.addEventListener("click", function () { gsap.to(".button", { opacity: 0, y: -40, duration: 1, ease: "expo.inOut" }) gsap.to(".txt__loading-wrapper > div", { x:"50rem",
gsap.to(".txt__loading-wrapper > div", { x:"-200%", ease: "expo.inOut", duration: 4, delay: 3.5, stagger: 0.1 }); gsap.to gsap.to(".txt__loading-wrapper > div", { x:"-200%", ease: "expo.inOut", duration: 4, delay: 3.5, stagger: 0.1 }); gsap.to
SplitText = new SplitText(".h1--hero", { type: "words,chars" }), chars = mySplitText.chars; gsap.set(".h1--hero", { perspective: 400});SplitText = new SplitText(".h1--hero", { type: "words,chars" }), chars = mySplitText.chars; gsap.set(".h1--hero", { perspective: 400});
tl.from(chars, { duration: 0.8, delay: 8, opacity: 0, y: 5, stagger: 0.1 }); }) } export default loader const cursor = { x: 0, y: 0 window.addEventListener('mousemove', (event) => cursor.x = event.clientX / sizes.width - 0.5 cursor.y = (event.clientY / sizes.height - 0.5) })
const gui = new dat.GUI() const canvas = document.querySelector('canvas.webgl') const scene = new THREE.Scene() const gltfLoader = new GLTFLoader() gltfLoader.load('Computers.glb', (gltf) => scene.add(gltf.scene) ) const ambientLight = new THREE.AmbientLight(0x00ff00, 0.6)
const directionalLight = new THREE.DirectionalLight(0x0000ff, 1) scene.add(directionalLight) const pointLight = new THREE.PointLight(0x00ff00, 10, 100, 2) pointLight.position.set(0.08, 2.3, -1.15) scene.add(pointLight) gui.add(pointLight.position, 'x').min(-5).max(5).step(0.01)
const rectAreaLightTop = new THREE.RectAreaLight(0x00ff00, 20, 2, 1) rectAreaLightTop.position.set(0.944, 5, -3.973) rectAreaLightTop.rotation.set(3.1, 0.084, 0) scene.add(rectAreaLightTop) gui.add(rectAreaLightTop.position, 'x').min(-5).max(5).step(0.001) gui.add(ambientLight, 'intensity').min(0).max(1).step(0.01)
const sizes = { width: window.innerWidth, height: window.innerHeight } window.addEventListener('resize', () => { sizes.width = window.innerWidth sizes.height = window.innerHeight camera.aspect = sizes.width / sizes.height camera.updateProjectionMatrix() renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)) }) const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 10000) camera.position.set(0, 2, 0) const cameraGroup = new THREE.Group() cameraGroup.add(camera) scene.add(cameraGroup) const renderer = new THREE
canvas: canvas }) renderer.shadowMap.enabled = true renderer.shadowMap.type = THREE.PCFSoftShadowMap renderer.setSize(sizes.width, sizes.height) renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)) renderer.physicallyCorrectLights = true renderer.setClearColor('#000002') r
renderer.shadowMap.type = THREE.PCFSoftShadowMap directionalLight.castShadow = true pointLight.castShadow = true gltfLoader.castShadow = true const clock = new THREE.Clock() const tick = () => { const elapsedTime = clock.getElapsedTime() cameraGroup.position.x = Math.sin(cursor *
gsap.registerPlugin(SplitText); function loader() { const button = document.querySelector(".button"); button.addEventListener("click", function () { gsap.to(".button", { opacity: 0, y: -40, duration: 1, ease: "expo.inOut" }) gsap.to(".txt__loading-wrapper > div", { x:"50rem", true pointLight.castShadow = true gltfLoader.castShadow
gsap.to(".txt__loading-wrapper > div", { x:"-200%", ease: "expo.inOut", duration: 4, delay: 3.5, stagger: 0.1 }); gsap.to gsap.to(".txt__loading-wrapper > div", { x:"-200%", ease: "expo.inOut", duration: 4, delay: 3.5, stagger: 0.1 }); gsap.to
SplitText = new SplitText(".h1--hero", { type: "words,chars" }), chars = mySplitText.chars; gsap.set(".h1--hero", { perspective: 400});SplitText = new SplitText(".h1--hero", { type: "words,chars" }), chars = mySplitText.chars; gsap.set(".h1--hero", { perspective: 400});
tl.from(chars, { duration: 0.8, delay: 8, opacity: 0, y: 5, stagger: 0.1 }); }) } export default loader const cursor = { x: 0, y: 0 window.addEventListener('mousemove', (event) => cursor.x = event.clientX / sizes.width - 0.5 cursor.y = (event.clientY / sizes.height - 0.5) })
tl.from(chars, { duration: 0.8, delay: 8, opacity: 0, y: 5, stagger: 0.1 }); }) } export default loader const cursor = { x: 0, y: 0 window.addEventListener('mousemove', (event) => cursor.x = event.clientX / sizes.width - 0.5 cursor.y = (event.clientY / sizes.height - 0.5) })
.webp)
