如何将three.js渲染与其他HTML元素合并？

<div id="canvas-container"></div>

// 创建场景
var scene = new THREE.Scene();

// 创建相机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 创建渲染器
var renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);

// 将渲染器的输出绑定到HTML元素中
var canvasContainer = document.getElementById('canvas-container');
canvasContainer.appendChild(renderer.domElement);

<div id="canvas-container">
  <div id="overlay-element">这是一个覆盖在three.js渲染上的HTML元素</div>
</div>

#canvas-container {
  position: relative;
}

#overlay-element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#canvas-container canvas {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.5;
}