Matthew Raymer
1 year ago
6 changed files with 183 additions and 0 deletions
@ -0,0 +1,35 @@ |
|||
|
|||
import { OrbitControls } from "three-orbitcontrols-ts"; |
|||
import { MathUtils, PerspectiveCamera } from "three"; |
|||
|
|||
class Controls { |
|||
private controls: OrbitControls; |
|||
|
|||
constructor(camera: PerspectiveCamera, canvas: HTMLElement) { |
|||
this.controls = new OrbitControls(camera, canvas); |
|||
|
|||
// Enable controls
|
|||
this.controls.enabled = true; |
|||
this.controls.autoRotate = false; |
|||
|
|||
// Control limits
|
|||
this.controls.minPolarAngle = MathUtils.degToRad(40); // Default
|
|||
this.controls.maxPolarAngle = MathUtils.degToRad(75); |
|||
|
|||
// Smooth camera movement
|
|||
this.controls.enableDamping = true; |
|||
|
|||
// Set maximum distance
|
|||
this.controls.maxDistance = 250; |
|||
|
|||
// Update function for animation loop
|
|||
this.controls.tick = () => this.controls.update(); |
|||
} |
|||
|
|||
public getControls(): OrbitControls { |
|||
return this.controls; |
|||
} |
|||
} |
|||
|
|||
|
|||
export { Controls }; |
@ -0,0 +1,38 @@ |
|||
import { Clock, PerspectiveCamera, Scene, Object3D, WebGLRenderer } from "three"; |
|||
|
|||
const clock = new Clock(); |
|||
|
|||
class Loop { |
|||
private camera: PerspectiveCamera; |
|||
private scene: Scene; |
|||
private renderer: WebGLRenderer; |
|||
private updatables: Object3D[]; |
|||
|
|||
constructor(camera: PerspectiveCamera, scene: Scene, renderer: WebGLRenderer) { |
|||
this.camera = camera; |
|||
this.scene = scene; |
|||
this.renderer = renderer; |
|||
this.updatables = []; |
|||
} |
|||
|
|||
public start(): void { |
|||
this.renderer.setAnimationLoop(() => { |
|||
this.tick(); |
|||
// render a frame
|
|||
this.renderer.render(this.scene, this.camera); |
|||
}); |
|||
} |
|||
|
|||
public stop(): void { |
|||
this.renderer.setAnimationLoop(null); |
|||
} |
|||
|
|||
private tick(): void { |
|||
const delta = clock.getDelta(); |
|||
for (const object of this.updatables) { |
|||
object.tick(delta); |
|||
} |
|||
} |
|||
} |
|||
|
|||
export { Loop }; |
@ -0,0 +1,22 @@ |
|||
import { WebGLRenderer, WebGLRendererParameters } from "three"; |
|||
|
|||
class Renderer { |
|||
private renderer: WebGLRenderer; |
|||
|
|||
constructor(parameters?: WebGLRendererParameters) { |
|||
this.renderer = new WebGLRenderer(parameters); |
|||
this.renderer.useLegacyLights = false; |
|||
} |
|||
|
|||
public get domElement(): HTMLCanvasElement { |
|||
return this.renderer.domElement; |
|||
} |
|||
|
|||
// Add more custom methods and properties as needed
|
|||
|
|||
public render(scene: any, camera: any): void { |
|||
this.renderer.render(scene, camera); |
|||
} |
|||
} |
|||
|
|||
export { Renderer }; |
@ -0,0 +1,28 @@ |
|||
|
|||
class Resizer { |
|||
constructor(container: HTMLElement, camera: any, renderer: any) { |
|||
this.setSize(container, camera, renderer); |
|||
|
|||
window.addEventListener("resize", () => { |
|||
this.setSize(container, camera, renderer); |
|||
this.onResize(); |
|||
}); |
|||
} |
|||
|
|||
private setSize(camera: any, renderer: any): void { |
|||
const height = window.innerHeight; |
|||
const width = window.innerWidth - 50; |
|||
|
|||
camera.aspect = width / height; |
|||
camera.updateProjectionMatrix(); |
|||
|
|||
renderer.setSize(width, height); |
|||
renderer.setPixelRatio(window.devicePixelRatio); |
|||
} |
|||
|
|||
onResize(): void { |
|||
// Perform any custom actions on resize
|
|||
} |
|||
} |
|||
|
|||
export { Resizer }; |
Loading…
Reference in new issue