HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!

1920x1080

25.4 KB

Share this result

Previews are deleted daily. Get a permanent share link sent to your inbox:

Script

Open in browser

<!DOCTYPE html>
<html>
<head>
  <title>3D Rocket Space Game</title>
  <style>
    body { margin:0; overflow:hidden; }
    button {
      position:absolute;
      padding:10px 15px;
      font-size:16px;
      cursor:pointer;
    }
    #engineBtn { top:10px; left:10px; }
    #fuelBtn { top:10px; left:130px; }
    #launchBtn { top:10px; left:240px; }
    #altitude {
      position:absolute;
      top:60px;
      left:10px;
      font-size:20px;
      color:white;
    }
  </style>
</head>
<body>

<button id="engineBtn">Add Engine</button>
<button id="fuelBtn">Add Fuel</button>
<button id="launchBtn">Launch</button>
<div id="altitude">Height: 0 m</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

<script>
let scene = new THREE.Scene();
scene.background = new THREE.Color(0x87CEEB);

let camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 20000);
camera.position.set(0,5,15);

let renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// LIGHT
let light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(10,20,10);
scene.add(light);

// GROUND
let groundGeo = new THREE.PlaneGeometry(500,500);
let groundMat = new THREE.MeshStandardMaterial({color:0x228B22});
let ground = new THREE.Mesh(groundGeo, groundMat);
ground.rotation.x = -Math.PI/2;
scene.add(ground);

// 🌍 EARTH
let earthGeo = new THREE.SphereGeometry(200, 64, 64);
let earthMat = new THREE.MeshStandardMaterial({color:0x2266dd});
let earth = new THREE.Mesh(earthGeo, earthMat);
earth.position.y = -250;
scene.add(earth);

// ⭐ STARS
let starGeo = new THREE.BufferGeometry();
let starCount = 2000;
let starVertices = [];

for (let i = 0; i < starCount; i++) {
  starVertices.push(
    THREE.MathUtils.randFloatSpread(20000),
    THREE.MathUtils.randFloatSpread(20000),
    THREE.MathUtils.randFloatSpread(20000)
  );
}

starGeo.setAttribute('position',
  new THREE.Float32BufferAttribute(starVertices, 3)
);

let starMat = new THREE.PointsMaterial({color:0xffffff});
let stars = new THREE.Points(starGeo, starMat);
scene.add(stars);

// 🚀 ROCKET MODEL
let rocket = new THREE.Group();

// BODY
let body = new THREE.Mesh(
  new THREE.CylinderGeometry(0.5,0.5,4,32),
  new THREE.MeshStandardMaterial({color:0xffffff})
);
body.position.y = 2;
rocket.add(body);

// NOSE
let nose = new THREE.Mesh(
  new THREE.ConeGeometry(0.5,1.5,32),
  new THREE.MeshStandardMaterial({color:0xff0000})
);
nose.position.y = 4.75;
rocket.add(nose);

// NOZZLE
let nozzle = new THREE.Mesh(
  new THREE.CylinderGeometry(0.3,0.4,0.8,32),
  new THREE.MeshStandardMaterial({color:0x333333})
);
nozzle.position.y = 0.4;
rocket.add(nozzle);

// FINS
let finGeo = new THREE.BoxGeometry(0.1,1,0.8);
let finMat = new THREE.MeshStandardMaterial({color:0xff0000});

let fin1 = new THREE.Mesh(finGeo, finMat);
fin1.position.set(0.5,1,0);
rocket.add(fin1);

let fin2 = new THREE.Mesh(finGeo, finMat);
fin2.position.set(-0.5,1,0);
rocket.add(fin2);

let fin3 = new THREE.Mesh(finGeo, finMat);
fin3.position.set(0,1,0.5);
fin3.rotation.y = Math.PI/2;
rocket.add(fin3);

let fin4 = new THREE.Mesh(finGeo, finMat);
fin4.position.set(0,1,-0.5);
fin4.rotation.y = Math.PI/2;
rocket.add(fin4);

rocket.position.y = 0;
scene.add(rocket);

// PHYSICS
let thrust = 0;
let fuel = 0;
let velocity = 0;
let gravity = 0.02;
let launched = false;

// BUTTONS
document.getElementById("engineBtn").onclick = () => {
  thrust += 0.15;
};

document.getElementById("fuelBtn").onclick = () => {
  fuel += 20;
};

document.getElementById("launchBtn").onclick = () => {
  if (fuel > 0 && thrust > 0) {
    launched = true;
  } else {
    alert("Add Engine & Fuel First!");
  }
};

// ANIMATION
function animate() {
  requestAnimationFrame(animate);

  if (launched) {

    if (fuel > 0) {
      velocity += thrust;
      fuel -= 0.2;
    }

    velocity -= gravity;
    rocket.position.y += velocity;

    if (rocket.position.y < 0) {
      rocket.position.y = 0;
      velocity = 0;
    }
  }

  // SPACE TRANSITION at ~10000 ft (3000m)
  if (rocket.position.y > 3000) {
    scene.background = new THREE.Color(0x000000);
  }

  // Camera follow
  camera.position.y = rocket.position.y + 8;
  camera.lookAt(rocket.position);

  // Earth rotate slowly
  earth.rotation.y += 0.001;

  // Altitude
  document.getElementById("altitude").innerText =
    "Height: " + rocket.position.y.toFixed(2) + " m";

  renderer.render(scene, camera);
}

animate();
</script>

</body>
</html>

Landing Page

This ad does not have a landing page available

Network Timeline

Performance Summary

Requests

Domains

124KB

Transfer Size

594KB

Content Size

3,595.0ms

Dom Content Loaded

208.0ms

First Paint

3,595.0ms

Load Time

Domain Breakdown

Transfer Size (bytes)

Content Size (bytes)

Header Size (bytes)

Requests

Timings (ms)

Total Time

Content Breakdown

Transfer Size (bytes)

Content Size (bytes)

Header Size (bytes)

Requests