script not working - console shows no errors but still black and no 3d model

Questions
1

Hi,
I am new to this forum and to three.js.
try to bring three.js to work. Uploaded the used model to a gltf viewer and the uploaded folder with the gltf the .bin and the .png worked like a charm.
so it is my code.
Any observations?
Thanks
Tristan

<!DOCTYPE html>
<html>
<head>
    <title>Aluminum Material Example</title>
    <style>
        body { margin: 0; overflow: hidden; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r117/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.131.2/examples/js/loaders/GLTFLoader.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/mrdoob/three.js@r117/examples/js/controls/OrbitControls.js"></script>

    <script>
    // Set up the scene, camera, and renderer
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // Load the GLTF model
    var loader = new THREE.GLTFLoader();
    var textureLoader = new THREE.TextureLoader();

    var modelPath = 'models/RB250-CL2.gltf';
    var basePath = modelPath.substring(0, modelPath.lastIndexOf('/') + 1);

    loader.load(modelPath, function (gltf) {
        gltf.scene.traverse(function (child) {
            if (child.isMesh) {
                // Set up the material
                var material = new THREE.MeshStandardMaterial({
                    color: 0xCCCCCC,
                    metalness: 1,
                    roughness: 0.4
                });

                // Set up the texture
                var texturePath = basePath + 'RB250-CL2_images/composited_baseColor_opacity.png';
                var texture = textureLoader.load(texturePath);
                material.map = texture;

                child.material = material;
            }
        });

        scene.add(gltf.scene);
    });

    // Set up the camera position
    camera.position.z = 5;

    // Set up the controls
    var controls = new THREE.OrbitControls(camera, renderer.domElement);

    // Render the scene
    function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
        controls.update(); // Update the controls
    }
    animate();

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

From the

See e.g.
https://hofk.de/main/discourse.threejs/2020/LoadGLTF/LoadGLTF.html

3

Just as a quick observation, you should not be mixing versions of three.js.

Here is an example of a setup that you might find useful:

<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/three@0.117/build/three.module.js", 
			"three/addons/": "https://unpkg.com/three@0.117/examples/jsm/"
		}
	}
</script>

<script type="module">
import * as THREE from "three";
import {OrbitControls} from "three/addons/controls/OrbitControls.js";
import {GLTFLoader} from "three/addons/loaders/GLTFLoader.js";

This works with modules, which are now the recommended format, should not require any major changes to your code and can be more effectively debugged on your browser.

p.s. I think you also need to add lights to your program (“lights, camera, action!”).