joshua/webgl-threejs-hello
1
0
Fork 0
mirror of https://github.com/seigler/webgl-threejs-hello synced 2025-07-28 02:06:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

⚡ Dither clouds

Browse source
This commit is contained in:
Joshua Seigler 2018-10-12 14:03:43 -04:00
parent 8721b90d84
commit 0b5065bc97
7 changed files with 16 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

17
app/js/components/Clouds.js
View file

@ -11,6 +11,11 @@ class Clouds extends THREE.Object3D {
this.cloudTexture.wrapS = this.cloudTexture.wrapT = THREE.RepeatWrapping;
this.cloudTexture.repeat.set(3, 3);
this.cloudShadow = loader.load('textures/clouds-dithered.png');
this.cloudShadow.wrapS = this.cloudShadow.wrapT = THREE.RepeatWrapping;
this.cloudShadow.magFilter = THREE.NearestFilter;
this.cloudShadow.repeat.set(3, 3);
this.material = new THREE.MeshBasicMaterial({
map: this.cloudTexture,
transparent: true,
@ -21,12 +26,12 @@ class Clouds extends THREE.Object3D {
mesh.customDepthMaterial = new THREE.MeshDepthMaterial({
depthPacking: THREE.RGBADepthPacking,
map: this.cloudTexture,
alphaTest: 0.3
map: this.cloudShadow,
alphaTest: 0.25
});
mesh.rotation.x = -Math.PI/2;
mesh.position.y = 10;
mesh.position.y = 15;
mesh.castShadow = true;
this.add(mesh);
@ -35,8 +40,10 @@ class Clouds extends THREE.Object3D {
}
onUpdate(time) {
this.cloudTexture.offset.x = (time / 1000) % 200;
this.cloudTexture.offset.y = (time / 5000) % 400;
this.cloudTexture.offset.x = (props.cloudSpeed / 1000 * time) % 200;
this.cloudTexture.offset.y = (props.cloudSpeed / 5000 * time) % 400;
this.cloudShadow.offset.x = (props.cloudSpeed / 1000 * time) % 200;
this.cloudShadow.offset.y = (props.cloudSpeed / 5000 * time) % 400;
}
}

4
app/js/components/Light.js
View file

@ -10,8 +10,8 @@ class Lighting extends THREE.Object3D {
dirLight.position.multiplyScalar( 20 );
dirLight.castShadow = true;
dirLight.shadow.mapSize.width = 1024;
dirLight.shadow.mapSize.height = 1024;
dirLight.shadow.mapSize.width = 2048;
dirLight.shadow.mapSize.height = 2048;
dirLight.shadow.radius = 2;
let d = 100;