How to override exported sky with Sky.js from THREE?

🌵 Needle Engine
1

I have been asked if I can add a sky that can be changed via parameters and I found the wonderful sky.js example here from the three.js samples but when I add it into my Needle project, the sky is just black when I run it in browser.

Find my work in progress script attached where the sky is added

Example of sky.js I am trying to copy: three.js webgl - shaders - ocean

Copy paste this url into browser to see source code
view-source:https://threejs.org/examples/webgl_shaders_ocean.html
SeaWater.ts

Original Post on Discord

by user 103054507105067008

2

Isnt this the same question as yesterday? :slightly_smiling_face: Discord

3

I can look into it in a bit

4

It is actually, but I got as far as setting it up and the sky was black unfortunately

by user 103054507105067008

5

That script can just be added onto an empty in the scene for a build, a plane of water will appear using water.js and the sky from sky.js is presumably set up but the sky is just black which I assume means it isn’t even rendering as it doesn’t affect the scene objects

by user 103054507105067008

6

Ok looks ike its actually just some errors in your script that cause it to break:

  • .onChange(this.updateSun.bind(this)); was missing bind(this)
  • you never assigned your sky to your sky field this.sky = sky; in start
  • you forgot to call this.updateSun(); in start
    20221026-131015_Made_with_Needle_-_Google_Chrome.mp4
7

Here’s the modified script (i removed the water for debugging)
Sky.ts

8

Ah I see! It was when I removed the skybox material in Unity from the lighting menu and the sky was still black that I suspected there was some clash. I assume it overwrites what you guys export in Needle without any issues then

by user 103054507105067008

9

Feel free to use for any samples too, our client wanted some moderate day/night cycle stuff

by user 103054507105067008

10

Yes it generates a box and projects the sky on that so it does its own thing

11

thanks :slightly_smiling_face:

12

Got realistic ocean, sky and environment map updating when the sky changes here if anyone wants to use it in their projects! It is best to make a parent for the directional light as this script sets the position of the sun at 0,0,0 worldspace if you hook up your directional light to mainSun Gameobject variable on it. Have fun!
SkyExample.ts

by user 103054507105067008