<html><head><base href="https://advanced-ocean-crypto.3d-experience.com/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hyperrealistic Ocean Crypto Experience</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
#scene-container {
width: 100%;
height: 100%;
}
#loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
color: white;
font-family: Arial, sans-serif;
font-size: 24px;
z-index: 1000;
}
#info {
position: absolute;
top: 10px;
left: 10px;
color: white;
font-family: Arial, sans-serif;
font-size: 16px;
text-shadow: 1px 1px 2px black;
}
</style>
</head>
<body>
<div id="loading">Loading advanced hyper-realistic ocean crypto experience...</div>
<div id="scene-container"></div>
<div id="info">Use WASD to move, Mouse to look around</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/PointerLockControls.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/EffectComposer.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/RenderPass.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/ShaderPass.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/UnrealBloomPass.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/shaders/LuminosityHighPassShader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/shaders/CopyShader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/objects/Water.js"></script>
<script>
let scene, camera, renderer, composer, ocean, sky, sun, controls, gui;
let moveForward = false, moveBackward = false, moveLeft = false, moveRight = false;
let velocity = new THREE.Vector3();
let waterMesh, waterNormals;
let cryptoObjects = [];
const cryptoSymbols = ['BTC', 'ETH', 'ADA', 'SOL', 'DOGE', 'QQ', 'NO', 'PEPE', 'GF', 'PANDA', 'YAYA', 'SATOSHI', 'CAT', 'ORD', 'CLOWN', 'YY', 'JUMP', 'DONALD', 'A', 'MIMI', 'MIQI', 'RABBIT', 'SHEEP', 'SNAKE', 'PEACE', 'RAT', 'MONKEY', 'DRAGON', 'X', 'SEAL', 'COW', 'OTTER', 'ORD(', 'ORD{', 'ORD%', 'ORD<'];
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 2, 5);
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 0.5;
renderer.outputEncoding = THREE.sRGBEncoding;
document.getElementById('scene-container').appendChild(renderer.domElement);
controls = new THREE.PointerLockControls(camera, document.body);
scene.add(controls.getObject());
// Water
waterNormals = new THREE.TextureLoader().load('https://threejs.org/examples/textures/waternormals.jpg', function (texture) {
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
});
const waterGeometry = new THREE.PlaneGeometry(10000, 10000);
water = new THREE.Water(
waterGeometry,
{
textureWidth: 512,
textureHeight: 512,
waterNormals: waterNormals,
sunDirection: new THREE.Vector3(),
sunColor: 0xffffff,
waterColor: 0x001e0f,
distortionScale: 3.7,
fog: scene.fog !== undefined
}
);
water.rotation.x = -Math.PI / 2;
scene.add(water);
// Sky
const skyGeometry = new THREE.SphereGeometry(500, 32, 32);
const skyMaterial = new THREE.ShaderMaterial({
uniforms: {
topColor: { value: new THREE.Color(0x0077ff) },
bottomColor: { value: new THREE.Color(0xffffff) },
offset: { value: 33 },
exponent: { value: 0.6 }
},
vertexShader: `
varying vec3 vWorldPosition;
void main() {
vec4 worldPosition = modelMatrix * vec4(position, 1.0);
vWorldPosition = worldPosition.xyz;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
fragmentShader: `
uniform vec3 topColor;
uniform vec3 bottomColor;
uniform float offset;
uniform float exponent;
varying vec3 vWorldPosition;
void main() {
float h = normalize(vWorldPosition + offset).y;
gl_FragColor = vec4(mix(bottomColor, topColor, max(pow(max(h, 0.0), exponent), 0.0)), 1.0);
}
`,
side: THREE.BackSide
});
sky = new THREE.Mesh(skyGeometry, skyMaterial);
scene.add(sky);
// Sun
sun = new THREE.DirectionalLight(0xffffbb, 1);
sun.position.set(0, 50, 0);
scene.add(sun);
// Ambient light
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);
// Create crypto objects
createCryptoObjects();
// Post-processing
composer = new THREE.EffectComposer(renderer);
const renderPass = new THREE.RenderPass(scene, camera);
composer.addPass(renderPass);
const bloomPass = new THREE.UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85);
composer.addPass(bloomPass);
// GUI
gui = new dat.GUI();
gui.add(water.material.uniforms.distortionScale, 'value', 0, 8, 0.1).name('Wave Distortion');
gui.add(water.material.uniforms.size, 'value', 0.1, 10, 0.1).name('Wave Size');
window.addEventListener('resize', onWindowResize, false);
document.addEventListener('keydown', onKeyDown, false);
document.addEventListener('keyup', onKeyUp, false);
renderer.domElement.addEventListener('click', function () {
controls.lock();
});
controls.addEventListener('lock', function () {
document.getElementById('info').style.display = 'none';
});
controls.addEventListener('unlock', function () {
document.getElementById('info').style.display = 'block';
});
// Hide loading screen
document.getElementById('loading').style.display = 'none';
}
function createCryptoObjects() {
const fontLoader = new THREE.FontLoader();
fontLoader.load('https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', function(font) {
cryptoSymbols.forEach((symbol, index) => {
const geometry = new THREE.TextGeometry(symbol, {
font: font,
size: 0.5,
height: 0.1,
});
const material = new THREE.MeshPhongMaterial({ color: Math.random() * 0xffffff });
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(
Math.random() * 100 - 50,
Math.random() * 2 + 1,
Math.random() * 100 - 50
);
mesh.rotation.y = Math.random() * Math.PI * 2;
scene.add(mesh);
cryptoObjects.push(mesh);
});
});
}
function animate(currentTime) {
requestAnimationFrame(animate);
const delta = currentTime * 0.001;
// Update sun position
const sunAngle = delta * 0.05;
sun.position.x = Math.cos(sunAngle) * 100;
sun.position.y = Math.sin(sunAngle) * 100;
water.material.uniforms['sunDirection'].value.copy(sun.position).normalize();
// Update water
water.material.uniforms['time'].value += 1.0 / 60.0;
// Player movement
velocity.x -= velocity.x * 10.0 * delta;
velocity.z -= velocity.z * 10.0 * delta;
if (moveForward) velocity.z -= 400.0 * delta;
if (moveBackward) velocity.z += 400.0 * delta;
if (moveLeft) velocity.x -= 400.0 * delta;
if (moveRight) velocity.x += 400.0 * delta;
controls.moveRight(velocity.x * delta);
controls.moveForward(velocity.z * delta);
// Buoyancy effect
const buoyancyTime = performance.now() * 0.001;
const position = controls.getObject().position;
position.y = Math.sin(buoyancyTime) * 0.1 + 2;
// Animate crypto objects
cryptoObjects.forEach((obj, index) => {
obj.position.y = Math.sin(buoyancyTime + index) * 0.1 + 1.5;
obj.rotation.y += 0.01;
});
composer.render();
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
composer.setSize(window.innerWidth, window.innerHeight);
}
function onKeyDown(event) {
switch (event.code) {
case 'KeyW': moveForward = true; break;
case 'KeyA': moveLeft = true; break;
case 'KeyS': moveBackward = true; break;
case 'KeyD': moveRight = true; break;
}
}
function onKeyUp(event) {
switch (event.code) {
case 'KeyW': moveForward = false; break;
case 'KeyA': moveLeft = false; break;
case 'KeyS': moveBackward = false; break;
case 'KeyD': moveRight = false; break;
}
}
init();
animate(0);
</script>
</body>
</html>
