cailean/three-js-template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: cailean:master
Branches Tags
cailean:master cailean:cn-june-24
..
compare: cailean:cn-june-24
Branches Tags
cailean:cn-june-24 cailean:master

1 Commits
master ... cn-june-24

Author SHA1 Message Date
Cailean Finn
c9a7fc68f8 animation done 2024-06-29 15:26:45 +01:00
5 changed files with 128 additions and 10 deletions
Expand all files Collapse all files

2
public/css/styles.css
View File

@@ -2,7 +2,7 @@ body {
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
background-color: whitesmoke; background-color: rgb(255, 0, 0);
} }
#container { #container {

BIN
public/images/cn-logo-green.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 121 KiB

BIN
public/images/cn-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 71 KiB

2
public/index.html
View File

@@ -15,6 +15,7 @@
} }
} }
</script> </script>
</head> </head>
<body> <body>
<div id="main-container"> <div id="main-container">
@@ -22,4 +23,5 @@
</div> </div>
<script type="module" src="./js/main.js"></script> <script type="module" src="./js/main.js"></script>
</body> </body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script>
</html> </html>

134
public/js/main.js
View File

@@ -2,26 +2,40 @@ import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js' import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { Vector3 } from 'three' import { Vector3 } from 'three'
import { randFloat, randInt } from 'three/src/math/MathUtils.js' import { randFloat, randInt } from 'three/src/math/MathUtils.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 { GUI } from 'three/addons/libs/lil-gui.module.min.js';
let scene, camera, renderer let scene, camera, renderer, composer
let aspect, frustumSize let aspect, frustumSize
let mesh let mesh
let delta let delta
let controls let controls
let gui, params
let instancedMesh, dummy, count, lastTime
let frames = [];
const totalFrames = 300; // Number of frames to capture
let frameCount = 0;
let iter = 0
var clock = new THREE.Clock() var clock = new THREE.Clock()
const matrix = new THREE.Matrix4()
function init(){ function init(){
SetupRenderer() SetupRenderer()
scene = new THREE.Scene() scene = new THREE.Scene()
scene.background = new THREE.Color('white') scene.background = new THREE.Color('white')
SetupCamera() SetupCamera()
//AddLights()
SetupControls() SetupControls()
SetupComposer()
SetupObjects() SetupObjects()
animate() animate()
} }
function SetupRenderer(){ function SetupRenderer(){
renderer = new THREE.WebGLRenderer({ antialias: true }) renderer = new THREE.WebGLRenderer({alpha: true})
renderer.setSize(window.innerWidth, window.innerHeight) renderer.setSize(window.innerWidth, window.innerHeight)
document.getElementById('container').appendChild(renderer.domElement) document.getElementById('container').appendChild(renderer.domElement)
} }
@@ -55,20 +69,122 @@ function SetupControls(){
controls.update() controls.update()
} }
function AddLights() {
// Add Ambient Light
const ambientLight = new THREE.AmbientLight(0xFF0000, 5); // Soft white light
scene.add(ambientLight);
// Add Directional Light
const directionalLight = new THREE.DirectionalLight(0xFF0000, 10); // Soft white light
directionalLight.position.set(-5, 0, 5).normalize();
scene.add(directionalLight);
}
function SetupComposer(){
composer = new EffectComposer( renderer )
const renderPixelPass = new RenderPixelatedPass( 8, scene, camera )
renderPixelPass.normalEdgeStrength = 0
renderPixelPass.depthEdgeStrength = 0
composer.addPass( renderPixelPass )
const outputPass = new OutputPass()
composer.addPass( outputPass )
// gui = new GUI()
// params = { pixelSize: 3, normalEdgeStrength: .3, depthEdgeStrength: .4, pixelAlignedPanning: true };
// gui.add( params, 'pixelSize' ).min( 1 ).max( 16 ).step( 1 )
// .onChange( () => {
// renderPixelPass.setPixelSize( params.pixelSize );
// } );
// gui.add( renderPixelPass, 'normalEdgeStrength' ).min( 0 ).max( 2 ).step( .05 );
// gui.add( renderPixelPass, 'depthEdgeStrength' ).min( 0 ).max( 1 ).step( .05 );
// gui.add( params, 'pixelAlignedPanning' );
}
function SetupObjects() { function SetupObjects() {
const loader = new THREE.TextureLoader()
let txt = loader.load('../images/cn-logo-green.png')
txt.magFilter = THREE.NearestFilter
txt.minFilter = THREE.NearestFilter
txt.wrapS = THREE.RepeatWrapping
txt.wrapT = THREE.RepeatWrapping
txt.colorSpace = THREE.SRGBColorSpace
let geo = new THREE.BoxGeometry(1, 1, 1) let geo = new THREE.BoxGeometry(1, 1, 1)
let mat = new THREE.MeshNormalMaterial() let mat = new THREE.MeshBasicMaterial({map: txt})
mesh = new THREE.Mesh(geo, mat) count = 1000
scene.add(mesh) instancedMesh = new THREE.InstancedMesh(geo, mat, 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(-20, 20), randFloat(-20,20), 0);
dummy.updateMatrix();
instancedMesh.setMatrixAt(i, dummy.matrix);
}
}
function captureFrame() {
renderer.domElement.toDataURL('image/png').replace("image/png", "image/octet-stream");
let imgData = renderer.domElement.toDataURL("image/png");
frames.push(imgData);
frameCount++;
// If last frame, prepare the download
if (frameCount === totalFrames) {
//prepareDownload();
if( iter == 0 ){
frameCount = 0
iter = 1
}
}
}
function prepareDownload() {
let zip = new JSZip();
console.log('zipping..')
frames.forEach((dataUrl, index) => {
let imgData = dataUrl.split(',')[1]; // Get base64 data part
zip.file(`frame_${index.toString().padStart(4, '0')}.png`, imgData, {base64: true});
});
console.log('zipped!')
zip.generateAsync({type: "blob"})
.then(function(content) {
const a = document.createElement("a");
a.href = URL.createObjectURL(content);
a.download = "frames.zip";
console.log('zip dl ready!')
a.click();
});
} }
function animate(){ function animate(){
requestAnimationFrame(animate) requestAnimationFrame(animate)
controls.update() controls.update()
delta = clock.getDelta() / 10 delta = clock.getDelta() * 0.4
mesh.rotation.x += delta const time = performance.now() * 0.001;
mesh.rotation.z += delta const rotationSpeedX = 0.02;
renderer.render(scene, camera) 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
// renderer.render(scene, camera)
composer.render()
// Capture the frame
if (frameCount < totalFrames) {
captureFrame();
}
} }
window.addEventListener('resize', () => { window.addEventListener('resize', () => {