svelte-three-renderer-template

renderer.svelte

<script lang="ts">
import * as rndr  from './renderer'
import { onMount } from 'svelte';
export let onstart:  () => void = () => {};
export let onupdate: () => void = () => {};
let cvs: HTMLElement;

onMount(() => {
	cvs.appendChild( rndr.rnd.domElement );
	onstart();
	(function update() {
		requestAnimationFrame(update);
		onupdate();
		rndr.render();
    })();
});

</script>

<div id='cvs' bind:this={cvs} style='--w:{rndr.w}px; --h:{rndr.h}px'/>

<style>
#cvs {
	width: var(--w);
	height: var(--h);
} 
</style>

renderer.ts

import * as THREE from 'three'; 
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

export let w = document.body.clientWidth / 2;
export let h = document.body.clientHeight / 2;
export let dof = 1000;
export let scn = new THREE.Scene();
export let cam = new THREE.OrthographicCamera(-w / 2, w / 2, - h / 2, h / 2, 1, dof);
export let rnd = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer: true });
export let ctl = new OrbitControls(cam, rnd.domElement);

cam.position.set(0, 0, dof * 0.5);
rnd.setPixelRatio(window.devicePixelRatio);
rnd.setSize(w, h);
rnd.setClearColor('#ccc');

export const render = () => {
    ctl.update();
    rnd.render(scn, cam);
}