Three.js - 几何图形在屏幕上显示不佳

问：

我想在我的网站中放置一个 Three.js 几何图形，但画布没有把它放在正确的位置。 我的目标是在屏幕右侧的“介绍”部分显示几何图形，但CSS有问题。也许 CSS 文件中的位置不正确。 你可以去看看 Github 上的 repo： https://github.com/bengabo/website-2023 和我的网站在线： https://www.bengabo.com/

    <!-- Intro section   -->
    <section id="section-one" class="intro-section">
        <div class="intro-warp">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-xl-6 col-lg-9 p-0">
                        <div class="intro-text">
                            <h2>Je suis Benjamin, 
                            <br />Motion designer 2D/3D
                            <br />et Creative Developer</h2>
                            <p>Je travaille pour des clients français et internationaux, aussi bien dans la communication,
                            <br />le social media, la publicité, le cinéma, l'évènementiel...
                            <br />Mes compétences acquises au fil de mes expériences me permettent de répondre à une grande variété de projets 
                            <br />et de créer des animations, du storyboard jusqu’à la conception graphique.</p>
                            <a href="mailto:[email protected]?subject=J'aime beaucoup ce que vous faites :)" title="[email protected]" class="sp-link">
                                <i class="fa fa-envelope"  id="section-two"></i>   Contactez-moi pour un futur projet</i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div id='threejs-container'></div>
        </div>
    </section>

    <!-- Intro section end  -->
<canvas  class="webgl" id="bg"></canvas>

.intro-section {
  padding: 160px 40px 100px 80px;
}

.intro-warp {
  max-width: 1800px;
  width: 100%;
  margin: 0 auto;
}

.intro-text h2 {
  font-size: 48px;
  margin-bottom: 25px;
}

.intro-text p {
  margin-bottom: 45px;
}

.sp-link {
  display: inline-block;
  font-weight: 500;
  font-size: 16px;
  color: #212121;
  border-bottom: 3px solid #212121;
  padding-right: 15px;
}

.sp-link:hover {
  color: #ffe72d;
}

#threejs-container {
  position: absolute;
  width: auto;
  height: 500px;
  display: flex;
  align-items: flex-end;
  z-index: -1;
  /* justify-content: right; */
  /* margin-right: 5px; */
}

/**
 * Scene
 */
const container = document.getElementById("threejs-container");

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(
  30,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.z = 6;

// Sphere
let sphere = new THREE.Mesh(
  new THREE.IcosahedronGeometry(1.1, 4),
  new THREE.MeshBasicMaterial({
    color: 0xffe72d,
    wireframe: true,
  })
);
sphere.position.x = 0.45;
sphere.position.y = 0.45;
scene.add(sphere);

/**
 * Renderer
 */
let renderer = new THREE.WebGLRenderer({
  antialias: true,
  alpha: true,
});
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);

window.addEventListener("resize", function () {
  let width = document.getElementById("threejs-container").clientWidth;
  let height = document.getElementById("threejs-container").clientHeight;
  renderer.setSize(width, height);
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
});
console.log(
  "Container height: " +
    document.getElementById("threejs-container").clientHeight
);

function tick() {
  requestAnimationFrame(tick);
  sphere.rotation.x += 0.001;
  sphere.rotation.y += 0.001;
  renderer.render(scene, camera);
}

tick();