| IMPORTANT REMARK |
|---|
svelthree is now "default Svelte first" (not "svelte-accmod first" as before), thus accessorsusage is not recommended because of various reasons related to accessors updating components synchronously which can lead to unwanted behavior, bugs and perfomance issues. So if you're using component references and wish to set props programmatically, please use the default $set method, e.g. comp_ref.$set({pos: [1,2,3]}), which is asynchronous / scheduled. If you still want to access svelthree-components via accessors syntax, e.g. comp_ref.pos = [1,2,3], please import accessors-enabled components from svelthree/acc which will then have correct / better type definitions. |
I still like the developer experience with svelte-accmod a bit better, but it comes with some other, currently still unsolved issues and an inevitable perfomance loss compared to using the $set method. Although svelthree is now "default Svelte first", svelte-accmod is still something I'll get my hands on again in future. |
clone the svelthree repo
e.g. using degit: npx degit vatro/svelthree
create a svelthree-tarball and save it somewhere (see npm pack)
open a new terminal from svelthree root folder and:
npm i
npm run build
cd package
open a new terminal from package folder and:
npm pack --pack-destination ../some_directory/
install the created svelthree-tarball
e.g. in your existing SvelteKit-project (see create-svelte) add "svelthree" to "devDependencies" inside package.json file:
"devDependencies": {
...
"svelthree": "file:../some_directory/svelthree-1.0.0-next.0.98.tgz",
...
}... and run npm i (this will actually install svelthree and if not already installed: three incl. @types/three)
Create three.js content using Svelte components.
šØš»āš» Please keep in mind that updates may come frequently and include breaking changes.
ā In your SvelteKit project:
install three.js along with three.js types
npm i -D three @types/threeinstall svelthree
npm i -D svelthree@nextNote: If you don't install a specific Svelte or three.js version, the latest supported Svelte and three.js (incl. types) versions will be automatically installed as svelthree's peer dependencies.
<!-- HelloCube.svelte -->
<script>
import {
Canvas,
Scene,
PerspectiveCamera,
DirectionalLight,
AmbientLight,
Mesh,
WebGLRenderer
} from "svelthree";
import { Fog, BoxGeometry, MeshStandardMaterial } from "three";
const fog = new Fog(0xffffff, 3, 11);
const geometry = new BoxGeometry(1, 1, 1);
const material = new MeshStandardMaterial();
</script>
<Canvas w={500} h={500} >
<Scene id="scene1" bg={0xf0f9ff} props={{ fog }} env_tex={{ url: '...' }} >
<PerspectiveCamera id="cam1" pos={[0, 0, 3]} lookAt={[0, 0, 0]} />
<AmbientLight intensity={1.25} />
<DirectionalLight pos={[3, 3, 3]} shadowMapSize={512*4} />
<Mesh
geometry
material
mat={{ color: 0xff3e00, metalness: 1, roughness: 0, envMapIntensity: 0.8 }}
pos={[0, 0, 0]}
rot={[0.5, 0.6, 0]}
scale={[1, 1, 1]}
receiveShadow
castShadow
/>
</Scene>
<WebGLRenderer
sceneId="scene1"
camId="cam1"
mode="always"
config={{ antialias: true, alpha: false }}
shadowmap
/>
</Canvas>