Three.js几何体页面显示位置异常求助：CSS定位问题排查

问题核心原因 #

1. 原布局未利用Bootstrap栅格系统实现文本与Three.js容器的并排，而是用absolute定位却未设置正确的参考父容器与位置属性
2. Three.js渲染器初始尺寸绑定了窗口大小，而非容器本身，导致画布超出目标区域
3. 父容器intro-warp未设置position: relative，使absolute定位的容器相对于整个文档而非Intro区域

具体修改方案 #

1. HTML结构调整（利用Bootstrap栅格实现并排） #

将Three.js容器放到文本所在的row中，作为同级的栅格列，实现左右分栏：

<!-- Intro section   -->
<section id="section-one" class="intro-section">
    <div class="intro-warp">
        <div class="container-fluid">
            <div class="row">
                <!-- 文本区域占6列 -->
                <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:ben@bengabo.com?subject=J'aime beaucoup ce que vous faites :)" target="_blank" title="ben@bengabo.com" class="sp-link">
                            <i class="fa fa-envelope"  id="section-two"></i>   Contactez-moi pour un futur projet</i>
                        </a>
                    </div>
                </div>
                <!-- Three.js容器占6列，底部对齐文本区域 -->
                <div class="col-xl-6 d-flex align-items-end p-0">
                    <div id='threejs-container'></div>
                </div>
            </div>
        </div>
    </div>
</section>

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

2. CSS样式修正 #

移除错误的absolute定位，确保容器跟随栅格布局，同时给父容器添加定位参考：

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

.intro-warp {
  max-width: 1800px;
  width: 100%;
  margin: 0 auto;
  position: relative; /* 为内部可能的定位元素提供参考 */
}

.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 {
  width: 100%; /* 占满父列宽度 */
  height: 500px; /* 保持目标高度 */
}

3. Three.js代码调整 #

将渲染器和相机的初始尺寸绑定到容器，而非窗口大小：

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

// 初始化时获取容器真实宽高
const containerWidth = container.clientWidth;
const containerHeight = container.clientHeight;

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(
  30,
  containerWidth / containerHeight, // 使用容器宽高比
  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(containerWidth, containerHeight); // 绑定容器尺寸
container.appendChild(renderer.domElement);

window.addEventListener("resize", function () {
  let width = container.clientWidth;
  let height = container.clientHeight;
  renderer.setSize(width, height);
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
});

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

tick();

内容的提问来源于stack exchange，提问作者bengabo