我可以使用任何webgl庫製作3D div

Question

是否可以在3D空間中創建包含許多dom子項的div，以便可以編輯和提交的webgl畫布中的表單。

Answer 1

如果你想有DIV在你的3D場景轉換，你可以使用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表單，則可以將包含WebGL畫布的div的絕對位置簡單地覆蓋到該div上。