覆盖three.js渲染器上的HTML文本

问题描述：

我想覆盖我的three.js草图上的一些HTML文本，但是更改z-index不会改变任何内容。我知道我可以使用innerHTML，但是我也需要使用onclick属性，这会导致我进一步的问题，这不是这个问题的主要议题。覆盖three.js渲染器上的HTML文本

对于提供的示例，我使用的是CSS3D渲染器，并且希望将HTML内容显示到一边，但是uppon更改填充值时，整个身体只会降低而不仅仅是文本。

有谁知道这样的修复是否可能？

编辑：

// WebGL renderer2 
renderer2= new THREE.WebGLRenderer({ antialias: true }); 
renderer2.setClearColor(0xffffff, 1.0) 
renderer2.setSize(window.innerWidth, window.innerHeight); 
//renderer2.domElement.style.position = 'relative'; 
renderer2.domElement.style.zIndex = '-1'; 
document.body.appendChild(renderer2.domElement);

经过进一步调查，我决定再添加一个渲染器，这样CSS3D和WebGL将在一次在同一页上加载，但在这两个位置的变化，以相对的，他们结束被堆叠在一个之下，因此我有两个画布，理想情况下它们必须一个堆叠在一起，然后将HTML文本放在一边。

<!DOCTYPE html> 
<html> 
<head> 

    <script src="http://threejs.org/build/three.min.js"></script> 
    <script src="http://threejs.org/examples/js/renderers/CSS3DRenderer.js"></script> 
    <style> 
     body { 

      margin: 0; 
      overflow: hidden; 
      background-color: white; 

     } 

     .text{ 

      z-index: 99; 
      padding-top: 5%; 

     } 

     .large { 
      font-size: xx-large; 
     } 
    </style> 


</head> 
<body> 
    <div class="text"> 
     <p>Lorem Ipsum</p> 
    </div> 

<script> 

    var string = '<div>' + 
      '<h1>A test CSS3D example.</h1>' + 
      '<span class="large">this is an input example</span>' + 
      '<textarea> Try adding text here</textarea>' + 
      '</div>'; 

    // global variables 
    var renderer; 
    var scene; 
    var camera; 

    function init() { 


     scene = new THREE.Scene(); 
     camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000); 
     renderer = new THREE.CSS3DRenderer(); 
     renderer.setSize(window.innerWidth, window.innerHeight); 

     renderer.domElement.style.position = 'absolute'; 
     renderer.domElement.style.zIndex= '1'; 

     camera.position.x = 500; 
     camera.position.y = 500; 
     camera.position.z = 500; 
     camera.lookAt(scene.position); 


     document.body.appendChild(renderer.domElement); 
     var cssElement = createCSS3DObject(string); 
     cssElement.position.set(100, 100, 100); 
     scene.add(cssElement); 

     render(); 
    } 

    function createCSS3DObject(s) { 

     var wrapper = document.createElement('div'); 
     wrapper.innerHTML = s; 
     var div = wrapper.firstChild; 


     div.style.width = '370px'; 
     div.style.height = '300px'; 
     div.style.transform = 'rotate(70deg)'; 
     div.style.opacity = 0.7; 
     div.style.background = new THREE.Color(Math.random() * 0xffffff).getStyle(); 


     var object = new THREE.CSS3DObject(div); 
     return object; 
    } 

    function render() { 

     renderer.render(scene, camera); 
     requestAnimationFrame(render); 
    } 

    window.onload = init; 

</script> 
</body> 

</html>

你的three.js场景看起来像是绝对定位。这把它放在一切的前面。 –

谢谢，将相对的场景和文字改为绝对。很棒的工作，有点尴尬，我忽略了这样简单的事情。 – Sasquatchas

但是，它似乎并没有结束，因为当我尝试在场景中添加另一个渲染器时，它只是再次混淆了这些问题 – Sasquatchas

答

你text类有一个z-index的，但是，你需要absolute或relative它定位为z-index的申请。 https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

如果您提供了jsfiddle或codepen，我很乐意为您提供更具体的答案。

覆盖three.js渲染器上的HTML文本

相关推荐