adrien/teTra
adrien/teTra
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

threejs v155

Browse Source
This commit is contained in:
Adrien MALINGREY 2023-07-30 15:38:13 +02:00
parent b227690b31
commit 92d953ef62
5 changed files with 24 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -12,8 +12,8 @@
<script type="importmap"> <script type="importmap">
{ {
"imports": { "imports": {
"three": "https://unpkg.com/three@0.152.2/build/three.module.js?module", "three": "https://unpkg.com/three@0.155/build/three.module.js?module",
"three/addons/": "https://unpkg.com/three@0.152.2/examples/jsm/" "three/addons/": "https://unpkg.com/three@0.155/examples/jsm/"
} }
} }
</script> </script>

28
jsm/TetraGUI.js
View File

@ -54,19 +54,19 @@ export class TetraGUI extends GUI {
scene.vortex.colorFullTextureRotation = 0.006 scene.vortex.colorFullTextureRotation = 0.006
scene.vortex.colorFullMoveForward = 0.015 scene.vortex.colorFullMoveForward = 0.015
scene.ambientLight.intensity = 1 scene.ambientLight.intensity = 4
scene.directionalLight.intensity = 1 scene.directionalLight.intensity = 4
Mino.material.opacity = 0.6 Mino.mesh.material.opacity = 0.6
Mino.material.roughness = 0.4 Mino.mesh.material.roughness = 0.4
Mino.material.metalness = 0.95 Mino.mesh.material.metalness = 0.95
} }
break break
case "Espace": case "Espace":
darkTexture = new THREE.TextureLoader(loadingManager).load("./images/dark.jpg", texture => { darkTexture = new THREE.TextureLoader(loadingManager).load("./images/dark.jpg", texture => {
texture.wrapS = THREE.RepeatWrapping texture.wrapS = THREE.RepeatWrapping
texture.wrapT = THREE.MirroredRepeatWrapping texture.wrapT = THREE.MirroredRepeatWrapping
texture.repeat.set(2, 4) texture.repeat.set(1, 2)
}) })
colorfullTexture = new THREE.TextureLoader(loadingManager).load("./images/colorfull.jpg", texture => { colorfullTexture = new THREE.TextureLoader(loadingManager).load("./images/colorfull.jpg", texture => {
texture.wrapS = THREE.RepeatWrapping texture.wrapS = THREE.RepeatWrapping
@ -75,18 +75,22 @@ export class TetraGUI extends GUI {
}) })
loadingManager.onLoad = function() { loadingManager.onLoad = function() {
scene.vortex.darkCylinder.material.map = darkTexture scene.vortex.darkCylinder.material.map = darkTexture
scene.vortex.darkCylinder.material.opacity = 0.055 scene.vortex.darkCylinder.material.opacity = 0.1
scene.vortex.colorFullCylinder.material.map = colorfullTexture scene.vortex.colorFullCylinder.material.map = colorfullTexture
scene.vortex.colorFullCylinder.material.opacity = 0.6 scene.vortex.colorFullCylinder.material.opacity = 0.4
scene.vortex.globalRotation = 0.028 scene.vortex.globalRotation = 0.028
scene.vortex.darkTextureRotation = 0.006 scene.vortex.darkTextureRotation = 0.006
scene.vortex.darkMoveForward = 0.007 scene.vortex.darkMoveForward = 0.02
scene.vortex.colorFullTextureRotation = 0.006 scene.vortex.colorFullTextureRotation = 0.006
scene.vortex.colorFullMoveForward = 0.02 scene.vortex.colorFullMoveForward = 0.007
scene.ambientLight.intensity = 0.6 scene.ambientLight.intensity = 20
scene.directionalLight.intensity = 1 scene.directionalLight.intensity = 10
Mino.mesh.material.opacity = 0.6
Mino.mesh.material.roughness = 0.08
Mino.mesh.material.metalness = 0.98
} }
break break
} }

4
jsm/TetraScene.js
View File

@ -14,10 +14,10 @@ export class TetraScene extends THREE.Scene {
this.vortex = new Vortex(this.loadingManager) this.vortex = new Vortex(this.loadingManager)
this.add(this.vortex) this.add(this.vortex)
this.ambientLight = new THREE.AmbientLight(0xffffff, 1) this.ambientLight = new THREE.AmbientLight(0xffffff, 4)
this.add(this.ambientLight) this.add(this.ambientLight)
this.directionalLight = new THREE.DirectionalLight(0xffffff, 1) this.directionalLight = new THREE.DirectionalLight(0xffffff, 4)
this.directionalLight.position.set(5, 0, 20) this.directionalLight.position.set(5, 0, 20)
this.add(this.directionalLight) this.add(this.directionalLight)

6
jsm/gamelogic.js
View File

@ -30,7 +30,7 @@ const TRANSLATION = {
} }
const ROTATION = { const ROTATION = {
CW: 1, // ClockWise CW: 1, // ClockWise
CCW: 3, // CounterClockWise CCW: 3, // CounterClockWise
} }
@ -57,7 +57,7 @@ const envRenderTarget = new THREE.WebGLCubeRenderTarget(256)
const environnement = envRenderTarget.texture const environnement = envRenderTarget.texture
environnement.type = THREE.HalfFloatType environnement.type = THREE.HalfFloatType
environnement.camera = new THREE.CubeCamera(1, 1000, envRenderTarget) environnement.camera = new THREE.CubeCamera(1, 1000, envRenderTarget)
environnement.camera.position.set(5, 10) environnement.camera.position.set(5, 10, 0)
class InstancedMino extends THREE.InstancedMesh { class InstancedMino extends THREE.InstancedMesh {
@ -121,7 +121,7 @@ class Mino extends THREE.Object3D {
side: THREE.DoubleSide, side: THREE.DoubleSide,
transparent: true, transparent: true,
opacity: 0.6, opacity: 0.6,
roughness: 0.06, roughness: 0.4,
metalness: 0.95, metalness: 0.95,
}) })
this.mesh = new InstancedMino(minoGeometry, minoMaterial, 2*ROWS*COLUMNS) this.mesh = new InstancedMino(minoGeometry, minoMaterial, 2*ROWS*COLUMNS)

1
loading.css
View File

@ -127,6 +127,7 @@ body {
padding: 0; padding: 0;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
cursor: progress;
} }
.e-loadholder { .e-loadholder {