Update index.html

index.html

@@ -19,192 +19,192 @@ let renderer = new THREE.WebGLRenderer();
 renderer.setSize(window.innerWidth, window.innerHeight);
 document.body.appendChild(renderer.domElement);
 
-// SKY, SUN, AMBIENT LIGHT
-scene.background = new THREE.Color(0x87CEEB); // sky blue
-let sun = new THREE.DirectionalLight(0xffffff, 1);
-sun.position.set(10, 20, 10);
-scene.add(sun);
-let ambient = new THREE.AmbientLight(0x666666);
-scene.add(ambient);
+// SKYBOX / BACKGROUND (just a simple gradient sky, no cube maps today)
+let skyGeom = new THREE.SphereGeometry(500, 32, 32);
+let skyMat = new THREE.MeshBasicMaterial({
+    map: new THREE.CanvasTexture((function(){
+        let c = document.createElement('canvas'), ctx = c.getContext('2d');
+        c.width = c.height = 256;
+        let grd = ctx.createLinearGradient(0, 0, 0, 256);
+        grd.addColorStop(0, '#87CEEB'); // light sky blue top
+        grd.addColorStop(1, '#4682B4'); // steel blue bottom
+        ctx.fillStyle = grd;
+        ctx.fillRect(0, 0, 256, 256);
+        return c;
+    })()),
+    side: THREE.BackSide
+});
+let sky = new THREE.Mesh(skyGeom, skyMat);
+scene.add(sky);
 
