-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
55 lines (44 loc) · 1.92 KB
/
app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/loaders/GLTFLoader.js';
function main() {
let camera, scene, renderer;
let mouseX = 0, mouseY = 0;
init();
animate();
function init() {
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(65, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 5);
const loader = new GLTFLoader();
loader.load('./night_sky_visible_spectrum_monochromatic.glb', function (gltf) {
scene.add(gltf.scene);
}, undefined, function (error) {
console.error('An error happened:', error);
alert('Failed to load the 3D model.');
});
const light = new THREE.PointLight(0xffffff, 0.5); // Adjusted intensity for better visibility
light.position.set(5, 5, 5);
scene.add(light);
document.addEventListener('mousemove', onDocumentMouseMove, false);
window.addEventListener('resize', onWindowResize, false); // Add resize event listener
}
function onDocumentMouseMove(event) {
mouseX = (event.clientX / window.innerWidth) * 2 - 1;
mouseY = -(event.clientY / window.innerHeight) * 2 + 1;
}
function onWindowResize() {
// Update the size of the renderer and camera aspect ratio on window resize
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
}
function animate() {
requestAnimationFrame(animate);
camera.lookAt(new THREE.Vector3(mouseX * 5, mouseY * 5, 0));
renderer.render(scene, camera);
}
}
main();