website for beta festival 2024
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

149 lines
4.2 KiB

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPixelatedPass } from 'three/addons/postprocessing/RenderPixelatedPass.js';
import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
import { randFloat } from 'three/src/math/MathUtils.js';
let scene, camera, renderer
let aspect, frustumSize
let time = 0
let lastTime = 0
let controls
let mesh
let composer
let cubeGroup = []
let instancedMesh, dummy, count
const texture = new THREE.TextureLoader().load("public/images/dither.png")
texture.minFilter = THREE.NearestFilter
texture.colorSpace = THREE.SRGBColorSpace;
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
function init(){
SetupRenderer()
scene = new THREE.Scene()
SetupCamera()
SetupControls()
composer = new EffectComposer( renderer );
const renderPixelatedPass = new RenderPixelatedPass( 8, scene, camera );
renderPixelatedPass.normalEdgeStrength = 0;
renderPixelatedPass.depthEdgeStrength = 1;
renderPixelatedPass.pixelAlignedPanning = false;
composer.addPass( renderPixelatedPass );
const outputPass = new OutputPass();
composer.addPass( outputPass );
SetupCubes()
AddLights()
animate()
}
function SetupCubes() {
const cubeGeometry = new THREE.BoxGeometry();
const cubeMaterial = new THREE.MeshPhongMaterial({ map: texture });
// Create an InstancedMesh
count = 100;
instancedMesh = new THREE.InstancedMesh(cubeGeometry, cubeMaterial, count);
scene.add(instancedMesh)
dummy = new THREE.Object3D();
for (let i = 0; i < count; i++) {
let size = randFloat(5, 8);
dummy.scale.set(size, size, size);
dummy.position.set(randFloat(-10, 10), randFloat(-6, 3), 0);
dummy.updateMatrix();
instancedMesh.setMatrixAt(i, dummy.matrix);
}
}
function SetupRenderer(){
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
renderer.setClearColor(0xffffff, 0);
renderer.setSize(window.innerWidth, window.innerHeight)
document.getElementById('container').appendChild(renderer.domElement)
}
function SetupCamera(){
aspect = (window.innerWidth) / (window.innerHeight)
frustumSize = 10
camera = new THREE.OrthographicCamera(
frustumSize * aspect / -2,
frustumSize * aspect / 2,
frustumSize / 2,
frustumSize / -2,
0.01,
5000
)
camera.position.x = 5
}
function SetupControls(){
controls = new OrbitControls(camera, renderer.domElement)
controls.enableRotate = false;
controls.enablePan = false
controls.zoomToCursor = false;
controls.mouseButtons = {
RIGHT: THREE.MOUSE.ROTATE,
MIDDLE: THREE.MOUSE.DOLLY,
LEFT: THREE.MOUSE.PAN
}
camera.position.set(0, 0, 20)
controls.update()
}
function AddLights() {
// Add Ambient Light
const ambientLight = new THREE.AmbientLight(0xffffff, 10); // Soft white light
scene.add(ambientLight);
// Add Directional Light
const directionalLight = new THREE.DirectionalLight(0xffffff, 0); // Soft white light
directionalLight.position.set(-5, 0, 5).normalize();
scene.add(directionalLight);
}
const matrix = new THREE.Matrix4()
function animate(){
requestAnimationFrame(animate)
// Rotate instanced meshes
const time = performance.now() * 0.001;
const rotationSpeedX = 0.02;
const rotationSpeedY = 0.01;
lastTime = time
for (let i = 0; i < count; i++) {
instancedMesh.getMatrixAt(i, matrix)
matrix.decompose(dummy.position, dummy.rotation, dummy.scale)
dummy.rotation.set(i/1000 * time, i/1000 * time, i/1000 * time);
dummy.updateMatrix();
instancedMesh.setMatrixAt(i, dummy.matrix);
}
instancedMesh.instanceMatrix.needsUpdate = true
composer.render()
//renderer.render(scene, camera)
}
window.addEventListener('resize', () => {
aspect = (window.innerWidth) / (window.innerHeight)
camera.left = -frustumSize * aspect / 2
camera.right = frustumSize * aspect / 2
camera.top = frustumSize / 2
camera.bottom = -frustumSize / 2
camera.updateProjectionMatrix()
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(window.innerWidth, window.innerHeight)
})
init()