Add new file

ALGUL/index.js

+    import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.150.1/build/three.module.js';
+    import { GLTFLoader } from 'https://cdn.jsdelivr.net/npm/three@0.150.1/examples/jsm/loaders/GLTFLoader.js';
+    import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.150.1/examples/jsm/controls/OrbitControls.js';
+
+    const scene = new THREE.Scene();
+    const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
+    const renderer = new THREE.WebGLRenderer({ antialias: true });
+
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    document.body.appendChild(renderer.domElement);
+
+    const controls = new OrbitControls(camera, renderer.domElement);
+    controls.enableDamping = true;
+    controls.dampingFactor = 0.05;
+    controls.screenSpacePanning = false;
+    controls.maxDistance = 1000;
+    controls.minDistance = 50;
+    controls.target.set(0, 0, 0);
+
+    const light = new THREE.DirectionalLight(0xffffff, 1);
+    light.position.set(10, 10, 10);
+    scene.add(light);
+
+    const ambientLight = new THREE.AmbientLight(0x404040, 1);
+    scene.add(ambientLight);
+
+    camera.position.set(200, 150, 300);
+
+    const loader = new GLTFLoader();
+    loader.load('modeles/old_bridge.glb', function (gltf) {
+        const bridge = gltf.scene;
+        scene.add(bridge);
+
+        bridge.position.set(0, 100, 0);
+        bridge.scale.set(0.5, 0.5, 0.5);
+        bridge.rotation.y = Math.PI / 2;
+
+        controls.target.copy(bridge.position);
+        controls.update();
+
+        renderer.render(scene, camera);
+    }, undefined, function (error) {
+        console.error("Erreur de chargement du pont :", error);
+    });
+
+    loader.load('modeles/bateau.glb', function (gltf) {
+        const boat1 = gltf.scene.clone();
+        const boat2 = gltf.scene.clone();
+
+        boat1.position.set(-300, 1, - 500);
+        boat1.scale.set(0.3, 0.3, 0.3);
+
+        boat2.position.set(-200, 1, -600);
+        boat2.scale.set(0.3, 0.3, 0.3);
+        boat2.rotation.y = Math.PI / 4; 
+
+        scene.add(boat1);
+        scene.add(boat2);
+
+        renderer.render(scene, camera);
+    }, undefined, function (error) {
+        console.error("Erreur de chargement des bateaux :", error);
+    });
+
+    const sunGeometry = new THREE.SphereGeometry(20, 32, 32);
+    const sunMaterial = new THREE.MeshBasicMaterial({ color: 0xffcc00 });
+    const sun = new THREE.Mesh(sunGeometry, sunMaterial);
+    sun.position.set(50, 300, -200); 
+    scene.add(sun);
+
+    const sunLight = new THREE.DirectionalLight(0xffddaa, 2);
+    sun.add(sunLight);
+    scene.add(sunLight);
+
+    const textureLoader = new THREE.TextureLoader();
+    const groundTexture = textureLoader.load('textures/water.jpg');
+    groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping;
+    groundTexture.repeat.set(10, 10);
+    groundTexture.offset.set(0, 0); 
+
+    const groundMaterial = new THREE.MeshLambertMaterial({ map: groundTexture });
+
+    const solidGround = new THREE.Mesh(
+        new THREE.PlaneGeometry(10000, 10000, 100, 100),
+        groundMaterial
+    );
+    solidGround.rotation.x = -Math.PI / 2;
+    solidGround.position.y = -2; 
+    scene.add(solidGround);
+
+    function animate() {
+        requestAnimationFrame(animate);
+        controls.update();
+        renderer.render(scene, camera);
+    }
+
+    animate();
+
+    window.addEventListener('resize', () => {
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        camera.aspect = window.innerWidth / window.innerHeight;
+        camera.updateProjectionMatrix();
+    });