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

【问题标题】：Can I make a 3D divs using any webgl libraries我可以使用任何 webgl 库制作 3D div
【发布时间】：2016-02-25 00:10:20
【问题描述】：

是否可以在 3D 空间中创建一个包含这么多 dom 子级的 div，以便在 webgl 画布中创建一个可以编辑和提交的表单。

【问题讨论】：

WebGL 是一个光栅化库。除了呈现为画布元素外，它与 DIV 或其他 HTML 元素没有任何关系。所以不，WebGL 不能这样做。见3D CSS

标签： 3d three.js webgl

【解决方案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 画布的 div。

【讨论】：