Skip to content

Commit

Permalink
Merge branch 'feature/controls' into develop
Browse files Browse the repository at this point in the history
  • Loading branch information
@Emroni
Emroni committed Jul 29, 2024
2 parents 38be27b + c3d3678 commit 340892b
Show file tree
Hide file tree
Showing 16 changed files with 918 additions and 449 deletions.
4 changes: 2 additions & 2 deletions src/app/cubic/1/Shape.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,8 @@ export default class Shape extends THREE.Object3D {
this.cube.position.z = CUBE_SIZE * (z - (CUBE_ROWS / 2 - 0.5));
}

move(progress: number) {
const t = progress * 12 - this.delay;
move(tick: number, delay: number) {
const t = tick - (this.delay * delay);
this.rotation.x = PI_D2 * (easeInOutCubic(t) + easeInOutCubic(t - 6));
this.rotation.z = PI_D2 * (easeInOutCubic(t - 2) + easeInOutCubic(t - 8));
this.rotation.y = -PI_D2 * (easeInOutCubic(t - 4) + easeInOutCubic(t - 10));
Expand Down
53 changes: 34 additions & 19 deletions src/app/cubic/1/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,25 @@
'use client';
import { ThreePlayer } from '@/components';
import { ExperimentControls, ThreePlayer } from '@/components';
import { PI_D4, PI_D8 } from '@/setup';
import React from 'react';
import * as THREE from 'three';
import Shape, { CUBE_ROWS } from './Shape';

export default function Cubic1() {
export default class Cubic1 extends React.Component<any, ExperimentControlItems> {

const depth = 1000;
const shapes: Shape[] = [];
depth = 1000;
shapes: Shape[] = [];

function handleInit(scene: THREE.Scene, camera: THREE.PerspectiveCamera) {
state = {
delay: { min: 0, max: 2, value: 1 },
speed: { min: 1, max: 10, step: 1, value: 1 },
};

handleInit = (scene: THREE.Scene, camera: THREE.PerspectiveCamera) => {
// Update camera
camera.far = depth * 2;
camera.position.y = -depth * 0.05;
camera.position.z = depth;
camera.far = this.depth * 2;
camera.position.y = -this.depth * 0.05;
camera.position.z = this.depth;

// Update scene
scene.rotation.x = PI_D8;
Expand All @@ -24,31 +30,40 @@ export default function Cubic1() {
scene.add(ambient);

// Add point light
const light = new THREE.PointLight(0xFFFFFF, depth ** 2);
const light = new THREE.PointLight(0xFFFFFF, this.depth ** 2);
scene.add(light);
light.position.z = depth;
light.position.z = this.depth;

// Add shapes
for (let x = 0; x < CUBE_ROWS; x++) {
for (let y = 0; y < CUBE_ROWS; y++) {
for (let z = 0; z < CUBE_ROWS; z++) {
const shape = new Shape(x, y, z);
scene.add(shape);
shapes.push(shape);
this.shapes.push(shape);
}
}
}
}

function handleTick(progress: number) {
shapes.forEach(shape => shape.move(progress));
handleTick = (progress: number) => {
const { delay, speed } = this.state;
const tick = (progress * speed.value) % 1 * 12;
this.shapes.forEach(shape => shape.move(tick, delay.value));
}

return <ThreePlayer
duration={12}
size={640}
onInit={handleInit}
onTick={handleTick}
/>;
render() {
return <>
<ExperimentControls
items={this.state}
onChange={items => this.setState(items)}
/>
<ThreePlayer
duration={12}
onInit={this.handleInit}
onTick={this.handleTick}
/>
</>;
}

}
4 changes: 2 additions & 2 deletions src/app/cubic/2/Shape.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,8 @@ export default class Shape extends THREE.Object3D {
this.cube.position.z = CUBE_SIZE * (z - (CUBE_ROWS / 2 - 0.5));
}

move(progress: number) {
const t = progress * 12 - this.delay;
move(tick: number, delay: number) {
const t = tick - (this.delay * delay);
this.rotation.x = PI_D2 * (easeInOutCubic(t) + easeInOutCubic(t - 6));
this.rotation.z = PI_D2 * (easeInOutCubic(t - 2) + easeInOutCubic(t - 8));
this.rotation.y = -PI_D2 * (easeInOutCubic(t - 4) + easeInOutCubic(t - 10));
Expand Down
52 changes: 34 additions & 18 deletions src/app/cubic/2/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,62 @@
'use client';
import { ThreePlayer } from '@/components';
import { ExperimentControls, ThreePlayer } from '@/components';
import React from 'react';
import * as THREE from 'three';
import Shape, { CUBE_ROWS } from './Shape';

export default function Cubic2() {
export default class Cubic2 extends React.Component<any, ExperimentControlItems> {

const depth = 1000;
const shapes: Shape[] = [];
depth = 1000;
shapes: Shape[] = [];

function handleInit(scene: THREE.Scene, camera: THREE.PerspectiveCamera) {
state = {
delay: { min: 0, max: 2, value: 1 },
speed: { min: 1, max: 10, step: 1, value: 1 },
};

handleInit = (scene: THREE.Scene, camera: THREE.PerspectiveCamera) => {
// Update camera
camera.position.z = depth;
camera.position.z = this.depth;

// Add ambient light
const ambient = new THREE.AmbientLight(0xFFFFFF, 0.5);
scene.add(ambient);

// Add point light
const light = new THREE.PointLight(0xFFFFFF, depth ** 2);
const light = new THREE.PointLight(0xFFFFFF, this.depth ** 2);
scene.add(light);
light.position.z = depth;
light.position.z = this.depth;

// Add shapes
for (let x = 0; x < CUBE_ROWS; x++) {
for (let y = 0; y < CUBE_ROWS; y++) {
for (let z = 0; z < CUBE_ROWS; z++) {
const shape = new Shape(x, y, z);
scene.add(shape);
shapes.push(shape);
this.shapes.push(shape);
}
}
}
}

function handleTick(progress: number) {
shapes.forEach(shape => shape.move(progress));
handleTick = (progress: number) => {
const { delay, speed } = this.state;
const tick = (progress * speed.value) % 1 * 12;
this.shapes.forEach(shape => shape.move(tick, delay.value));
}

render() {
return <>
<ExperimentControls
items={this.state}
onChange={items => this.setState(items)}
/>
<ThreePlayer
duration={12}
onInit={this.handleInit}
onTick={this.handleTick}
/>
</>;
}

return <ThreePlayer
duration={12}
size={640}
onInit={handleInit}
onTick={handleTick}
/>;
}
}
4 changes: 2 additions & 2 deletions src/app/cubic/3/Particle.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,8 @@ export default class Particle extends THREE.Object3D {
this.cube.position.z = PARTICLE_SIZE * (z - (PARTICLE_ROWS / 2 - 0.5));
}

move(progress: number) {
const t = progress * 12 - this.delay;
move(tick: number, delay: number) {
const t = tick - (this.delay * delay);
this.rotation.x = PI_D2 * (easeInOutCubic(t) + easeInOutCubic(t - 6));
this.rotation.z = PI_D2 * (easeInOutCubic(t - 2) + easeInOutCubic(t - 8));
this.rotation.y = -PI_D2 * (easeInOutCubic(t - 4) + easeInOutCubic(t - 10));
Expand Down
54 changes: 36 additions & 18 deletions src/app/cubic/3/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,26 @@
'use client';
import { ThreePlayer } from '@/components';
import { ExperimentControls, ThreePlayer } from '@/components';
import { PI_D4, PI_D8 } from '@/setup';
import React from 'react';
import * as THREE from 'three';
import Particle, { PARTICLE_ROWS, PARTICLE_SIZE } from './Particle';

export default function Cubic3() {
export default class Cubic3 extends React.Component<any, ExperimentControlItems> {

const depth = 1000;
const particles: Particle[] = [];
// TODO: Check performance drop

function handleInit(scene: THREE.Scene, camera: THREE.PerspectiveCamera) {
depth = 1000;
particles: Particle[] = [];

state = {
delay: { min: 0, max: 2, value: 1 },
speed: { min: 1, max: 10, step: 1, value: 1 },
};

handleInit = (scene: THREE.Scene, camera: THREE.PerspectiveCamera) => {
// Update camera
camera.position.z = depth;
camera.position.z = this.depth;

// Update scene
scene.rotation.x = PI_D8;
scene.rotation.y = PI_D4;
Expand All @@ -22,9 +30,9 @@ export default function Cubic3() {
scene.add(ambient);

// Add point light
const light = new THREE.PointLight(0xFFFFFF, depth ** 2);
const light = new THREE.PointLight(0xFFFFFF, this.depth ** 2);
scene.add(light);
light.position.z = depth;
light.position.z = this.depth;

// Get shape
const shapeGeometry = new THREE.DodecahedronGeometry((PARTICLE_ROWS * PARTICLE_SIZE) / 2);
Expand All @@ -43,22 +51,32 @@ export default function Cubic3() {
raycaster.set(particle.cube.position, ray);
if (raycaster.intersectObject(shape).length === 1) {
scene.add(particle);
particles.push(particle);
this.particles.push(particle);
}
}
}
}
}

function handleTick(progress: number) {
particles.forEach(particle => particle.move(progress));
handleTick = (progress: number) => {
const { delay, speed } = this.state;
const tick = (progress * speed.value) % 1 * 12;
this.particles.forEach(particle => particle.move(tick, delay.value));
}

return <ThreePlayer
duration={12}
size={640}
onInit={handleInit}
onTick={handleTick}
/>;

render() {
return <>
<ExperimentControls
items={this.state}
onChange={items => this.setState(items)}
/>
<ThreePlayer
duration={12}
onInit={this.handleInit}
onTick={this.handleTick}
/>
</>;
}

}
Loading

0 comments on commit 340892b

Please sign in to comment.