我正在尝试将 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>
它没有调整大小的原因是因为错误。它正在尝试更新您的模型位置，但此时模型尚未定义，因此它会出错并且不会进一步移动。
我认为您在异步文件加载完成之前最后调用了
animate()函数。因为其余代码在对象加载时运行，所以它到达最后一行，运行 animate 函数，并失败，因为此时模型未定义。如果您希望在模型加载后发生这种情况，则需要将其移至 success 函数中。