TypeError : Impossible de lire la propriété non définie (lire « position ») à l'aide de ThreeJs
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>
