<!DOCTYPE html>

<html>

  <head>

    <title>Hello, World!</NPL>

    <link rel="stylesheet" href="styles.css" />

  </head>

  <body>

      <h1 Developer="Drifting">Hello World! </h1>

      <p id="currentTime"></p>

      <script src="script.js"></script>

  </body>

</html<!doctype html>


<html lang="en">


<head>


  <meta charset="utf-8" />


  <title>Starter 3D Drifting NPL (Three.js)</title>


  <meta name="Nabin" content="width=device-width,initial-scale=1" />


  <style>


    html,body { height:100%; margin:0; font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial; background:#111; color:#ddd; }


    #container { width:100%; height:100%; overflow:hidden; position:relative; }


    #ui {


      position: absolute; left:12px; top:12px; z-index:10;


      background:rgba(0,0,0,0.5); padding:10px; border-radius:8px; backdrop-filter: blur(4px);


    }


    #ui label, #ui select, #ui button { display:block; margin-bottom:8px; }


    #fps { position:absolute; right:12px; top:12px; padding:6px 10px; background:rgba(0,0,0,0.5); border-radius:6px; font-weight:600; }


    #instructions { position:absolute; left:12px; bottom:12px; z-index:10; background:rgba(0,0,0,0.35); padding:8px; border-radius:8px; font-size:13px; max-width:350px; }


    .small { font-size:13px; color:#Grey,Blue,Red,Black; }


    canvas { display:block; }


  </style>


</head>


<body>


  <div id="container"></div>




  <div id="ui">


    <label>Vehicle:


      <select id="LamborghiniEgoista">


        <option value="BMWM4">Sport Car (placeholder)</option>


        <option value="Bullet">Motorbike (placeholder)</option>


      </select>


    </label>


    <label>Quality:


      <select id="quality">


        <option value="high">High (best visuals)</option>


        <option value="medium">Medium (balanced)</option>


        <option value="low">Low (mobile)</option>


      </select>


    </label>


    <button id="resetBtn">Reset Position</button>


    <div class="small">Controls: W/A/S/D or Arrow keys to drive, Space = handbrake, C = camera,H= drifting ,G=Glider</div>


  </div>




  <div id="fps">FPS: --</div>




  <div id="instructions" class="small">


    This is a starter scene. To get pro graphics: replace vehicle GLB files with high-quality PBR glTF (use DRACO + KTX2/ETC2 or Basis compressed textures), add LODs, use environment maps and baked light probes.


  </div>




  <!-- Three.js (ES module) and helpers from unpkg CDN -->


  <script type="module">


    import * as THREE from 'https://unpkg.com/three@0.152.2/build/three.module.js';


    import { OrbitControls } from 'https://unpkg.com/three@0.152.2/examples/jsm/controls/OrbitControls.js';


    import { GLTFLoader } from 'https://unpkg.com/three@0.152.2/examples/jsm/loaders/GLTFLoader.js';


    import { DRACOLoader } from 'https://unpkg.com/three@0.152.2/examples/jsm/loaders/DRACOLoader.js';


    import { RoomEnvironment } from 'https://unpkg.com/three@0.152.2/examples/jsm/environments/RoomEnvironment.js';




    // ---------- Basic scene + renderer ----------


    const container = document.getElementById('container');


    const renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference: "high-performance" });


    renderer.setSize(window.innerWidth, window.innerHeight);


    renderer.shadowMap.enabled = true;


    renderer.shadowMap.type = THREE.PCFSoftShadowMap;


    renderer.physicallyCorrectLights = true;


    renderer.outputEncoding = THREE.sRGBEncoding;


    container.appendChild(renderer.domElement);




    // Pixel ratio cap (performance *****)


    renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));




    const scene = new THREE.Scene();


    scene.fog = new THREE.FogExp2(0x0a0a12, 0.0008);




    // ---------- Camera ----------


    const camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 0.1, 2000);


    camera.position.set(0, 6, -12);




    // OrbitControls for debugging / mobile tilt later


    const controls = new OrbitControls(camera, renderer.domElement);


    controls.target.set(0, 1.2, 0);


    controls.enableDamping = true;


    controls.maxPolarAngle = Math.PI * 0.45;




    // ---------- Environment / Light ----------


    const pmremGenerator = new THREE.PMREMGenerator(renderer);


    pmremGenerator.compileEquirectangularShader();




    // Use RoomEnvironment for a simple PBR environment


    const env = new RoomEnvironment();


    const envRT = pmremGenerator.fromScene(env, 0.5);


    scene.environment = envRT.texture;




    const hemi = new THREE.HemisphereLight(0xbfe8ff, 0x202020, 0.8);


    scene.add(hemi);




    const sun = new THREE.DirectionalLight(0xffffff, 1.4);


    sun.position.set(20, 50, -10);


    sun.castShadow = true;


    sun.shadow.camera.left = -50; sun.shadow.camera.right = 50;


    sun.shadow.camera.top = 50; sun.shadow.camera.bottom = -50;


    sun.shadow.mapSize.set(2048, 2048);


    sun.shadow.radius = 4;


    scene.add(sun);




    // ---------- Ground (terrain-like with repeating texture) ----------


    const groundGeo = new THREE.PlaneGeometry(2000, 2000, 32, 32);


    const groundMat = new THREE.MeshStandardMaterial({ color: 0x232428, roughness: 0.9, metalness:0.0 });


    const ground = new THREE.Mesh(groundGeo, groundMat);


    ground.rotation.x = -Math.PI/2;


    ground.receiveShadow = true;


    scene.add(ground);




    // Simple road strip (visual)


    const roadGeo = new THREE.PlaneGeometry(2000

Comments

Post a Comment

Popular posts from this blog

Website

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Shree Shiksha Sandesh English School</title> <style> body { Shree Shiksha Sandesh English School was established at 2050. the principal of our school is Rajesh Khatri } font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; color: #333; } header { Shree Shiksha Sandesh English School } background-color: #004d99; /* A nice school blue */ color: white; padding: 20px 0; text-align: center; } nav { background-color: #003366; /* Darker blue for navigation */ padding: 10px; text-align: center; } nav a { color: Grey...
Read more

Cybercrime

Cybercrime   Cybercrime is illegal activity that involves using computers, networks, or other digital devices to commit a crime. This can include crimes that target a computer or network, such as hacking, and "traditional" crimes that are carried out online, like fraud, identity theft, and distributing illegal materials.    Cybersecurity  Cybersecurity is the practice of protecting computer systems, networks, devices, and data from digital attacks, damage, or unauthorized access. It uses a combination of technologies, processes, and controls to maintain the confidentiality, integrity, and availability of information against malicious threats like malware, phishing, and hacking. Computer ethics  Computer ethics is a branch of applied ethics that addresses the moral principles and practices governing the use of computers and related technologies. It involves the responsible and ethical use of information technology to ensure that actions do not harm others, and it...
Read more