Compare commits
3 Commits
95c0bcdd10
...
c85aaf96a8
| Author | SHA1 | Date | |
|---|---|---|---|
| c85aaf96a8 | |||
| cbcec7e387 | |||
| a508a3710f |
@ -2,7 +2,7 @@ import * as THREE from 'three';
|
||||
|
||||
const mazeGeometry = new THREE.BoxGeometry( 1, 1, 1 );
|
||||
|
||||
class MazeMesh extends THREE.InstancedMesh {
|
||||
export default class MazeMesh extends THREE.InstancedMesh {
|
||||
constructor( width, length, material ) {
|
||||
super( mazeGeometry, material, width*length - 2 );
|
||||
this.length = length
|
||||
@ -59,6 +59,4 @@ class MazeMesh extends THREE.InstancedMesh {
|
||||
return -1
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export { MazeMesh }
|
||||
}
|
||||
25
index.html
25
index.html
@ -6,25 +6,22 @@
|
||||
<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="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>
|
||||
<body>
|
||||
<div id="container"></div>
|
||||
<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>
|
||||
|
||||
</body>
|
||||
|
||||
65
main.js
65
main.js
@ -12,7 +12,7 @@ import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
|
||||
import { Water } from 'three/addons/objects/Water.js';
|
||||
import { Sky } from 'three/addons/objects/Sky.js';
|
||||
|
||||
import { MazeMesh } from 'MazeMesh';
|
||||
import MazeMesh from './MazeMesh.js';
|
||||
|
||||
const latitude = THREE.MathUtils.degToRad(35)
|
||||
const longitude = THREE.MathUtils.degToRad(25)
|
||||
@ -74,7 +74,7 @@ const ocean = new Water(
|
||||
alpha : 0.7
|
||||
}
|
||||
);
|
||||
ocean.rotation.x = - Math.PI / 2;
|
||||
ocean.rotation.x = - Math.PI * 0.5;
|
||||
ocean.position.y = -.01
|
||||
ocean.receiveShadow = true;
|
||||
ocean.material.transparent = true;
|
||||
@ -532,10 +532,60 @@ 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() {
|
||||
|
||||
const deltaTime = Math.min( 0.05, clock.getDelta() ) / STEPS_PER_FRAME;
|
||||
const delta = Math.min( 0.05, clock.getDelta() )
|
||||
const deltaTime = delta / STEPS_PER_FRAME;
|
||||
|
||||
// we look for collisions in substeps to mitigate the risk of
|
||||
// an object traversing another too quickly for detection.
|
||||
@ -553,9 +603,12 @@ function animate() {
|
||||
const time = clock.elapsedTime;
|
||||
|
||||
ocean.material.uniforms[ 'time' ].value += 1.0 / 100.0;
|
||||
raft.rotation.z = 0.12 * Math.cos( 1.2 * time )
|
||||
raft.rotation.x = 0.06 * Math.cos( time )
|
||||
raft.position.y = 0.05 * (0.5 * Math.sin( 1.2 * time ) + 0.5 * Math.sin( time ))
|
||||
const waveInfo = getWaveInfo(raft.position.x, raft.position.z, time)
|
||||
raft.position.y = waveInfo.position.y
|
||||
const quat = new THREE.Quaternion().setFromEuler(
|
||||
new THREE.Euler(waveInfo.normal.x, waveInfo.normal.y, waveInfo.normal.z)
|
||||
)
|
||||
raft.quaternion.rotateTowards(quat, delta * 0.5)
|
||||
|
||||
if ( sunLight.visible ) {
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user