5 changed files with 275 additions and 4 deletions
|
After Width: | Height: | Size: 35 KiB |
@ -0,0 +1,148 @@ |
|||||
|
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() |
||||
|
|
||||
Loading…
Reference in new issue