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

animation done

cn-june-24
Cailean Finn 6 months ago
parent
5dc6f4ca1e
commit
c9a7fc68f8
5 changed files with 128 additions and 10 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      public/css/styles.css
  2. BIN
      public/images/cn-logo-green.png
  3. BIN
      public/images/cn-logo.png
  4. 2
      public/index.html
  5. 134
      public/js/main.js

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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 121 KiB

BIN
public/images/cn-logo.png
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', () => {

Write Preview
Loading…
Cancel
Save