mimo-v2.5-pro Code

Model-specific source generated from the shared prompt shown on the gallery page. The prompt itself is intentionally not duplicated here.

src/main.js src/styles.css package.json

JavaScript

src/main.js

1import './styles.css';2import * as THREE from 'three';3 4const MODEL_NAME = 'mimo-v2-5-pro';5 6// State7let paused = false;8let waveHeight = 1.0;9let waveSpeed = 1.0;10let clock = new THREE.Clock();11 12// Scene setup13const scene = new THREE.Scene();14scene.background = new THREE.Color(0x87CEEB);15scene.fog = new THREE.FogExp2(0x87CEEB, 0.008);16 17const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);18camera.position.set(0, 8, 20);19camera.lookAt(0, 0, 0);20 21const renderer = new THREE.WebGLRenderer({ antialias: true });22renderer.setSize(window.innerWidth, window.innerHeight);23renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));24renderer.toneMapping = THREE.ACESFilmicToneMapping;25renderer.toneMappingExposure = 1.2;26 27// Ocean geometry28const oceanGeo = new THREE.PlaneGeometry(200, 200, 128, 128);29oceanGeo.rotateX(-Math.PI / 2);30 31const oceanMat = new THREE.MeshStandardMaterial({32  color: 0x006994,33  metalness: 0.3,34  roughness: 0.4,35  flatShading: false,36});37 38const ocean = new THREE.Mesh(oceanGeo, oceanMat);39scene.add(ocean);40 41// Lights42const ambientLight = new THREE.AmbientLight(0x4488bb, 0.6);43scene.add(ambientLight);44 45const dirLight = new THREE.DirectionalLight(0xffffff, 1.5);46dirLight.position.set(5, 10, 5);47scene.add(dirLight);48 49const hemiLight = new THREE.HemisphereLight(0x87CEEB, 0x006994, 0.4);50scene.add(hemiLight);51 52// Wave animation53function animateWaves(time) {54  const pos = oceanGeo.attributes.position;55  const vertex = new THREE.Vector3();56 57  for (let i = 0; i < pos.count; i++) {58    vertex.fromBufferAttribute(pos, i);59 60    const x = vertex.x;61    const z = vertex.z;62 63    // Multiple wave layers for realistic ocean64    let y = 0;65    y += Math.sin(x * 0.05 + time * waveSpeed * 0.8) * waveHeight * 1.2;66    y += Math.sin(z * 0.08 + time * waveSpeed * 1.1) * waveHeight * 0.8;67    y += Math.sin(x * 0.12 + z * 0.06 + time * waveSpeed * 1.4) * waveHeight * 0.5;68    y += Math.sin(x * 0.02 - time * waveSpeed * 0.5) * waveHeight * 2.0;69    y += Math.cos(z * 0.04 + time * waveSpeed * 0.7) * waveHeight * 0.6;70 71    // Small ripples72    y += Math.sin(x * 0.5 + time * waveSpeed * 3.0) * waveHeight * 0.1;73    y += Math.cos(z * 0.4 + time * waveSpeed * 2.5) * waveHeight * 0.08;74 75    pos.setY(i, y);76  }77 78  pos.needsUpdate = true;79  oceanGeo.computeVertexNormals();80}81 82// UI83const app = document.querySelector('#app');84 85const ui = document.createElement('div');86ui.className = 'ui-overlay';87ui.innerHTML = `88  <div class="controls">89    <button id="toggleBtn" title="Pause / Resume">90      <span id="pauseIcon">⏸</span>91    </button>92    <label>93      Wave Height94      <input type="range" id="waveHeight" min="0.1" max="3.0" step="0.1" value="1.0" />95    </label>96    <label>97      Speed98      <input type="range" id="waveSpeed" min="0.1" max="3.0" step="0.1" value="1.0" />99    </label>100  </div>101  <div class="model-label">${MODEL_NAME}</div>102`;103 104app.appendChild(ui);105 106const canvas = renderer.domElement;107app.insertBefore(canvas, ui);108 109// UI event listeners110const toggleBtn = document.getElementById('toggleBtn');111const pauseIcon = document.getElementById('pauseIcon');112const heightSlider = document.getElementById('waveHeight');113const speedSlider = document.getElementById('waveSpeed');114 115toggleBtn.addEventListener('click', () => {116  paused = !paused;117  pauseIcon.textContent = paused ? '▶' : '⏸';118  if (!paused) clock.getDelta(); // reset delta on resume119});120 121heightSlider.addEventListener('input', (e) => {122  waveHeight = parseFloat(e.target.value);123});124 125speedSlider.addEventListener('input', (e) => {126  waveSpeed = parseFloat(e.target.value);127});128 129// Resize130window.addEventListener('resize', () => {131  camera.aspect = window.innerWidth / window.innerHeight;132  camera.updateProjectionMatrix();133  renderer.setSize(window.innerWidth, window.innerHeight);134});135 136// Animation loop137function animate() {138  requestAnimationFrame(animate);139 140  if (!paused) {141    const delta = clock.getDelta();142    const elapsed = clock.getElapsedTime();143    animateWaves(elapsed);144  }145 146  renderer.render(scene, camera);147}148 149animate();150

