Indian Truck Sim

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

4 August 2025

Simulation physique 3D de type ragdoll avec Three.js et Cannon.js

HTML

<!DOCTYPE html>

<html lang="en-us" style="height:100%; overflow:hidden">
<head>
  <base href="https://cdn.jsdelivr.net/gh/bubbls/UGS-Assets@79091a3feb921044b3597bd32cea7357b43e2d9c/indian-truck-simulator-3d-gh-pages/">
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Unity WebGL Player | BlightBorne</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

body {
      overflow: hidden;
    }

#gameContainer canvas {
      display:block;
    }

div#webgl-content {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }

div#loadingBox {
      width: 100%;
      height: 0px;
      position: absolute;
      top: 50%;
      margin-top: 137px;
      text-align: center;
    }

div#icon {
      width: 300px;
      height: 310px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -185px;
      margin-left: -150px;
      background-image: url("Template/Blight-Borne.jpg");
      background-repeat: no-repeat;
      box-shadow: 1px 1px 5px #141414;
    }

div#box {
      width: 328px;
      height: 367px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -199px;
      margin-left: -164px;
      background: #222;
      box-shadow: 1px 1px 5px #000;
    }

div#bgBar {
      display: none;
      position: absolute;
      width: 300px;
      margin-left: -150px;
      left: 50%;
      height: 18px;
      background-color: #882121;
      box-shadow: 1px 1px 5px #111;
    }

div#progressBar {
      display: none;
      left: 50%;
      position: absolute;
      margin-left: -150px;
      width: 0px;
      height: 18px;
      background-color: #dc4241;
    }

p#loadingInfo {
      color: #fff;
      letter-spacing: 1px;
      position: absolute;
      width: 100%;
      font-family: sans-serif;
      text-align: center;
      top: 50%;
      font-size: 11px;
      font-weight: 500;
      margin-top: 140px;
      text-shadow: 0px 0px 5px #000;
    }

div#spinner {
      position: absolute;
      height: 18px;
      left: 50%;
      margin-left: -150px;
      width: 300px;
      position: relative;
      overflow: hidden;
      background-color: #882121;
      box-shadow: 1px 1px 5px #111;
    }

div#spinner:before {
      display: block;
      position: absolute;
      content: "";
      width: 150%;
      margin-left: -10px;
      height: 10px;
      background-color: #e85352;
      transform: rotate(-5deg);
      animation: loading 1s linear infinite;
    }

@keyframes loading {
      from {
        top: -185%
      }
      to {
        top: 225%
      }
    }
  </style>
 
  <script src="Build/UnityLoader.js"></script>
  <script>
    window.mergedBlobUrls = {};

function getParts(file, start, end) {
      let arr = [];
      for (let i = start; i <= end; i++) {
        arr.push(file + ".part" + i);
      }
      return arr;
    }

function resizeUnityContainer() {
      var container = document.getElementById("gameContainer");
      if (container) {
        container.style.width = window.innerWidth + "px";
        container.style.height = window.innerHeight + "px";
      }
    }

window.addEventListener('resize', resizeUnityContainer);

function UnityProgress(gameInstance, progress) {
      var container = document.getElementById("gameContainer");
      if (container) document.body.style.background = container.style.background;

if (!gameInstance.Module) {
         return;
      } else if (progress === "complete") {
        document.getElementById("loadingBox").style.display = "none";
        document.getElementById("icon").style.display = "none";
        document.getElementById("loadingInfo").style.display = "none";
        document.getElementById("box").style.display = "none";
      } else if (progress === 1 || progress === "preinit") {
        document.getElementById("loadingInfo").innerHTML = "PROCESSING...";
        document.getElementById("spinner").style.display = "inherit";
        document.getElementById("bgBar").style.display = "none";
        document.getElementById("progressBar").style.display = "none";
      } else if (progress > 0) {
        document.getElementById("progressBar").style.width = 300 * progress + "px"
        document.getElementById("loadingInfo").innerHTML = Math.round(progress * 100) + "%";
        document.getElementById("spinner").style.display = "none";
        document.getElementById("bgBar").style.display = "block";
        document.getElementById("progressBar").style.display = "inherit";
      }
    }

window.addEventListener("load", function () {
      fetch("Build/indian_truck_gd_2_0_1.json")
        .then(r => r.json())
        .then(config => {
          return Promise.all([
            mergeFiles(getParts("Build/indian_truck_gd_2_0_1.data.unityweb", 1, 2)),
            mergeFiles(getParts("Build/indian_truck_gd_2_0_1.wasm.code.unityweb", 1, 1)),
            mergeFiles(getParts("Build/indian_truck_gd_2_0_1.wasm.framework.unityweb", 1, 1))
          ]).then(([dataUrl, wasmCodeUrl, wasmFrameworkUrl]) => {
            window.mergedBlobUrls["indian_truck_gd_2_0_1.data.unityweb"] = dataUrl;
            window.mergedBlobUrls["indian_truck_gd_2_0_1.wasm.code.unityweb"] = wasmCodeUrl;
            window.mergedBlobUrls["indian_truck_gd_2_0_1.wasm.framework.unityweb"] = wasmFrameworkUrl;

config.dataUrl = "Build/indian_truck_gd_2_0_1.data.unityweb";
            config.wasmCodeUrl = "Build/indian_truck_gd_2_0_1.wasm.code.unityweb";
            config.wasmFrameworkUrl = "Build/indian_truck_gd_2_0_1.wasm.framework.unityweb";

let blob = new Blob([JSON.stringify(config)], { type: "application/json" });
            let blobUrl = URL.createObjectURL(blob);

Indian Truck Sim

Recommandé

Changement de réalité simulée

Calculatrice simple

Simulation physique 3D de type ragdoll avec Three.js et Cannon.js

HTML

CSS

JS

Recommandé

Changement de réalité simulée

Calculatrice simple

Simulation physique 3D de type ragdoll avec Three.js et Cannon.js

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS