Three.js

Neil HaddleyMarch 5, 2023

A JavaScript-based WebGL engine

Three. js is a JavaScript-based WebGL engine that can run GPU-powered games and other graphics-powered apps straight from the browser.

Overview

In the code below I create a three.js scene. The scene contains

import library modules and sets up scene

import library modules and sets up scene

sets up camera

sets up camera

sets up floating cubes and spheres

sets up floating cubes and spheres

sets up renderer

sets up renderer

sets up animation

sets up animation

index-three-analyph

TEXT
1// imports
2
3        import * as THREE from 'three';
4        import { AnaglyphEffect } from 'three/addons/effects/AnaglyphEffect.js';
5
6        // scene background (skybox)
7
8        const path = 'https://threejs.org/examples/textures/cube/Park2/';
9        const format = '.jpg';
10        const urls = [
11            path + 'posx' + format, path + 'negx' + format,
12            path + 'posy' + format, path + 'negy' + format,
13            path + 'posz' + format, path + 'negz' + format
14        ];
15
16        const textureCube = new THREE.CubeTextureLoader().load(urls);
17
18        // scene
19
20        const scene = new THREE.Scene();
21        scene.background = textureCube;
22
23        // camera
24
25        const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.01, 100);
26        camera.position.z = 3;
27        camera.focalLength = 3;
28
29        // floating things
30
31        const floaters = [];
32
33        const geometryBox = new THREE.BoxGeometry(0.1, 0.1, 0.1);
34        const geometrySphere = new THREE.SphereGeometry(0.1, 32, 16);
35        const materialFloaters = new THREE.MeshBasicMaterial({ color: 0xffffff, envMap: textureCube });
36
37        for (let i = 0; i < 250; i++) {
38
39            const cube = new THREE.Mesh(geometryBox, materialFloaters);
40
41            cube.position.x = Math.random() * 10 - 5;
42            cube.position.y = Math.random() * 10 - 5;
43            cube.position.z = Math.random() * 10 - 5;
44
45            cube.scale.x = cube.scale.y = cube.scale.z = Math.random() * 3 + 1;
46
47            scene.add(cube);
48
49            floaters.push(cube);
50
51        }
52
53        for (let i = 0; i < 250; i++) {
54
55            const sphere = new THREE.Mesh(geometrySphere, materialFloaters);
56
57            sphere.position.x = Math.random() * 10 - 5;
58            sphere.position.y = Math.random() * 10 - 5;
59            sphere.position.z = Math.random() * 10 - 5;
60
61            sphere.scale.x = sphere.scale.y = sphere.scale.z = Math.random() * 3 + 1;
62
63            scene.add(sphere);
64
65            floaters.push(sphere);
66
67        }
68
69        // renderer
70
71        const renderer = new THREE.WebGLRenderer();
72        renderer.setSize(window.innerWidth, window.innerHeight);
73        renderer.xr.enabled = true;
74
75        const effect = new AnaglyphEffect(renderer);
76        effect.setSize(window.innerWidth, window.innerHeight);
77
78        document.body.appendChild(renderer.domElement);
79
80        window.addEventListener('resize', onWindowResize);
81
82        function onWindowResize() {
83
84            camera.aspect = window.innerWidth / window.innerHeight;
85            camera.updateProjectionMatrix();
86
87            effect.setSize(window.innerWidth, window.innerHeight);
88
89        }
90
91        function animate() {
92
93            requestAnimationFrame(animate);
94
95            render();
96
97        }
98
99        // render scene
100
101        function render() {
102
103            const timer = 0.0001 * Date.now();
104
105            camera.lookAt(scene.position);
106
107            for (let i = 0, il = floaters.length; i < il; i++) {
108
109                const floater = floaters[i];
110
111                floater.position.x = 5 * Math.cos(timer + i);
112                floater.position.y = 5 * Math.sin(timer + i * 1.1);
113
114            }
115
116            effect.render(scene, camera);
117
118        }
119
120        animate()