import './styles.css';
import * as THREE from 'three';

const MODEL_NAME = 'mimo-v2-5-pro';

// State
let paused = false;
let waveHeight = 1.0;
let waveSpeed = 1.0;
let clock = new THREE.Clock();

// Scene setup
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x87CEEB);
scene.fog = new THREE.FogExp2(0x87CEEB, 0.008);

const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 8, 20);
camera.lookAt(0, 0, 0);

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.2;

// Ocean geometry
const oceanGeo = new THREE.PlaneGeometry(200, 200, 128, 128);
oceanGeo.rotateX(-Math.PI / 2);

const oceanMat = new THREE.MeshStandardMaterial({
  color: 0x006994,
  metalness: 0.3,
  roughness: 0.4,
  flatShading: false,
});

const ocean = new THREE.Mesh(oceanGeo, oceanMat);
scene.add(ocean);

// Lights
const ambientLight = new THREE.AmbientLight(0x4488bb, 0.6);
scene.add(ambientLight);

const dirLight = new THREE.DirectionalLight(0xffffff, 1.5);
dirLight.position.set(5, 10, 5);
scene.add(dirLight);

const hemiLight = new THREE.HemisphereLight(0x87CEEB, 0x006994, 0.4);
scene.add(hemiLight);

// Wave animation
function animateWaves(time) {
  const pos = oceanGeo.attributes.position;
  const vertex = new THREE.Vector3();

for (let i = 0; i < pos.count; i++) {
    vertex.fromBufferAttribute(pos, i);

const x = vertex.x;
    const z = vertex.z;

// Multiple wave layers for realistic ocean
    let y = 0;
    y += Math.sin(x * 0.05 + time * waveSpeed * 0.8) * waveHeight * 1.2;
    y += Math.sin(z * 0.08 + time * waveSpeed * 1.1) * waveHeight * 0.8;
    y += Math.sin(x * 0.12 + z * 0.06 + time * waveSpeed * 1.4) * waveHeight * 0.5;
    y += Math.sin(x * 0.02 - time * waveSpeed * 0.5) * waveHeight * 2.0;
    y += Math.cos(z * 0.04 + time * waveSpeed * 0.7) * waveHeight * 0.6;

// Small ripples
    y += Math.sin(x * 0.5 + time * waveSpeed * 3.0) * waveHeight * 0.1;
    y += Math.cos(z * 0.4 + time * waveSpeed * 2.5) * waveHeight * 0.08;

pos.setY(i, y);
  }

pos.needsUpdate = true;
  oceanGeo.computeVertexNormals();
}

// UI
const app = document.querySelector('#app');

const ui = document.createElement('div');
ui.className = 'ui-overlay';
ui.innerHTML = `
  <div class="controls">
    <button id="toggleBtn" title="Pause / Resume">
      <span id="pauseIcon">⏸</span>
    </button>
    <label>
      Wave Height
      <input type="range" id="waveHeight" min="0.1" max="3.0" step="0.1" value="1.0" />
    </label>
    <label>
      Speed
      <input type="range" id="waveSpeed" min="0.1" max="3.0" step="0.1" value="1.0" />
    </label>
  </div>
  <div class="model-label">${MODEL_NAME}</div>
`;

app.appendChild(ui);

const canvas = renderer.domElement;
app.insertBefore(canvas, ui);

// UI event listeners
const toggleBtn = document.getElementById('toggleBtn');
const pauseIcon = document.getElementById('pauseIcon');
const heightSlider = document.getElementById('waveHeight');
const speedSlider = document.getElementById('waveSpeed');

toggleBtn.addEventListener('click', () => {
  paused = !paused;
  pauseIcon.textContent = paused ? '▶' : '⏸';
  if (!paused) clock.getDelta(); // reset delta on resume
});

