Question

是否可以在包含如此多dom子元素的3D空间中创建div，以便在webgl画布中创建可以编辑和提交的表单。

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画布的div。

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

1 个答案: