Scene.svelte
<!-- Start by binding a container, then add the renderer to this container onMount -->
<script>
import { onMount } from 'svelte';
import * as THREE from 'three';
let container;
onMount(async () => {
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild(renderer.domElement);
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
});
</script>
<div id="container" bind:this={container}/>
App.svelte
<script>
import { onMount, onDestroy } from "svelte";
import Navbar from './components/Navbar.svelte';
import Hero from "./components/Hero.svelte";
import Content from "./components/Content.svelte";
import About from "./components/About.svelte";
import Work from "./components/Work.svelte";
import Projects from "./components/Projects.svelte";
import Accordion from "./components/Accordion.svelte";
import Skills from "./components/Skills.svelte";
import Experience from "./components/Experience.svelte";
import Contact from "./components/Contact.svelte";
import Scene from "./components/Scene.svelte";
import './assets/stylesheets/content.css';
import './assets/stylesheets/navbar-862-and-up.css';
import './assets/stylesheets/navbar-862-down.css';
</script>
<!-- <Navbar/>
<Content>
<Hero slot="landing-section"/>
<About slot="about-section"/>
<Work slot="work-group-section">
<Projects slot="projects-section">
<Accordion slot="accordion-group" repos={included}/>
</Projects>
<Skills slot="skills-section"/>
<Experience slot="exp-section" min_year={min_year} max_year={max_year} on:changeYear={fetch_contribs}/>
</Work>
<Contact slot="contact-section" on:sendMail={send_mail}/&>
</Content> -->
<Scene/>
I have simplified some of the code in here. This is my primary App.svelte file with the Scene.svelte file placed within a components folder in the root directory of App.svelte.
I attempted installing threlte initially, but encountered rendering issues which led me to install three.js separately without threlte. Despite trying various approaches like threlte and rendering using a live server or an .html file, nothing seems to be working. Any suggestions on what I should do next?