heightSlider.addEventListener('input', (e) => {
  waveHeight = parseFloat(e.target.value);
});

speedSlider.addEventListener('input', (e) => {
  waveSpeed = parseFloat(e.target.value);
});

// Resize
window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

// Animation loop
function animate() {
  requestAnimationFrame(animate);

if (!paused) {
    const delta = clock.getDelta();
    const elapsed = clock.getElapsedTime();
    animateWaves(elapsed);
  }

renderer.render(scene, camera);
}

animate();

CSS

src/styles.css

1* {2  box-sizing: border-box;3}4 5html,6body,7#app {8  width: 100%;9  height: 100%;10  margin: 0;11}12 13body {14  font-family: system-ui, -apple-system, sans-serif;15  overflow: hidden;16  background: #000;17}18 19#app {20  position: relative;21}22 23canvas {24  display: block;25  width: 100% !important;26  height: 100% !important;27}28 29.ui-overlay {30  position: absolute;31  top: 0;32  left: 0;33  width: 100%;34  height: 100%;35  pointer-events: none;36  display: flex;37  flex-direction: column;38  justify-content: space-between;39  z-index: 10;40}41 42.controls {43  pointer-events: auto;44  display: flex;45  align-items: center;46  gap: 16px;47  padding: 16px;48  background: rgba(0, 0, 0, 0.5);49  backdrop-filter: blur(8px);50  -webkit-backdrop-filter: blur(8px);51  border-bottom: 1px solid rgba(255, 255, 255, 0.1);52  flex-wrap: wrap;53}54 55.controls button {56  background: rgba(255, 255, 255, 0.15);57  border: 1px solid rgba(255, 255, 255, 0.2);58  color: #fff;59  width: 40px;60  height: 40px;61  border-radius: 8px;62  cursor: pointer;63  font-size: 18px;64  display: flex;65  align-items: center;66  justify-content: center;67  transition: background 0.2s;68}69 70.controls button:hover {71  background: rgba(255, 255, 255, 0.25);72}73 74.controls label {75  color: #fff;76  font-size: 13px;77  display: flex;78  align-items: center;79  gap: 8px;80  white-space: nowrap;81}82 83.controls input[type="range"] {84  width: 120px;85  accent-color: #4fc3f7;86}87 88.model-label {89  pointer-events: none;90  align-self: flex-end;91  padding: 8px 16px;92  margin: 16px;93  background: rgba(0, 0, 0, 0.4);94  backdrop-filter: blur(4px);95  -webkit-backdrop-filter: blur(4px);96  border-radius: 6px;97  color: rgba(255, 255, 255, 0.7);98  font-size: 12px;99  font-family: monospace;100  letter-spacing: 0.5px;101}102 103@media (max-width: 600px) {104  .controls {105    gap: 10px;106    padding: 10px;107  }108 109  .controls label {110    font-size: 12px;111  }112 113  .controls input[type="range"] {114    width: 80px;115  }116 117  .model-label {118    margin: 10px;119    font-size: 11px;120  }121}122

* {
  box-sizing: border-box;
}

html,
body,
#app {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  overflow: hidden;
  background: #000;
}

#app {
  position: relative;
}

canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.ui-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 10;
}

.controls {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-wrap: wrap;
}

.controls button {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.controls button:hover {
  background: rgba(255, 255, 255, 0.25);
}

.controls label {
  color: #fff;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.controls input[type="range"] {
  width: 120px;
  accent-color: #4fc3f7;
}

.model-label {
  pointer-events: none;
  align-self: flex-end;
  padding: 8px 16px;
  margin: 16px;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-family: monospace;
  letter-spacing: 0.5px;
}

@media (max-width: 600px) {
  .controls {
    gap: 10px;
    padding: 10px;
  }

.controls label {
    font-size: 12px;
  }

.controls input[type="range"] {
    width: 80px;
  }

.model-label {
    margin: 10px;
    font-size: 11px;
  }
}

Package

package.json

1{2  "name": "ocean-ui-model-run",3  "version": "0.1.0",4  "private": true,5  "type": "module",6  "scripts": {7    "dev": "vite --host 127.0.0.1",8    "build": "vite build",9    "preview": "vite preview --host 127.0.0.1"10  },11  "dependencies": {12    "three": "^0.171.0",13    "vite": "^6.0.7"14  },15  "devDependencies": {}16}17