TypeError：无法使用 ThreeJs 读取未定义的属性（读取“位置”）
我正在尝试将 3D 模型集成到我网站的英雄部分的背景中。它有效，只是当我手动更改窗口大小时，3D 模型不适应新大小。可能与第一个问题相关的另一个问题是我在控制台中收到此错误消息，它引用了“two.js”文件中代码的第 69 行： 在控制台中我收到此错误消息：
我的首要任务是解决3D模型不适应屏幕尺寸的问题。至于错误消息，如果它仍然有效就不太重要了。但理想情况下，两个人就能解决这两个问题。
你有什么想法吗？
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>
