@6edesign/svelte-three/docs/_dist_/components/Scene.js

[Demo](https://6edesign.github.io/svelte-three-mograph/)

/* src/components/Scene.svelte generated by Svelte v3.31.2 */
import {
	SvelteComponent,
	binding_callbacks,
	create_component,
	create_slot,
	destroy_component,
	detach,
	element,
	init,
	insert,
	mount_component,
	safe_not_equal,
	space,
	transition_in,
	transition_out,
	update_slot
} from "../../web_modules/svelte/internal.js";

import { onMount, setContext, tick } from "../../web_modules/svelte.js";
import { writable } from "../../web_modules/svelte/store.js";
import { Scene, Color, PerspectiveCamera, WebGLRenderer } from "../../web_modules/three.js";
import { Material } from "./index.js";
const get_default_slot_changes = dirty => ({});
const get_default_slot_context = ctx => ({ time: /*ctx*/ ctx[0].time });

// (50:0) <Material>
function create_default_slot(ctx) {
	let current;
	const default_slot_template = /*#slots*/ ctx[6].default;
	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[8], get_default_slot_context);

	return {
		c() {
			if (default_slot) default_slot.c();
		},
		m(target, anchor) {
			if (default_slot) {
				default_slot.m(target, anchor);
			}

			current = true;
		},
		p(ctx, dirty) {
			if (default_slot) {
				if (default_slot.p && dirty & /*$$scope*/ 256) {
					update_slot(default_slot, default_slot_template, ctx, /*$$scope*/ ctx[8], dirty, get_default_slot_changes, get_default_slot_context);
				}
			}
		},
		i(local) {
			if (current) return;
			transition_in(default_slot, local);
			current = true;
		},
		o(local) {
			transition_out(default_slot, local);
			current = false;
		},
		d(detaching) {
			if (default_slot) default_slot.d(detaching);
		}
	};
}

function create_fragment(ctx) {
	let div;
	let t;
	let material;
	let current;

	material = new Material({
			props: {
				$$slots: { default: [create_default_slot] },
				$$scope: { ctx }
			}
		});

	return {
		c() {
			div = element("div");
			t = space();
			create_component(material.$$.fragment);
		},
		m(target, anchor) {
			insert(target, div, anchor);
			/*div_binding*/ ctx[7](div);
			insert(target, t, anchor);
			mount_component(material, target, anchor);
			current = true;
		},
		p(ctx, [dirty]) {
			const material_changes = {};

			if (dirty & /*$$scope*/ 256) {
				material_changes.$$scope = { dirty, ctx };
			}

			material.$set(material_changes);
		},
		i(local) {
			if (current) return;
			transition_in(material.$$.fragment, local);
			current = true;
		},
		o(local) {
			transition_out(material.$$.fragment, local);
			current = false;
		},
		d(detaching) {
			if (detaching) detach(div);
			/*div_binding*/ ctx[7](null);
			if (detaching) detach(t);
			destroy_component(material, detaching);
		}
	};
}

function instance($$self, $$props, $$invalidate) {
	let { $$slots: slots = {}, $$scope } = $$props;
	let { width = 600 } = $$props;
	let { height = 400 } = $$props;
	let { background = "#fff" } = $$props;
	let target;
	const scene = new Scene();
	scene.background = new Color(background);
	const camera = new PerspectiveCamera(75, width / height, 0.1, 1000);
	const renderer = new WebGLRenderer({ alpha: true, antialias: true });
	let { time = writable(Date.now()) } = $$props;
	camera.position.z = 5;
	renderer.setSize(width, height);

	const ctx = {
		scene,
		camera,
		renderer,
		renderFns: [],
		time
	};

	setContext("sceneCtx", ctx);

	onMount(() => {
		let rafId;

		const animate = async () => {
			time.set(Date.now());
			renderer.render(scene, camera);
			await tick();
			rafId = requestAnimationFrame(animate);
		};

		animate();
		return () => cancelAnimationFrame(rafId);
	});

	function div_binding($$value) {
		binding_callbacks[$$value ? "unshift" : "push"](() => {
			target = $$value;
			$$invalidate(1, target);
		});
	}

	$$self.$$set = $$props => {
		if ("width" in $$props) $$invalidate(2, width = $$props.width);
		if ("height" in $$props) $$invalidate(3, height = $$props.height);
		if ("background" in $$props) $$invalidate(4, background = $$props.background);
		if ("time" in $$props) $$invalidate(5, time = $$props.time);
		if ("$$scope" in $$props) $$invalidate(8, $$scope = $$props.$$scope);
	};

	$$self.$$.update = () => {
		if ($$self.$$.dirty & /*target*/ 2) {
			$: target && target.appendChild(renderer.domElement);
		}
	};

	return [ctx, target, width, height, background, time, slots, div_binding, $$scope];
}

class Scene_1 extends SvelteComponent {
	constructor(options) {
		super();

		init(this, options, instance, create_fragment, safe_not_equal, {
			width: 2,
			height: 3,
			background: 4,
			time: 5,
			ctx: 0
		});
	}

	get ctx() {
		return this.$$.ctx[0];
	}
}

export default Scene_1;