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

Compare commits

base: adrien:c85aaf96a843eb3e717fdf8de1000eed2b2d2e03
Branches Tags
adrien:master
adrien:hexTiling
..
compare: adrien:95c0bcdd10ffbbaccf1008ddc89e074b7da5ff34
Branches Tags
adrien:master
adrien:hexTiling

No commits in common. "c85aaf96a843eb3e717fdf8de1000eed2b2d2e03" and "95c0bcdd10ffbbaccf1008ddc89e074b7da5ff34" have entirely different histories.
c85aaf96a8 ... 95c0bcdd10

3 changed files with 24 additions and 72 deletions
Show Stats Expand all files Collapse all files

6
MazeMesh.js
View File

@ -2,7 +2,7 @@ import * as THREE from 'three';
const mazeGeometry = new THREE.BoxGeometry( 1, 1, 1 ); const mazeGeometry = new THREE.BoxGeometry( 1, 1, 1 );
export default class MazeMesh extends THREE.InstancedMesh { class MazeMesh extends THREE.InstancedMesh {
constructor( width, length, material ) { constructor( width, length, material ) {
super( mazeGeometry, material, width*length - 2 ); super( mazeGeometry, material, width*length - 2 );
this.length = length this.length = length
@ -59,4 +59,6 @@ export default class MazeMesh extends THREE.InstancedMesh {
return -1 return -1
} }
} }
} }
export { MazeMesh }

25
index.html
View File

@ -6,22 +6,25 @@
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="favicon.php"/> <link rel="shortcut icon" type="image/x-icon" href="favicon.php"/>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.152.2/build/three.module.js",
"three/addons/": "https://unpkg.com/three@0.152.2/examples/jsm/"
}
}
</script>
</head> </head>
<body> <body>
<div id="container"></div> <div id="container"></div>
<span id="message">Libre !</span> <span id="message">Libre !</span>
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.152.2/build/three.module.js",
"three/addons/": "https://unpkg.com/three@0.152.2/examples/jsm/",
"MazeMesh": "./MazeMesh.js"
}
}
</script>
<script type="module" src="main.js"></script> <script type="module" src="main.js"></script>
</body> </body>

65
main.js
View File

@ -12,7 +12,7 @@ import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
import { Water } from 'three/addons/objects/Water.js'; import { Water } from 'three/addons/objects/Water.js';
import { Sky } from 'three/addons/objects/Sky.js'; import { Sky } from 'three/addons/objects/Sky.js';
import MazeMesh from './MazeMesh.js'; import { MazeMesh } from 'MazeMesh';
const latitude = THREE.MathUtils.degToRad(35) const latitude = THREE.MathUtils.degToRad(35)
const longitude = THREE.MathUtils.degToRad(25) const longitude = THREE.MathUtils.degToRad(25)
@ -74,7 +74,7 @@ const ocean = new Water(
alpha : 0.7 alpha : 0.7
} }
); );
ocean.rotation.x = - Math.PI * 0.5; ocean.rotation.x = - Math.PI / 2;
ocean.position.y = -.01 ocean.position.y = -.01
ocean.receiveShadow = true; ocean.receiveShadow = true;
ocean.material.transparent = true; ocean.material.transparent = true;
@ -532,60 +532,10 @@ function teleportPlayerIfOob() {
} }
const waves = {
A: {
direction: 0,
steepness: 0.015,
wavelength: 10,
},
B: {
direction: 30,
steepness: 0.015,
wavelength: 5,
},
C: {
direction: 60,
steepness: 0.015,
wavelength: 3,
},
}
function getWaveInfo(x, z, time) {
const pos = new THREE.Vector3()
const tangent = new THREE.Vector3(1, 0, 0)
const binormal = new THREE.Vector3(0, 0, 1)
Object.keys(waves).forEach(function (wave) {
const w = waves[wave]
const k = (Math.PI * 2) / w.wavelength
const c = Math.sqrt(9.8 / k)
const d = new THREE.Vector2(
Math.sin((w.direction * Math.PI) / 180),
-Math.cos((w.direction * Math.PI) / 180)
)
const f = k * (d.dot(new THREE.Vector2(x, z)) - c * time)
const a = w.steepness / k
pos.x += d.y * (a * Math.cos(f))
pos.y += a * Math.sin(f)
pos.z += d.x * (a * Math.cos(f))
tangent.x += -d.x * d.x * (w.steepness * Math.sin(f))
tangent.y += d.x * (w.steepness * Math.cos(f))
tangent.z += -d.x * d.y * (w.steepness * Math.sin(f))
binormal.x += -d.x * d.y * (w.steepness * Math.sin(f))
binormal.y += d.y * (w.steepness * Math.cos(f))
binormal.z += -d.y * d.y * (w.steepness * Math.sin(f))
})
const normal = binormal.cross(tangent).normalize()
return {
position: pos,
normal: normal,
}
}
function animate() { function animate() {
const delta = Math.min( 0.05, clock.getDelta() ) const deltaTime = Math.min( 0.05, clock.getDelta() ) / STEPS_PER_FRAME;
const deltaTime = delta / STEPS_PER_FRAME;
// we look for collisions in substeps to mitigate the risk of // we look for collisions in substeps to mitigate the risk of
// an object traversing another too quickly for detection. // an object traversing another too quickly for detection.
@ -603,12 +553,9 @@ function animate() {
const time = clock.elapsedTime; const time = clock.elapsedTime;
ocean.material.uniforms[ 'time' ].value += 1.0 / 100.0; ocean.material.uniforms[ 'time' ].value += 1.0 / 100.0;
const waveInfo = getWaveInfo(raft.position.x, raft.position.z, time) raft.rotation.z = 0.12 * Math.cos( 1.2 * time )
raft.position.y = waveInfo.position.y raft.rotation.x = 0.06 * Math.cos( time )
const quat = new THREE.Quaternion().setFromEuler( raft.position.y = 0.05 * (0.5 * Math.sin( 1.2 * time ) + 0.5 * Math.sin( time ))
new THREE.Euler(waveInfo.normal.x, waveInfo.normal.y, waveInfo.normal.z)
)
raft.quaternion.rotateTowards(quat, delta * 0.5)
if ( sunLight.visible ) { if ( sunLight.visible ) {