😀 let’s build ‘Super Bear Adventure’. jatiiiiiiii sakincha!!! #start

Back

#Trampolines

Creating 3D Characters in Three.js
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Super Bear Adventure</title>
    <style>
        body { margin: 0; overflow: hidden; background: #87ceeb; font-family: 'Segoe UI', sans-serif; }
        #ui {
            position: absolute; top: 20px; left: 20px; color: white;
            background: rgba(0,0,0,0.6); padding: 15px; border-radius: 10px;
            pointer-events: none; border: 2px solid rgba(255,255,255,0.1);
        }
        .key { background: #333; padding: 2px 6px; border-radius: 4px; font-weight: bold; }
    </style>
</head>
<body>

    <div id="ui">
        <b>SUPER BEAR PRO</b><br><br>
        <span class="key">W A S D</span> : Move & Rotate<br>
        <span class="key">SHIFT</span> : Run Faster<br>
        <span class="key">SPACE</span> : Jump<br>
        <br>
        <i>Status: <span id="status">Grounded</span></i>
    </div>

    <script type="importmap">
        { "imports": { "three": "https://unpkg.com/three@0.160.0/build/three.module.js" } }
    </script>

    <script type="module">
        import * as THREE from 'three';

        // --- Constants ---
        const WALK_SPEED = 0.12;
        const RUN_SPEED = 0.22;
        const JUMP_FORCE = 0.26;
        const GRAVITY = 0.012;

        // --- Variables ---
        let scene, camera, renderer, clock;
        let bear, armL, armR, legL, legR;
        let platforms = [];
        let velY = 0;
        let keys = {};

        // States: 'idle', 'moving', 'jumping', 'hanging', 'climbing'
        let state = 'idle';

        init();

        function init() {
            scene = new THREE.Scene();
            scene.background = new THREE.Color(0x87ceeb);
            scene.fog = new THREE.Fog(0x87ceeb, 20, 100);

            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 500);
            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.setPixelRatio(window.devicePixelRatio);
            document.body.appendChild(renderer.domElement);

            const sun = new THREE.DirectionalLight(0xffffff, 1.2);
            sun.position.set(10, 20, 10);
            scene.add(sun, new THREE.AmbientLight(0xffffff, 0.6));

            createBear();
            createLevel();

            window.addEventListener('keydown', e => keys[e.code] = true);
            window.addEventListener('keyup', e => keys[e.code] = false);

            clock = new THREE.Clock();
            loop();
        }

        function createBear() {
            bear = new THREE.Group();
            const brown = new THREE.MeshLambertMaterial({ color: 0x8B4513 });
            const tan = new THREE.MeshLambertMaterial({ color: 0xD2B48C });

            // Body
            const body = new THREE.Mesh(new THREE.BoxGeometry(0.7, 0.9, 0.5), brown);

            // Head & Ears
            const head = new THREE.Mesh(new THREE.BoxGeometry(0.5, 0.5, 0.45), brown);
            head.position.y = 0.7;
            const earGeo = new THREE.BoxGeometry(0.15, 0.15, 0.1);
            const earL = new THREE.Mesh(earGeo, brown); earL.position.set(0.2, 0.3, 0);
            const earR = new THREE.Mesh(earGeo, brown); earR.position.set(-0.2, 0.3, 0);
            head.add(earL, earR);

            // Arms (Pivoted at shoulders)
            const armGeo = new THREE.BoxGeometry(0.2, 0.6, 0.2);
            armL = new THREE.Group(); armL.position.set(0.45, 0.3, 0);
            const amL = new THREE.Mesh(armGeo, brown); amL.position.y = -0.25; armL.add(amL);

            armR = new THREE.Group(); armR.position.set(-0.45, 0.3, 0);
            const amR = new THREE.Mesh(armGeo, brown); amR.position.y = -0.25; armR.add(amR);

            // Legs
            const legGeo = new THREE.BoxGeometry(0.22, 0.5, 0.22);
            legL = new THREE.Mesh(legGeo, brown); legL.position.set(0.2, -0.6, 0);
            legR = new THREE.Mesh(legGeo, brown); legR.position.set(-0.2, -0.6, 0);

            bear.add(body, head, armL, armR, legL, legR);
            scene.add(bear);
            bear.position.y = 2;
        }

        function createLevel() {
            const ground = new THREE.Mesh(new THREE.PlaneGeometry(200, 200), new THREE.MeshLambertMaterial({ color: 0x567d46 }));
            ground.rotation.x = -Math.PI/2;
            scene.add(ground);

            const platMat = new THREE.MeshLambertMaterial({ color: 0x7a5c37 });
            const data = [
                {x: 0, y: 1, z: -5, w: 5, d: 5},
                {x: 6, y: 3, z: -10, w: 4, d: 4},
                {x: 2, y: 5, z: -16, w: 5, d: 3},
                {x: -4, y: 7.5, z: -20, w: 4, d: 4}
            ];

            data.forEach(d => {
                const p = new THREE.Mesh(new THREE.BoxGeometry(d.w, 1.5, d.d), platMat);
                p.position.set(d.x, d.y, d.z);
                scene.add(p);
                platforms.push({ mesh: p, w: d.w/2, d: d.d/2, h: 0.75 });
            });
        }

        function handlePhysics() {
            if (state === 'hanging' || state === 'climbing') return;

            velY -= GRAVITY;
            bear.position.y += velY;

            let grounded = false;
            if (bear.position.y < 0.75) {
                bear.position.y = 0.75;
                velY = 0;
                grounded = true;
            }

            platforms.forEach(p => {
                const b = bear.position;
                const pm = p.mesh.position;
                const dx = b.x - pm.x;
                const dz = b.z - pm.z;
                const distW = p.w + 0.4;
                const distD = p.d + 0.4;

                if (Math.abs(dx) < distW && Math.abs(dz) < distD) {
                    const top = pm.y + p.h + 0.75;
                    const bot = pm.y - p.h - 0.75;

                    if (b.y >= top - 0.5 && velY <= 0) {
                        b.y = top;
                        velY = 0;
                        grounded = true;
                    } else if (b.y < top - 0.2 && b.y > bot) {
                        // Push out of wall
                        const ox = distW - Math.abs(dx);
                        const oz = distD - Math.abs(dz);
                        if (ox < oz) b.x += dx > 0 ? ox : -ox;
                        else b.z += dz > 0 ? oz : -oz;

                        // Ledge Grab check
                        if (velY < 0 && b.y > top - 1.2 && b.y < top - 0.5) {
                            startHang(top);
                        }
                    }
                }
            });

            if (grounded) {
                if (state === 'jumping') state = 'idle';
                if (keys['Space']) {
                    velY = JUMP_FORCE;
                    state = 'jumping';
                }
            } else {
                state = 'jumping';
            }
        }

        function startHang(topY) {
            state = 'hanging';
            velY = 0;
            bear.position.y = topY - 0.9;
            document.getElementById('status').innerText = "Hanging...";

            // Hands on ledge pose
            armL.rotation.x = armR.rotation.x = -2.8;
            legL.rotation.x = legR.rotation.x = 0.3;

            // Wait 1.5 seconds then climb
            setTimeout(() => {
                if (state === 'hanging') startClimb(topY);
            }, 1500);
        }

        function startClimb(targetY) {
            state = 'climbing';
            document.getElementById('status').innerText = "Climbing Up...";

            const startY = bear.position.y;
            const startZ = bear.position.z;
            const startX = bear.position.x;
            const forward = new THREE.Vector3(0, 0, -1.2).applyQuaternion(bear.quaternion);

            let p = 0;
            const interval = setInterval(() => {
                p += 0.02; // Slow climb speed

                // Lift up
                if (p <= 0.7) {
                    bear.position.y = THREE.MathUtils.lerp(startY, targetY + 0.2, p / 0.7);
                }
                // Move forward
                else {
                    const fp = (p - 0.7) / 0.3;
                    bear.position.x = THREE.MathUtils.lerp(startX, startX + forward.x, fp);
                    bear.position.z = THREE.MathUtils.lerp(startZ, startZ + forward.z, fp);
                    bear.position.y = targetY;
                }

                if (p >= 1) {
                    clearInterval(interval);
                    state = 'idle';
                    document.getElementById('status').innerText = "Grounded";
                }
            }, 20);
        }

        function update() {
            if (state === 'hanging' || state === 'climbing') return;

            // Movement logic
            const isRunning = keys['ShiftLeft'] || keys['ShiftRight'];
            const speed = isRunning ? RUN_SPEED : WALK_SPEED;

            if (keys['ArrowLeft'] || keys['KeyA']) bear.rotation.y += 0.06;
            if (keys['ArrowRight'] || keys['KeyD']) bear.rotation.y -= 0.06;

            const dir = new THREE.Vector3(0, 0, -1).applyQuaternion(bear.quaternion);
            let moved = false;

            if (keys['ArrowUp'] || keys['KeyW']) {
                bear.position.add(dir.multiplyScalar(speed));
                moved = true;
            }
            if (keys['ArrowDown'] || keys['KeyS']) {
                bear.position.add(dir.multiplyScalar(-speed * 0.5));
                moved = true;
            }

            if (state !== 'jumping') {
                state = moved ? 'moving' : 'idle';
                document.getElementById('status').innerText = isRunning && moved ? "Running" : (moved ? "Walking" : "Idle");
            }

            handlePhysics();

            // Animations
            const t = Date.now() * (isRunning ? 0.015 : 0.01);
            if (state === 'moving') {
                const swing = isRunning ? 1.2 : 0.7;
                armL.rotation.x = Math.sin(t) * swing;
                armR.rotation.x = -Math.sin(t) * swing;
                legL.rotation.x = -Math.sin(t) * swing;
                legR.rotation.x = Math.sin(t) * swing;
            } else if (state === 'jumping') {
                armL.rotation.x = THREE.MathUtils.lerp(armL.rotation.x, -2.5, 0.1);
                armR.rotation.x = THREE.MathUtils.lerp(armR.rotation.x, -2.5, 0.1);
                legL.rotation.x = 0.4; legR.rotation.x = -0.4;
            } else {
                armL.rotation.x = THREE.MathUtils.lerp(armL.rotation.x, 0, 0.1);
                armR.rotation.x = THREE.MathUtils.lerp(armR.rotation.x, 0, 0.1);
                legL.rotation.x = legR.rotation.x = 0;
            }

            // Camera follow
            const camOffset = new THREE.Vector3(0, 4, 8).applyQuaternion(bear.quaternion);
            const targetCam = bear.position.clone().add(camOffset);
            camera.position.lerp(targetCam, 0.1);
            camera.lookAt(bear.position.x, bear.position.y + 1, bear.position.z);
        }

        function loop() {
            update();
            renderer.render(scene, camera);
            requestAnimationFrame(loop);
        }

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

    </script>
</body>
</html>