Ich versuche, ein 3D-Modell in den Hintergrund des Heldenbereichs meiner Website zu integrieren. Es funktioniert, nur dass sich das 3D-Modell nicht an die neue Größe anpasst, wenn ich die Fenstergröße manuell ändere. Ein weiteres Problem, das möglicherweise mit dem ersten zusammenhängt, besteht darin, dass ich in der Konsole diese Fehlermeldung erhalte, die sich auf Zeile 69 des Codes in der Datei „two.js“ bezieht: In der Konsole erhalte ich diese Fehlermeldung:
Meine erste Priorität besteht darin, das Problem zu lösen, dass sich 3D-Modelle nicht an die Bildschirmgröße anpassen. Was die Fehlermeldung angeht, ist es eigentlich egal, ob es noch funktioniert. Aber im Idealfall können zwei Personen beide Probleme lösen.
Haben Sie Ideen?
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 函数中。