Three.js移入div后几何体不显示但场景可正常渲染问题求助

核心问题原因 #

• 错误获取DOM元素宽高：innerWidth/innerHeight是window对象的专属属性，普通div元素没有这两个属性，你当前代码拿到的是undefined，导致相机宽高比、渲染器尺寸计算完全错误，是几何体不显示的核心原因。DOM元素需要使用clientWidth/clientHeight获取自身宽高。
• resize事件绑定错误：只有window对象会触发resize事件，绑定在div上的resize回调永远不会执行，后续窗口尺寸变化时也无法正常更新渲染参数。
• 几何体尺寸和相机位置不匹配：当前盒子宽度为10，相机仅在z轴3的位置，盒子大部分区域处于透视相机视野外，即使参数正确也只能看到极小部分的几何体。

修复后代码 #

JavaScript 代码 #

// 获取3D容器
const container = document.querySelector('#container')
var scene = new THREE.Scene()

// 用clientWidth/clientHeight获取容器宽高
var camera = new THREE.PerspectiveCamera(
  75,
  container.clientWidth / container.clientHeight,
  0.1,
  1000
)
// 相机后移适配大尺寸盒子，也可以直接把盒子尺寸改小到1左右
camera.position.z = 15

var renderer = new THREE.WebGLRenderer({
  antialias: true
})
renderer.setClearColor('#0D1033')
renderer.setSize(container.clientWidth, container.clientHeight)

container.appendChild(renderer.domElement)

// 把resize事件绑定到window上
window.addEventListener('resize', () => {
  renderer.setSize(container.clientWidth, container.clientHeight)
  camera.aspect = container.clientWidth / container.clientHeight
  camera.updateProjectionMatrix()
})

var geometry = new THREE.BoxGeometry(10, 1, 1)
var material = new THREE.MeshLambertMaterial({
  color: 0x90e9f9,
  side: THREE.DoubleSide
})
var mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

var light = new THREE.PointLight(0xffffff, 5, 500)
light.position.set(10, 0, 25)
scene.add(light)

var render = function() {
  requestAnimationFrame(render)
  renderer.render(scene, camera)
}

render()

CSS 代码（保持不变即可，后续如果需要调整容器大小直接修改#container的宽高参数即可） #

* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  height: 100vh;
}

canvas {
  display: block;
  height: 100%;
  width: 100%;
}

#container {
  background-color: black;
  height: 100vh;
}

HTML 代码（保持不变即可） #

<!DOCTYPE html>
<html>
<body>
  <div id="container">

  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
  <script src="main.js"></script>
</body>
</html>

后续迁移注意事项 #

后续要实现指定div承载3D空间，只需要修改#container的CSS宽高、定位属性即可，不需要修改JS逻辑，只要确保获取容器宽高用clientWidth/clientHeight即可正常运行。

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