How to use SkyMesh?

Questions
1

(at /examples/jsm/objects/SkyMesh.js)
Sky has documentation, but I can’t find anything about SkyMesh.
I figured out how to create the mesh and add it to the scene, but setting properties like .sunDirection and .rayleigh doesn’t do anything (works with the regular Sky though)
Here’s my code snippet:

import * as THREE from "./three.webgpu.min.js"
import {SkyMesh} from "./SkyMesh.js"
import CreateFreecam from "./freecam_module.js"

document.body.style.margin = "0px"

var renderer = new THREE.WebGPURenderer({antialias: true})
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
window.renderer = renderer
await renderer.init()

var scene = new THREE.Scene()
var camera = CreateFreecam(THREE, scene)

var geometry = new THREE.BoxGeometry()
var material = new THREE.MeshBasicMaterial({color: 0x00ff00})
var cube = new THREE.Mesh(geometry, material)
scene.add(cube)

var sky = new SkyMesh()
sky.scale.setScalar(1000)
scene.add(sky)

// stuck here :(

function render() {
requestAnimationFrame(render)
renderer.render(scene, camera)
}
render()

Thanks in advance!

2

We have migrated to JSDoc but unfortunately https://threejs.org/docs has not yet been updated with the new documentation which is generated on JSDoc. So you have to take a look at the source code and read the JSDoc directly in the meanwhile.

There is an official example using SkyMesh that you can use as a code template: three.js webgpu - sky

3 Likes
3

Thanks man I figured it out with the example you gave!

For anyone with the same problem:
For SkyMesh you’d use
sky.rayleigh.value = (number)
And for Sky you’d use
sky.material.uniforms.rayleigh.value = (number)
Same thing with other uniforms like turbidity or sunPosition
Note that you must use Sky only with WebGLRenderer and SkyMesh only with WebGPURenderer