-// CLOUDS (just a few big transparent billboards)
+// CLOUDS (just a few puffy billow-y things using transparent textures)
 function makeCloud(x, y, z) {
-    let geo = new THREE.PlaneGeometry(5, 2);
-    let mat = new THREE.MeshBasicMaterial({ 
-        map: new THREE.CanvasTexture(makeCloudCanvas()), 
-        transparent: true, 
-        depthWrite: false 
+    let cloudGeo = new THREE.SphereGeometry(10 + Math.random() * 5, 16, 16);
+    let cloudMat = new THREE.MeshBasicMaterial({
+        color: 0xffffff,
+        opacity: Math.random() * 0.3 + 0.2,
+        transparent: true,
+        map: new THREE.CanvasTexture((function(){
+            let c = document.createElement('canvas'), ctx = c.getContext('2d');
+            c.width = c.height = 64;
+            ctx.fillStyle = 'white';
+            ctx.beginPath(); ctx.arc(32, 32, 28, 0, Math.PI * 2); ctx.fill();
+            // make edges puffy/feathered
+            let gd = ctx.createRadialGradient(32, 32, 10, 32, 32, 28);
+            gd.addColorStop(0, 'rgba(255,255,255,1)');
+            gd.addColorStop(0.7, 'rgba(255,255,255,0.3)');
+            gd.addColorStop(1, 'rgba(255,255,255,0)');
+            ctx.fillStyle = gd;
+            ctx.fillRect(0, 0, 64, 64);
+            return c;
+        })())
     });
-    let cloud = new THREE.Mesh(geo, mat);
+    let cloud = new THREE.Mesh(cloudGeo, cloudMat);
     cloud.position.set(x, y, z);
-    cloud.rotation.y = Math.random() * Math.PI * 2; // random rotation
     scene.add(cloud);
-    // animate cloud floating
-    let phase = Math.random() * Math.PI * 2;
-    function animateCloud() {
-        requestAnimationFrame(animateCloud);
-        cloud.position.y = y + Math.sin(phase + Date.now() * 0.001) * 0.2;
-    }
-    animateCloud();
-}
-function makeCloudCanvas() {
-    let canvas = document.createElement('canvas');
-    canvas.width = 256;
-    canvas.height = 128;
-    let ctx = canvas.getContext('2d');
-    ctx.fillStyle = 'white';
-    ctx.beginPath();
-    for (let i = 0; i < 10; i++) {
-        ctx.arc(Math.random() * 256, Math.random() * 128, Math.random() * 20 + 10, 0, Math.PI * 2);
-    }
-    ctx.fill();
-    return canvas;
+    return cloud;
 }
-makeCloud(10, 8, -20);
-makeCloud(-15, 7, -10);
-makeCloud(5, 9, -30);
+let clouds = [];
+for (let i = 0; i < 10; i++) clouds.push(makeCloud(Math.random() * 200 - 100, 30 + Math.random() * 10, Math.random() * 200 - 100));
 
-// MOUNTAINS (simple low-poly)
-let mountainGeo = new THREE.BufferGeometry();
-let mountainVerts = new Float32Array([
-     0,  0,  0,   5,  0,  0,  10, 0, 0,
-     5,  5, -5,   5,  5, 5,   0, 0, 0,
-    10,  0,  0,  15,  0, 0,  10, 5,-5,
-    10,  5,-5,  15,  0, 0,  10, 0, 5
+// MOUNTAINS (simple low-poly with vertex colors)
+let mountainGeom = new THREE.BufferGeometry();
+let mVerts = new Float32Array([
+     0,  0,  0,
+    50,  0,  0,
+    25, 40,  0,
+    
+    50,  0,  0,
+   100,  0,  0,
+    75, 40,  0,
+    
+     0,  0,  0,
+     0,  0, 50,
+    25, 40, 25,
+    
+   100,  0,  0,
+   100,  0, 50,
+    75, 40, 25,
 ]);
-mountainGeo.setAttribute('position', new THREE.BufferAttribute(mountainVerts, 3));
-let mountainMat = new THREE.MeshLambertMaterial({ color: 0x888888 });
-for (let i = 0; i < 5; i++) {
-    let m = new THREE.Mesh(mountainGeo, mountainMat);
-    m.position.x = -20 + i * 10;
-    m.position.z = -40;
-    m.scale.y = 2 + Math.random() * 2;
-    scene.add(m);
-}
+let mColors = new Float32Array([
+    0.5, 0.4, 0.3,  // brown base
+    0.5, 0.4, 0.3,
+    0.7, 0.6, 0.5,  // beige peak
+    
+    0.5, 0.4, 0.3,
+    0.5, 0.4, 0.3,
+    0.7, 0.6, 0.5,
+    
+    0.5, 0.4, 0.3,
+    0.5, 0.4, 0.3,
+    0.7, 0.6, 0.5,
+    
+    0.5, 0.4, 0.3,
+    0.5, 0.4, 0.3,
+    0.7, 0.6, 0.5,
+]);
+mountainGeom.setAttribute('position', new THREE.BufferAttribute(mVerts, 3));
+mountainGeom.setAttribute('color', new THREE.BufferAttribute(mColors, 3));
+let mountainMat = new THREE.MeshBasicMaterial({ vertexColors: true });
+let mountains = new THREE.Mesh(mountainGeom, mountainMat);
+mountains.scale.set(4, 4, 4); // bigger
+mountains.position.z = -100;
+scene.add(mountains);
 
-// ROAD (long thin box)
-let roadGeo = new THREE.BoxGeometry(1000, 0.1, 10);
-let roadMat = new THREE.MeshLambertMaterial({ color: 0x444444 });
-let road = new THREE.Mesh(roadGeo, roadMat);
-road.position.z = -50;
+// ROAD (just a long thin plane)
+let roadGeom = new THREE.PlaneGeometry(200, 10);
+let roadMat = new THREE.MeshBasicMaterial({ color: 0x444444 });
+let road = new THREE.Mesh(roadGeom, roadMat);
+road.rotation.x = -Math.PI / 2; // flat on ground
+road.position.y = -0.1; // under car wheels
 scene.add(road);
-// dashed line in the middle of the road
-let lineGeo = new THREE.PlaneGeometry(1000, 0.2);
-let lineMat = new THREE.MeshBasicMaterial({ color: 'yellow' });
-let line = new THREE.Mesh(lineGeo, lineMat);
-line.position.z = -50;
-line.position.y = 0.11; // on top of road
-line.rotation.x = -Math.PI / 2;
-scene.add(line);
-// make dashes (ugly simple way)
-for (let d = -500; d < 500; d += 20) {
-    let dash = new THREE.Mesh(new THREE.PlaneGeometry(5, 0.2), lineMat);
-    dash.position.z = -50;
-    dash.position.x = d;
-    dash.position.y = 0.11;
-    dash.rotation.x = -Math.PI / 2;
-    scene.add(dash);
-}
 
-// TREES (green cylinders with sphere tops)
+// TREES (simple green cones)
 function makeTree(x, z) {
-    let trunk = new THREE.Mesh(new THREE.CylinderGeometry(0.5, 0.5, 2), new THREE.MeshLambertMaterial({ color: 0x663300 }));
-    trunk.position.y = 1;
-    trunk.position.x = x;
-    trunk.position.z = z;
-    let leaf = new THREE.Mesh(new THREE.SphereGeometry(1.5), new THREE.MeshLambertMaterial({ color: 0x00CC00 }));
-    leaf.position.y = 3.5;
-    leaf.position.x = x;
-    leaf.position.z = z;
+    let treeGeo = new THREE.ConeGeometry(4, 10);
+    let treeMat = new THREE.MeshBasicMaterial({ color: 0x228B22 }); // forestgreen
+    let tree = new THREE.Mesh(treeGeo, treeMat);
+    tree.position.set(x, 5, z); // half-height up so it sits on ground
+    scene.add(tree);
+    // quick 'n' dirty trunk
+    let trunkGeo = new THREE.CylinderGeometry(1, 1, 2);
+    let trunkMat = new THREE.MeshBasicMaterial({ color: 0x964B00 }); // brown
+    let trunk = new THREE.Mesh(trunkGeo, trunkMat);
+    trunk.position.set(x, 1, z); 
     scene.add(trunk);
-    scene.add(leaf);
 }
-// put trees along road sides
-for (let z = -40; z > -200; z -= 10) {
-    makeTree(-5, z);
-    makeTree(5, z);
+for (let i = -5; i <= 5; i++) {
+    makeTree(i * 15, -50); // left side trees
+    makeTree(i * 15,  50); // right side trees
 }
 
-// TRAIN (body is box, wheels circles, goes in circle)
-let trainBody = new THREE.Mesh(new THREE.BoxGeometry(4, 2, 2), new THREE.MeshLambertMaterial({ color: 'red' }));
-trainBody.position.y = 1;
-let trainWheel1 = new THREE.Mesh(new THREE.CylinderGeometry(0.5, 0.5, 1), new THREE.MeshLambertMaterial({ color: 'black' }));
-trainWheel1.rotation.z = Math.PI / 2;
-trainWheel1.position.x = -1.5;
-trainWheel1.position.y = 0.5;
-let trainWheel2 = trainWheel1.clone();
-trainWheel2.position.x = 1.5;
-trainBody.add(trainWheel1);
-trainBody.add(trainWheel2);
-scene.add(trainBody);
-trainBody.position.x = 20;
-let trainAngle = 0;
-function animateTrain() {
-    requestAnimationFrame(animateTrain);
-    trainAngle += 0.01;
-    trainBody.position.x = 20 * Math.cos(trainAngle);
-    trainBody.position.z = 20 * Math.sin(trainAngle);
-    trainBody.rotation.y = trainAngle + Math.PI / 2;
+// CAR (just a box with wheels)
+let carBodyGeom = new THREE.BoxGeometry(10, 4, 6);
+let carBodyMat = new THREE.MeshBasicMaterial({ color: 0xff0000 }); // red
+let car = new THREE.Mesh(carBodyGeom, carBodyMat);
+car.position.y = 2; // up off ground
+
+let wheelGeo = new THREE.CylinderGeometry(1.5, 1.5, 1);
+let wheelMat = new THREE.MeshBasicMaterial({ color: 0x333333 });
+function makeWheel(x, z) {
+    let wheel = new THREE.Mesh(wheelGeo, wheelMat);
+    wheel.rotation.x = Math.PI / 2; // roll it
+    wheel.position.set(x, 0.5, z);
+    car.add(wheel);
 }
-animateTrain();
+makeWheel(-4, -2); makeWheel( 4, -2); // front wheels
+makeWheel(-4,  2); makeWheel( 4,  2); // rear wheels
+scene.add(car);
 
-// CAR (box body, sphere wheels, controllable)
-let carBody = new THREE.Mesh(new THREE.BoxGeometry(3, 1.5, 1.8), new THREE.MeshLambertMaterial({ color: 'blue' }));
-let carWheelGeo = new THREE.SphereGeometry(0.4);
-let carWheelFL = new THREE.Mesh(carWheelGeo, new THREE.MeshLambertMaterial({ color: 'black' }));
-carWheelFL.position.set(-1.2, -0.5, 0.8);
-let carWheelFR = carWheelFL.clone();
-carWheelFR.position.x = 1.2;
-let carWheelBL = carWheelFL.clone();
-carWheelBL.position.z = -0.8;
-let carWheelBR = carWheelFR.clone();
-carWheelBR.position.z = -0.8;
-carBody.add(carWheelFL);
-carBody.add(carWheelFR);
-carBody.add(carWheelBL);
-carBody.add(carWheelBR);
-scene.add(carBody);
-carBody.position.set(0, 0.8, 0); // start pos
-let carSpeed = 0;
-let carAngle = 0;
-let keys = { ArrowUp: false, ArrowDown: false, ArrowLeft: false, ArrowRight: false,
-             KeyW: false, KeyS: false, KeyA: false, KeyD: false };
-document.addEventListener('keydown', e => {
-    if (e.code in keys) keys[e.code] = true;
-});
-document.addEventListener('keyup', e => {
-    if (e.code in keys) keys[e.code] = false;
-});
-function updateCar() {
-    if (keys.ArrowUp || keys.KeyW) carSpeed += 0.01;
-    if (keys.ArrowDown || keys.KeyS) carSpeed -= 0.01;
-    if (keys.ArrowLeft || keys.KeyA) carAngle -= 0.05;
-    if (keys.ArrowRight || keys.KeyD) carAngle += 0.05;
-    carSpeed *= 0.98; // friction
-    carBody.position.x += Math.sin(carAngle) * carSpeed;
-    carBody.position.z += Math.cos(carAngle) * carSpeed;
-    carBody.rotation.y = -carAngle;
-    // keep camera behind car
-    camera.position.x = carBody.position.x - Math.sin(carAngle) * 5;
-    camera.position.z = carBody.position.z - Math.cos(carAngle) * 5;
-    camera.position.y = 3;
-    camera.lookAt(carBody.position);
+// TRAIN (just a long box with wheels, moving in circle)
+let trainBodyGeom = new THREE.BoxGeometry(30, 4, 6);
+let trainBodyMat = new THREE.MeshBasicMaterial({ color: 0x0000ff }); // blue
+let train = new THREE.Mesh(trainBodyGeom, trainBodyMat);
+train.position.y = 2; 
+train.position.x = 80; // start off to side
+let trainWheelGeo = new THREE.CylinderGeometry(2, 2, 1.5);
+let trainWheelMat = new THREE.MeshBasicMaterial({ color: 0x333333 });
+function makeTrainWheel(x, z) {
+    let wheel = new THREE.Mesh(trainWheelGeo, trainWheelMat);
+    wheel.rotation.x = Math.PI / 2; 
+    wheel.position.set(x, 0.5, z);
+    train.add(wheel);
 }
+makeTrainWheel(-12, -2.5); makeTrainWheel( 12, -2.5);
+makeTrainWheel(-12,  2.5); makeTrainWheel( 12,  2.5);
+scene.add(train);
 
-// MAIN LOOP
+// ANIMATION / PHYSICS
+let carSpeed = 0.5;
+let trainAngle = 0;
+let clock = new THREE.Clock();
 function animate() {
     requestAnimationFrame(animate);
-    updateCar();
+    
+    // move car forward
+    car.position.z += carSpeed;
+    if (car.position.z > 100) car.position.z = -100; // loop road
+    
+    // move train in circle (easy parametric equation)
+    trainAngle += 0.01;
+    train.position.x = Math.cos(trainAngle) * 80;
+    train.position.z = Math.sin(trainAngle) * 80;
+    train.rotation.y = trainAngle + Math.PI / 2; // face direction of travel
+    
+    // bob clouds gently up/down
+    clouds.forEach(cloud => {
+        cloud.position.y = 30 + Math.sin(clock.getElapsedTime() + cloud.position.x * 0.01) * 2;
+    });
+    
+    // keep camera just behind car
+    camera.position.x = car.position.x;
+    camera.position.z = car.position.z - 15;
+    camera.position.y = 8; // nice view height
+    camera.lookAt(car.position.x, 2, car.position.z); // look at car
+    
     renderer.render(scene, camera);
 }
 animate();
-
-// resize handling
-window.addEventListener('resize', () => {
-    camera.aspect = window.innerWidth / window.innerHeight;
-    camera.updateProjectionMatrix();
-    renderer.setSize(window.innerWidth, window.innerHeight);
-});
 </script>
 </body>
 </html>