我可以使用任何 webgl 库制作 3D div

Question

是否可以在 3D space 中创建一个 div，其中包含如此多的 dom 子项，以便在 webgl canvas 中创建一个可以编辑的表单并提交。

Answer 1

如果您想在 3d 场景中变换 div，可以使用 CSS3DObject:

var camera, scene, renderer, geometry, material, mesh, rendererCSS;

init();
animate();

function init() {

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.z = 500;
  scene.add(camera);

  var number = document.createElement( 'div' );
  number.className = 'number';
  number.textContent = "THREE.JS";
  object = new THREE.CSS3DObject( number );

  scene.add(object);

  renderer = new THREE.CSS3DRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);

  document.body.appendChild(renderer.domElement);
}

function animate() {
  requestAnimationFrame(animate);
  object.rotation.x += 0.03;
  render();
}

function render() {
  renderer.render(scene, camera);
}

这里是 complete demo.

如果您想在所有 3d 图形之上显示一个 2d 表单，那么您可以简单地将具有绝对位置的 div 叠加到包含您的 WebGL canvas 的 div .

我可以使用任何 webgl 库制作 3D div

Can I make a 3D divs using any webgl libraries

3d

webgl

three.js