|
| 1 | +import './style.css'; |
| 2 | +import * as THREE from 'three'; |
| 3 | +import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'; |
| 4 | + |
| 5 | +// Setup |
| 6 | + |
| 7 | +const scene = new THREE.Scene(); |
| 8 | + |
| 9 | +const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); |
| 10 | + |
| 11 | +const renderer = new THREE.WebGLRenderer({ |
| 12 | + canvas: document.querySelector('#bg'), |
| 13 | +}); |
| 14 | + |
| 15 | +renderer.setPixelRatio(window.devicePixelRatio); |
| 16 | +renderer.setSize(window.innerWidth, window.innerHeight); |
| 17 | +camera.position.setZ(30); |
| 18 | +camera.position.setX(-3); |
| 19 | + |
| 20 | +renderer.render(scene, camera); |
| 21 | + |
| 22 | +// Torus |
| 23 | + |
| 24 | +const geometry = new THREE.TorusGeometry(10, 3, 16, 100); |
| 25 | +const material = new THREE.MeshStandardMaterial({ color: 0xff6347 }); |
| 26 | +const torus = new THREE.Mesh(geometry, material); |
| 27 | + |
| 28 | +scene.add(torus); |
| 29 | + |
| 30 | +// Lights |
| 31 | + |
| 32 | +const pointLight = new THREE.PointLight(0xffffff); |
| 33 | +pointLight.position.set(5, 5, 5); |
| 34 | + |
| 35 | +const ambientLight = new THREE.AmbientLight(0xffffff); |
| 36 | +scene.add(pointLight, ambientLight); |
| 37 | + |
| 38 | +// Helpers |
| 39 | + |
| 40 | +// const lightHelper = new THREE.PointLightHelper(pointLight) |
| 41 | +// const gridHelper = new THREE.GridHelper(200, 50); |
| 42 | +// scene.add(lightHelper, gridHelper) |
| 43 | + |
| 44 | +// const controls = new OrbitControls(camera, renderer.domElement); |
| 45 | + |
| 46 | +function addStar() { |
| 47 | + const geometry = new THREE.SphereGeometry(0.25, 24, 24); |
| 48 | + const material = new THREE.MeshStandardMaterial({ color: 0xffffff }); |
| 49 | + const star = new THREE.Mesh(geometry, material); |
| 50 | + |
| 51 | + const [x, y, z] = Array(3) |
| 52 | + .fill() |
| 53 | + .map(() => THREE.MathUtils.randFloatSpread(100)); |
| 54 | + |
| 55 | + star.position.set(x, y, z); |
| 56 | + scene.add(star); |
| 57 | +} |
| 58 | + |
| 59 | +Array(200).fill().forEach(addStar); |
| 60 | + |
| 61 | +// Background |
| 62 | + |
| 63 | +const spaceTexture = new THREE.TextureLoader().load('space.jpg'); |
| 64 | +scene.background = spaceTexture; |
| 65 | + |
| 66 | +// Avatar |
| 67 | + |
| 68 | +const jeffTexture = new THREE.TextureLoader().load('jeff.png'); |
| 69 | + |
| 70 | +const jeff = new THREE.Mesh(new THREE.BoxGeometry(3, 3, 3), new THREE.MeshBasicMaterial({ map: jeffTexture })); |
| 71 | + |
| 72 | +scene.add(jeff); |
| 73 | + |
| 74 | +// Moon |
| 75 | + |
| 76 | +const moonTexture = new THREE.TextureLoader().load('moon.jpg'); |
| 77 | +const normalTexture = new THREE.TextureLoader().load('normal.jpg'); |
| 78 | + |
| 79 | +const moon = new THREE.Mesh( |
| 80 | + new THREE.SphereGeometry(3, 32, 32), |
| 81 | + new THREE.MeshStandardMaterial({ |
| 82 | + map: moonTexture, |
| 83 | + normalMap: normalTexture, |
| 84 | + }) |
| 85 | +); |
| 86 | + |
| 87 | +scene.add(moon); |
| 88 | + |
| 89 | +moon.position.z = 30; |
| 90 | +moon.position.setX(-10); |
| 91 | + |
| 92 | +jeff.position.z = -5; |
| 93 | +jeff.position.x = 2; |
| 94 | + |
| 95 | +// Scroll Animation |
| 96 | + |
| 97 | +function moveCamera() { |
| 98 | + const t = document.body.getBoundingClientRect().top; |
| 99 | + moon.rotation.x += 0.05; |
| 100 | + moon.rotation.y += 0.075; |
| 101 | + moon.rotation.z += 0.05; |
| 102 | + |
| 103 | + jeff.rotation.y += 0.01; |
| 104 | + jeff.rotation.z += 0.01; |
| 105 | + |
| 106 | + camera.position.z = t * -0.01; |
| 107 | + camera.position.x = t * -0.0002; |
| 108 | + camera.rotation.y = t * -0.0002; |
| 109 | +} |
| 110 | + |
| 111 | +document.body.onscroll = moveCamera; |
| 112 | +moveCamera(); |
| 113 | + |
| 114 | +// Animation Loop |
| 115 | + |
| 116 | +function animate() { |
| 117 | + requestAnimationFrame(animate); |
| 118 | + |
| 119 | + torus.rotation.x += 0.01; |
| 120 | + torus.rotation.y += 0.005; |
| 121 | + torus.rotation.z += 0.01; |
| 122 | + |
| 123 | + moon.rotation.x += 0.005; |
| 124 | + |
| 125 | + // controls.update(); |
| 126 | + |
| 127 | + renderer.render(scene, camera); |
| 128 | +} |
| 129 | + |
| 130 | +animate(); |
0 commit comments