light load optimization

by Johan Vandeplas

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="importmap">
      {
    "imports": {
      "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
      "three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/"
    }
  }
</script>
  </head>

  <body>
  </body>

</html>

CSS

body {
  height: 100vh;
  margin: 0;
}

JavaScript

import * as THREE from 'three';
import {
  OrbitControls
} from 'three/addons/controls/OrbitControls.js';
import {
  GLTFLoader
} from 'three/addons/loaders/GLTFLoader.js';

const truckModelPath = 'https://supplystack-devteam.s3.eu-west-1.amazonaws.com/POC-TCT-LightLoadOptimization-3dmodels/truck.glb';
const truckBedPath =  'https://supplystack-devteam.s3.eu-west-1.amazonaws.com/POC-TCT-LightLoadOptimization-3dmodels/truck-bed.glb'
const truckOnlyPath =  'https://supplystack-devteam.s3.eu-west-1.amazonaws.com/POC-TCT-LightLoadOptimization-3dmodels/truck-only.glb'



// Create a scene
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff); // white color

// Create a camera
const camera = new THREE.PerspectiveCamera(
  50,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.set(7, 5, 10);
camera.lookAt(scene.position); // Ensure the camera looks at the center of the scene

// Create a renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Define the dimensions of the truck trailer
const containerDimensions = {
  length:10.19,
  width: 2.44,
  height: 2.59
};

// Define the number of boxes and their dimensions
const numBoxes = 10;
const boxDimensions = {
  length: 0.5,
  width: 0.75,
  height: 0.5
};

const truckMaterial = new THREE.MeshStandardMaterial({
  color: 0x808080,
  wireframe: false,
  transparent: true,
  side: THREE.DoubleSide, // Render both sides of the faces
  opacity: 0.5,
});


const helpers = {
  loadModel(scene, position, scaleFactor, truckModelPath) {
    const loader = new GLTFLoader();

    loader.load(truckModelPath, function(gltf) {
      const truckModel = gltf.scene;

      // Position the truck model around your container
      truckModel.position.set(position.x, position.y, position.z);

      // Scale the truck model down by the scaleFactor
      truckModel.scale.set(scaleFactor,...