TypeError : Impossible de lire la propriété non définie (lire « position ») à l'aide de ThreeJs

Question

J'essaie d'intégrer un modèle 3D en arrière-plan de la section héros de mon site internet. Ça marche, c'est juste que lorsque je change manuellement la taille de la fenêtre, le modèle 3D ne s'adapte pas à la nouvelle taille. Un autre problème qui peut être lié au premier est que je reçois ce message d'erreur dans la console, qui fait référence à la ligne 69 du code dans le fichier "two.js": Dans la console, j'obtiens ce message d'erreur :

Ma première priorité est de résoudre le problème des modèles 3D qui ne s'adaptent pas à la taille de l'écran. Quant au message d'erreur, peu importe s'il fonctionne toujours. Mais idéalement, deux personnes peuvent résoudre les deux problèmes.

Avez-vous des idées ?

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

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

const heroSection = document.querySelector("#hero-section");
heroSection.appendChild(renderer.domElement);

// Importation du model 3D
const loader = new GLTFLoader();
let model;
loader.load(
  "./scene.gltf",
  function (gltf) {
    model = gltf.scene;

    scene.add(gltf.scene);
  },
  undefined,
  function (error) {
    console.error(error);
  }
);

//Control des mouvements
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableZoom = false;

const ambientLight = new THREE.AmbientLight(0xffffff);
const light = new THREE.AmbientLight(0x404040);
scene.add(ambientLight, light);

// position de la camera
camera.position.set(0, 1, 5);
// camera.position.set(0, 4, 8);
controls.update();

function animate() {
  requestAnimationFrame(animate);

  model.position.y = -2;
  controls.update();
  renderer.render(scene, camera);
}

animate();

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth; /* permet un scroll automatique souple video : 1h 07mn 50 */
  scroll-padding-top: 100px; /* On lui dit : arrête le scroll auto à 100px pour tenir compte de la hauteur de la navbar. 
  ("PROJECTES" appaît en haut et sous la navbar quand on click sur le lein "Projects" de la navbar.) */
}

body {
  background-color: #000;
  font-family: "roboto", sans-serif;
  overflow-x: hidden;
}

nav {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100px;
  padding: 20px 10vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 9;
  transition: 0.4s; /* pour le background noire - vidéo : 1h 09 */
}

nav.bg {
  /* Voir vidéo : 1h 09 */
  background-color: #000;
}

.logo {
  height: 50px;
}

.links-container {
  display: flex;
  list-style: none;
  gap: 10px;
}

.links {
  color: #fff;
  text-decoration: none;
  text-transform: capitalize;
  padding: 10px 20px;
  transition: 0.5s;
}

.links:hover {
  opacity: 0.5;
}

/* hero-section */
#hero-section {
  position: relative;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

#hero-section canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-headline {
  font-family: "sahitya", serif;
  font-size: 4.5rem;
  text-align: center;
}

.hero-secondary-line {
  text-align: center;
  margin: 25px 0 50px;
  font-size: 1.2rem;
}

.btn {
  padding: 15px 30px;
  width: fit-content; /*(pas utile pur moi : explication : https://css-tricks.com/almanac/properties/w/width/#:~:text=the%20fit-content%20value*/
  background-color: #000;
  color: #fff;
  text-decoration: none;
  text-transform: capitalize;
  display: block; /*pour faire fonctionner 'margin:auto' */
  margin: auto;
}

.btn.light {
  background-color: #fff;
  color: #000;
}

.btn.transparent {
  background: transparent;
  border: 2px solid;
}

<!DOCTYPE html>
<html lang="en" theme="light">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Three JS Personal Portfolio</title>

    <!-- google font CDN -->

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700;800;900&family=Roboto+Slab:wght@100;300;500;600;700;800;900&family=Roboto:wght@400;700&family=Sahitya&display=swap" rel="stylesheet" />

    <!-- font awesome CDN -->

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <!-- local CSS file(s) -->

    <link rel="stylesheet" href="style.css" />

    <!-- Tree Js -->
    <script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>

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

  <body>
    <header>
      <nav>
        <img src="img\Logo.png" alt="" class="logo" />
        <ul class="links-container">
          <li class="link-item"><a href="#hero-section" class="links">Home</a></li>
          <li class="link-item"><a href="#Projects-section" class="links">Projects</a></li>
          <li class="link-item"><a href="#" class="links">About</a></li>
          <li class="link-item"><a href="#" class="links">Contact</a></li>
        </ul>
      </nav>
      <!-- hero section -->
      <main id="hero-section">
        <div class="hero-content">
          <h1 class="hero-headline">Take your business onligne</h1>
          <p class="hero-secondary-line">The only person you need to help you with your business</p>

          <a href="#" class="btn">Let's chat</a>
        </div>
        <!-- Position du canvas dans le navigateur -->
      </main>
    </header>
   </body>

Answer 1

La raison pour laquelle il n'est pas redimensionné est à cause d'un bug. Il essaie de mettre à jour la position de votre modèle, mais à ce stade, le modèle n'est pas encore défini, il génère donc une erreur et ne va pas plus loin.

Je pense que vous finissez par appeler la fonction animate() avant que le chargement du fichier asynchrone ne soit terminé. Étant donné que le reste du code s'exécute lors du chargement de l'objet, il arrive à la dernière ligne, exécute la fonction d'animation et échoue car le modèle n'est pas défini à ce stade. Si vous souhaitez que cela se produise après le chargement du modèle, vous devez le déplacer dans la fonction de réussite.