three.js dev template - module
HTML
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.162/build/three.module.js",
"three/addons/": "https://unpkg.com/three@0.162/examples/jsm/"
}
}
</script>
CSS
body {
margin: 0px;
}
JavaScript
import * as THREE from 'three';
import {
EffectComposer
} from "three/addons/postprocessing/EffectComposer.js";
import {
RenderPass
} from "three/addons/postprocessing/RenderPass.js";
import {
GlitchPass
} from "three/addons/postprocessing/GlitchPass.js";
import {
ShaderPass
} from "three/addons/postprocessing/ShaderPass.js";
import {
UnrealBloomPass
} from "three/addons/postprocessing/UnrealBloomPass.js";
import {
OutputPass
} from "three/addons/postprocessing/OutputPass.js";
import {
FocusShader
} from "three/addons/shaders/FocusShader.js";
const width = window.innerWidth,
height = window.innerHeight
let bufferGeometry = new THREE.BufferGeometry();
let group = new THREE.Group();
let surroundParticleGroup = new THREE.Group();
let composer, glitchPass
let camera = new THREE.PerspectiveCamera(75, width / height, 10, 10000);
camera.position.z = 750;
let scene = new THREE.Scene();
scene.fog = new THREE.FogExp2(0x02050c, 0.0025);
scene.background = scene.fog.color
scene.add(group);
scene.add(surroundParticleGroup);
let renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(width, height);
renderer.setClearColor(scene.fog.color);
renderer.autoClear = false
renderer.toneMapping = THREE.ReinhardToneMapping;
renderer.render(scene, camera)
let total = 8000,
minZVal = window.innerWidth * 0.5,
minYVal = window.innerHeight * 1.2;
const points = []
const colors = [];
for (let i = 0; i < total; i++) {
const vertex = new THREE.Vector3();
vertex.x = rangeRandom(minZVal, -minZVal);
vertex.y = rangeRandom(minYVal, -minYVal);
vertex.z = rangeRandom(minZVal, -minZVal);
points.push(vertex)
colors.push(255, 255, 255)
}
bufferGeometry.setFromPoints(points);
bufferGeometry.setAttribute("color", new THREE.Float32BufferAttribute(colors, 3));
const material = new THREE.PointsMaterial({
size: 8,
color: 0x01050f,
alphaTest: 0.7,
map: null,
...