Skip to content

Commit

Permalink
✨ Add directional light
Browse files Browse the repository at this point in the history
  • Loading branch information
@brunosimon
brunosimon committed Jul 1, 2022
1 parent 63f226f commit a550b5b
Show file tree
Hide file tree
Showing 8 changed files with 119 additions and 14 deletions.
Binary file modified public/assets/models/cupola.glb
View file
Binary file not shown.
Binary file modified resources/3d/cupola.blend
View file
Binary file not shown.
Binary file modified resources/3d/cupola.blend1
View file
Binary file not shown.
2 changes: 1 addition & 1 deletion sources/Experience/Camera.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export default class Camera
this.scenes = this.experience.scenes

// Set up
this.mode = 'default' // default \ debug
this.mode = 'debug' // default \ debug

this.setInstance()
this.setModes()
Expand Down
12 changes: 11 additions & 1 deletion sources/Experience/Cupola.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,18 @@ export default class Cupola
this.resources = this.experience.resources
this.scenes = this.experience.scenes

this.model = this.resources.items.cupolaModel.scene
this.model.traverse((_child) =>
{
if(_child instanceof THREE.Mesh)
{
_child.castShadow = true
_child.receiveShadow = true
}
})

this.group = new THREE.Group()
this.group.add(this.resources.items.cupolaModel.scene)
this.group.add(this.model)
}

update()
Expand Down
2 changes: 1 addition & 1 deletion sources/Experience/Materials/FinalMaterial.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ function FinalMaterial()
uniforms.uSpaceTexture = { value: null }
uniforms.uDistortionTexture = { value: null }
uniforms.uBlackHolePosition = { value: new THREE.Vector2() }
uniforms.uRGBShiftRadius = { value: 0.001 }
uniforms.uRGBShiftRadius = { value: 0.00001 }

// Final material
const material = new THREE.RawShaderMaterial({
Expand Down
4 changes: 2 additions & 2 deletions sources/Experience/Renderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,8 @@ export default class Renderer
this.instance.physicallyCorrectLights = true
// this.instance.gammaOutPut = true
this.instance.outputEncoding = THREE.sRGBEncoding
// this.instance.shadowMap.type = THREE.PCFSoftShadowMap
// this.instance.shadowMap.enabled = false
this.instance.shadowMap.type = THREE.PCFSoftShadowMap
this.instance.shadowMap.enabled = true
this.instance.toneMapping = THREE.NoToneMapping
this.instance.toneMappingExposure = 1

Expand Down
113 changes: 104 additions & 9 deletions sources/Experience/Spaceship.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,17 +23,102 @@ export default class Spaceship
this.cupola = new Cupola()
this.group.add(this.cupola.group)

const ambientLight = new THREE.AmbientLight(0xffffff, 0.2)
const ambientLight = new THREE.AmbientLight(0xb98aff, 0.05)
this.group.add(ambientLight)

this.directionalLight = new THREE.DirectionalLight(0xffffff, 0.2)
// directionalLight.position
this.group.add(this.directionalLight)

this.setDirectionalLight()
this.setCursor()
this.setView()
}

setDirectionalLight()
{
this.directionalLight = {}

this.directionalLight.instance = new THREE.DirectionalLight(0xb98aff, 5)
this.directionalLight.instance.position.set(0, 0, 0)
this.directionalLight.instance.castShadow = true
this.directionalLight.instance.shadow.camera.near = 0
this.directionalLight.instance.shadow.camera.far = 1
this.directionalLight.instance.shadow.camera.top = 0.5
this.directionalLight.instance.shadow.camera.right = 0.5
this.directionalLight.instance.shadow.camera.bottom = -0.5
this.directionalLight.instance.shadow.camera.left = -0.5
this.directionalLight.instance.shadow.mapSize.set(1024, 1024)
this.directionalLight.instance.shadow.bias = 0
this.directionalLight.instance.shadow.normalBias = 0.00252
this.scenes.overlay.add(this.directionalLight.instance)
this.scenes.overlay.add(this.directionalLight.instance.target)

this.directionalLight.helper = new THREE.DirectionalLightHelper(this.directionalLight.instance, 5)
// this.scenes.overlay.add(this.directionalLight.helper)

this.directionalLight.cameraHelper = new THREE.CameraHelper(this.directionalLight.instance.shadow.camera)
// this.scenes.overlay.add(this.directionalLight.cameraHelper)

// Debug
if(this.debug.active)
{
const folder = this.debug.ui.getFolder('spaceship/directionalLight')

folder
.addColor(
this.directionalLight.instance,
'color'
)

folder
.add(
this.directionalLight.instance,
'intensity'
)
.min(0)
.max(10)

folder
.add(
this.directionalLight.instance.shadow,
'bias'
)
.min(-0.005)
.max(0.005)
.step(0.00001)

folder
.add(
this.directionalLight.instance.shadow,
'normalBias'
)
.min(-0.005)
.max(0.005)
.step(0.00001)

folder
.add(
this.directionalLight.instance.target.position,
'x'
)
.min(-5)
.max(5)

folder
.add(
this.directionalLight.instance.target.position,
'y'
)
.min(-5)
.max(5)

folder
.add(
this.directionalLight.instance.target.position,
'z'
)
.min(-5)
.max(5)
}
}

setCursor()
{
this.cursor = {}
Expand Down Expand Up @@ -76,13 +161,23 @@ export default class Spaceship
this.view.camera.position.set(0, 0, 2)
this.view.camera.rotation.copy(this.view.rotation)

this.group.position.z = Math.sin(this.time.elapsed * 0.5) * 2 + 5
this.group.position.x = - 1
this.group.position.y = 1
this.group.position.z = Math.sin(this.time.elapsed * 0.5) * 6

this.group.rotation.y = 0.5

this.directionalLight.position.copy(this.group.position)
this.directionalLight.position.negate()
const centerToSpaceship = this.group.position.clone()
// centerToSpaceship.normalize()

this.directionalLight.instance.position.copy(centerToSpaceship)
this.directionalLight.instance.position.setLength(centerToSpaceship.length() - 0.5)
this.directionalLight.instance.target.position.copy(centerToSpaceship)
// this.directionalLight.instance.target.position.negate()

// console.log(this.directionalLight.position)
// console.log(this.directionalLight.instance.position)
this.directionalLight.helper.update()
this.directionalLight.cameraHelper.update()
}

destroy()
Expand Down

1 comment on commit a550b5b

@vercel
Copy link

@vercel vercel bot commented on a550b5b Jul 1, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

webgl-black-hole – ./

webgl-black-hole.vercel.app
webgl-black-hole-git-master-creative-journey.vercel.app
webgl-black-hole-creative-journey.vercel.app

Please sign in to comment.