To integrate Three.js and display GLTF 3D models in OutSystems ODC, you need to import the Three.js library, load the GLTF file dynamically, and display the model using a block or screen. Below are the step-by-step instructions:

Step 1: Add the Three.js Library

1. Download Three.js: Obtain the Three.js library files from its official site (https://threejs.org) or through a CDN link.
2. Include the Library:
   • Go to Data → Resources in Service Studio.
   • Upload your Three.js .js file as a resource.
   • Set the resource's Deploy to Target Directory property to wwwroot/scripts/.
   • Mark it as Required in the JavaScript dependencies for the screen or block you will use.

Step 2: Create a Block for Viewing the 3D Model

• Create a Block: This will encapsulate the 3D viewer functionality for reuse.

1. Add a Container:
   • Place a container that serves as the canvas for the 3D rendering.
   • Set a unique ID for the container (3DCanvasContainer for example).
2. Add JavaScript Logic:
   • Use the RunJavaScript action in the Block's OnReady event to initialize Three.js.

Below is a sample script for handling Three.js within your Block:

// Initialize Three.js Scene
const container = document.getElementById($parameters.WidgetId);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, container.offsetWidth / container.offsetHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(container.offsetWidth, container.offsetHeight);
container.appendChild(renderer.domElement);

// Load GLTF Model
const loader = new THREE.GLTFLoader();
loader.load(
  'path-to-your-gltf-model/model.gltf',  // Replace with your model URL
  function (gltf) {
    scene.add(gltf.scene);
  },
  function (xhr) {
    console.log((xhr.loaded / xhr.total * 100) + '% loaded');
  },
  function (error) {
    console.error('An error happened while loading the model.', error);
  }
);

// Add Lights
const light = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light);

// Set Camera Position
camera.position.z = 5;

// Animation Loop
const animate = function () {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
};
animate();

Step 3: Add Input Parameters

In the block, define input parameters such as:

• WidgetId (to target the container dynamically).
• ModelURL (if you allow loading different GLTF models dynamically).

Use ${parameters.ModelURL} to dynamically set the model's path within the script.

Step 4: Use the Block in a Screen

1. Drag the Block to a Screen:
   • Pass the Id of a container on the screen to the WidgetId parameter.
   • Provide the path to your GLTF file in the ModelURL parameter.
2. Output for Debugging:
   • Log animations or loading status to the console for better debugging during development.

Step 5: Test the Application

Preview the application to ensure the 3D model loads correctly and the canvas is appropriately rendered within the screen dimensions.

For additional usage of JavaScript dependencies and integration details, you can explore OutSystems Front-End Deepdive: Tips and Tricks.

This implementation ensures modularity and reusability of your 3D viewer component across multiple screens in OutSystems ODC. Let me know if you need further clarification or enhancements!