如何让three.js场景居中显示在指定容器并解决DOM元素获取报错

1 解决元素获取报错问题 #

报错原因就是你判断的DOM未加载完成：你当前将JS脚本放在了#canvas元素的HTML代码之前，浏览器执行JS时目标节点还未被渲染，因此获取返回null，有两种解决方法可选：

• 把两个<script>标签移动到整个HTML文档body标签的末尾，放在所有DOM元素的后面，确保JS执行时页面节点已经解析完成
• 将你现有的所有three.js逻辑包裹在DOM加载完成的事件回调中，示例如下：

document.addEventListener('DOMContentLoaded', function () {
  // 此处粘贴你原来的所有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();
})

2 解决位置、居中、遮挡问题 #

你当前给#canvas设置的position: fixed是脱离文档流的固定定位，会不受原有布局约束，也容易被后续渲染的卡片覆盖，替换为以下CSS即可：

#canvas {
  outline: none;
  width: 100%;
  display: flex;
  justify-content: center; /* 实现three.js画布水平居中 */
  margin: 16px 0; /* 可自行调整数值，和上方导航栏、下方卡片拉开间距 */
}
/* 可选：如果仍出现被遮挡的情况，补充下面两行属性即可 */
#canvas {
  position: relative;
  z-index: 10;
}

修改后#canvas会回归正常文档流，因为它的HTML结构本身在卡片模块之前，所以会自然显示在导航栏下方、卡片上方，同时内部的three.js渲染画布会水平居中。

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