I'm trying to use ThreeJS with Svelte ("Threlte"). My goal is to reproduce the Earth from an IcosahedronGeometry. To do this, I want a MeshPhongMaterial for the Earth's mesh.
Here is my app's entrypoint (App.svelte
):
<script lang="ts"> import { Canvas } from '@threlte/core' import Scene from './Scene.svelte';</script><Canvas><Scene /></Canvas>
My Scene just holds a PerspectiveCamera and OrbitControls. It includes a component named "Earth" from Earth.svelte
:
<script lang="ts"> import { T, useLoader, useTask } from '@threlte/core'; import { Group, TextureLoader } from 'three'; const textures = useLoader(TextureLoader).load({ map: "/textures/00_earthmap1k.jpg", bumpMap: "/textures/01_earthbump1k.jpg", specularMap: "/textures/02_earthspec1k.jpg" }); let earth: Group; useTask((delta) => { earth.rotation.y += 0.1 * delta; });</script><T.Group bind:ref={earth} rotation.z={-23.4 * Math.PI / 180}> {#await textures then texture}<T.Mesh><T.IcosahedronGeometry args={[2, 12]} /><T.MeshPhongMaterial map={texture.map} specularMap={texture.specularMap} bumpMap={texture.bumpMap} bumpScale={0.4} /></T.Mesh> {/await} </T.Group><T.AmbientLight intensity={1.2} />
The problem is that the specular map and the bump map do not appear. The result I get is exactly like if I was just using a MeshStandardMaterial
with a map
property. Basically, I see the Earth's map ("00_earthmap1k") but the specular map and the bump maps are not displayed:
The textures are valid and come from planetpixelemporium.
I do not have any error in the terminal running Vite nor in the console of the web browser.
I have indeed lights in the scene, and nothing else.
I have no clue on why it isn't working. I'm new to ThreeJS and Threlte, I've basically no idea what I'm doing but according to plenty of tutorials it should work. I've tested the exact same thing with "vanilla" ThreeJS and it works. The problem is my implementation in Threlte. See the result I'm expecting here: https://github.com/bobbyroe/threejs-earth (right now I'm not including the clouds nor the city lights).