Skip to content

Commit

Permalink
refactoring: World class
Browse files Browse the repository at this point in the history
  • Loading branch information
@paolini
paolini committed Aug 12, 2024
1 parent 4773fbf commit 565f079
Showing 1 changed file with 133 additions and 88 deletions.
221 changes: 133 additions & 88 deletions js/main.ts
View file
Original file line number Diff line number Diff line change
@@ -1,102 +1,147 @@
import * as THREE from 'three'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js'

import Surf from './surf'
import {Pringle,Catenoid,Cube,Helicoid} from './examples'

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000)
camera.position.x = 5;
camera.up.set(0, 0, 1);

const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

const surf = new Helicoid()

// Create a material
const material = new THREE.MeshPhongMaterial();
// material.wireframe = true
material.side = THREE.DoubleSide;
material.transparent = true;
material.opacity = 0.5;
material.flatShading = true;
material.emissive = new THREE.Color("blue");
material.emissiveIntensity = 4

const color = 0xFFFFFF;
const intensity = 1;
const light = new THREE.DirectionalLight(color, intensity);
//light.position.set(0, 10, 0);
//light.target.position.set(-5, 0, 0);
scene.add(light);
scene.add(light.target);

function generateThreeMesh(myMesh: Surf, material: THREE.Material) {
const geometry = new THREE.BufferGeometry()
geometry.setIndex( myMesh.indices )
geometry.setAttribute( 'position', new THREE.BufferAttribute( myMesh.vertices, 3 ) )
return new THREE.Mesh( geometry, material )
}
class SurfMesh extends THREE.Mesh {
surf: Surf

constructor(surf: Surf, material: THREE.Material) {
const geometry = new THREE.BufferGeometry()
geometry.setIndex( surf.indices )
geometry.setAttribute( 'position', new THREE.BufferAttribute( surf.vertices, 3 ) )
super( geometry, material )
}
}

class World {
AUTO_RUN: boolean
surfMesh: SurfMesh|undefined
scene: THREE.Scene
camera: THREE.Camera
renderer: THREE.Renderer
material: THREE.Material
controls: THREE.Controls

constructor() {
this.AUTO_RUN = true

this.scene = new THREE.Scene()
this.camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000)
this.camera.position.x = 5;
this.camera.up.set(0, 0, 1);

this.renderer = new THREE.WebGLRenderer()
this.renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(this.renderer.domElement)

this.material = new THREE.MeshPhongMaterial()
// this.material.wireframe = true
this.material.side = THREE.DoubleSide;
this.material.transparent = true;
this.material.opacity = 0.5;
this.material.flatShading = true;
this.material.emissive = new THREE.Color("blue");
this.material.emissiveIntensity = 4

const color = 0xFFFFFF;
const intensity = 1;
const light = new THREE.DirectionalLight(color, intensity);
//light.position.set(0, 10, 0);
//light.target.position.set(-5, 0, 0);
this.scene.add(light);
this.scene.add(light.target);

this.controls = new OrbitControls(this.camera, this.renderer.domElement)
this.controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
this.controls.dampingFactor = 0.5;
this.controls.screenSpacePanning = false;
this.controls.minDistance = 1;
this.controls.maxDistance = 1000;
this.controls.maxPolarAngle = Math.PI / 2;

this.load(Pringle)
document.addEventListener("keydown", evt => this.onDocumentKeyDown(evt), false);

this.animate()
}

let mesh = generateThreeMesh(surf, material)
scene.add( mesh );
animate() {
requestAnimationFrame(() => this.animate())
this.controls.update()
this.renderer.render(this.scene, this.camera)
}

replaceSurf(surf: Surf) {
if (this.surfMesh) this.scene.remove(this.surfMesh)
this.surfMesh = new SurfMesh(surf, this.material)
this.scene.add(this.surfMesh)
}

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
controls.dampingFactor = 0.5;
controls.screenSpacePanning = false;
controls.minDistance = 1;
controls.maxDistance = 1000;
controls.maxPolarAngle = Math.PI / 2;
load(SomeSurf) {
console.log(`loading ${SomeSurf.name}`)
const surf = new SomeSurf()
if (this.AUTO_RUN) surf.run()
this.replaceSurf(surf)
}

function animate() {
requestAnimationFrame( animate )
controls.update(); // only required if controls.enableDamping = true, or if controls.autoRotate = true
renderer.render(scene, camera);
}
animate()
triangulate() {
if (!this.surfMesh) return
const surf = this.surfMesh.surf
surf.triangulate()
this.replaceSurf(surf)
}

function triangulate() {
scene.remove(mesh)
surf.triangulate()
mesh = generateThreeMesh(surf, material)
scene.add(mesh)
}
evolve(count=1) {
if (!this.surfMesh) return
this.surfMesh.surf.evolveMeanCurvature(0.05,count)
this.surfMesh.geometry.attributes.position.needsUpdate = true
}

function evolve(count=1) {
surf.evolveMeanCurvature(0.05,count)
mesh.geometry.attributes.position.needsUpdate = true
run() {
if (!this.surfMesh) return
const surf = this.surfMesh.surf
surf.run()
this.replaceSurf(surf)
}

onDocumentKeyDown(event) {
var key= event.key
switch (key) {
case '0':
this.load(Pringle)
break
case '1':
this.load(Catenoid)
break
case '2':
this.load(Cube)
break
case '3':
this.load(Helicoid)
break
case 't':
console.log(`triangulating`)
this.triangulate()
break
case 'e':
console.log(`evolving`)
this.evolve()
break
case 'r':
console.log('run')
this.run()
break
case 'w':
console.log(`wireframe`)
this.material.wireframe = !this.material.wireframe
break
default:
console.log(`unknown command. key: ${event.key} keyCode: ${event.which}`)
}
}
}

function run() {
scene.remove(mesh)
surf.run()
mesh = generateThreeMesh(surf, material)
scene.add(mesh)
mesh.geometry.attributes.position.needsUpdate = true
}
const world = new World()

if (true) run()

document.addEventListener("keydown", onDocumentKeyDown, false);

function onDocumentKeyDown(event) {
var key= event.key
if (key == 't') {
console.log(`triangulating`)
triangulate()
} else if (key == 'e') {
console.log(`evolving`)
evolve()
} else if (key == 'r') {
console.log('run')
run()
} else if (key == 'w') {
console.log(`wireframe`)
material.wireframe = !material.wireframe
} else {
console.log(`unknown command. key: ${event.key} keyCode: ${event.which}`)
}
}

0 comments on commit 565f079

Please sign in to comment.