让 three.js 场景在容器中居中显示

Question

我正在尝试让我的 three.js 场景显示在一些卡片的上方和导航栏的正下方。现在我的场景在卡片下面渲染，没有居中。在搜索其他相关论坛posts后，我似乎无法弄清楚我做错了什么。

HTML:

<script src="../static/javascript/three.js"></script>
<script src="../static/javascript/explore3D.js"></script>

<div class="container">
    <div class = "row">
        <div id="canvas"></div>
    </div>
</div>

<div class="py-5 bg-light">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="card mb-6 shadow-sm">
                    <div class="card-body">
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="card mb-6 shadow-sm">
                    <div class="card-body">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS:

#canvas {
  position: fixed;
  outline: none;
}

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( 700, 400 );
document.querySelector('#canvas').appendChild( renderer.domElement );

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

const animate = function () {
    requestAnimationFrame( animate );

    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render( scene, camera );
};

animate();

非常感谢任何人的帮助！让我知道是否需要更多上下文来提供答案。

编辑：我将 document.body.appendChild( renderer.domElement ); 切换为 document.querySelector('#canvas').appendChild( renderer.domElement ); 此更改现在会在控制台中抛出 TypeError: null is not an object 异常，并且不会呈现任何内容。

编辑：我也试过 document.getElementById('canvas').appendChild( renderer.domElement ); 但这也会导致在控制台中抛出相同的异常。

编辑：我刚刚引用了这个 post：Get Element By Id Not working 是否有可能因为我在页面呈现之前调用此函数，所以我要查找的元素不存在？

Answer 1

使用 document.getElementById("canvas") 调用后，我将我的脚本标记放在 HTML 的 head 中。我还将 defer 添加到我的脚本标记中，以便在页面完成解析后执行我的脚本。

让 three.js 场景在容器中居中显示

Getting three.js scene to show up centered within a container

html

javascript

css

rendering

three.js