ThreeJS，如何使用 CSS3Renderer 和 WebGLRenderer 在同一场景中渲染 2 个对象并使它们重叠？

Question

JSFiddle：

http://jsfiddle.net/ApoG/50y32971/2/

我正在使用 CSS3Renderer 将图像渲染为背景，在应用程序中投影为立方体。

我想要在中间使用 WebGLRenderer 渲染的对象（稍后我将使用光线检测使它们可点击）。

看起来（从我下面的代码），WebGlrendered 线框（中间随机生成的正方形的线框）仅在您将视图旋转为白色背景时显示，当背景变为 CSS3Rendered 云时，WebGLRenderer 渲染的线框消失。有没有办法将线框保留在视图中？

我的最终目标是拥有几个带有链接作为对象属性的浮动对象（例如 3d 文本），稍后将使其可点击（使用光线）。我想使用 CSS3 渲染器，因为它在移动设备和 canvasrenderer 上渲染得很好，非常感谢您的想法和建议，我被正式卡住了。我的小提琴：

http://jsfiddle.net/ApoG/50y32971/2/

var camera, scene, renderer;
var scene2, renderer2;
var controls;
init();
animate();

function init() {
  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.set(200, 200, 200);
  controls = new THREE.TrackballControls(camera);
  scene = new THREE.Scene();
  scene2 = new THREE.Scene();
  var material = new THREE.MeshBasicMaterial({
    color: 0x000000,
    wireframe: true,
    wireframeLinewidth: 1,
    side: THREE.DoubleSide
  });
  //

  //
  for (var i = 0; i < 1; i++) {
    var element = document.createElement('div');
    element.style.width = '100px';
    element.style.height = '100px';
    element.style.opacity = 0.5;
    element.style.background = new THREE.Color(Math.random() * 0xffffff).getStyle();
    var object = new THREE.CSS3DObject(element);
    object.position.x = Math.random() * 200 - 100;
    object.position.y = Math.random() * 200 - 100;
    object.position.z = Math.random() * 200 - 100;
    object.rotation.x = Math.random();
    object.rotation.y = Math.random();
    object.rotation.z = Math.random();
    object.scale.x = Math.random() + 0.5;
    object.scale.y = Math.random() + 0.5;
    scene2.add(object);

    var geometry = new THREE.PlaneGeometry(100, 100);
    var mesh = new THREE.Mesh(geometry, material);
    mesh.position.copy(object.position);
    mesh.rotation.copy(object.rotation);
    mesh.scale.copy(object.scale);
    scene.add(mesh);
  }
  //
  var sides = [{
    url: 'http://threejs.org/examples/textures/cube/skybox/px.jpg',
    position: [-1024, 0, 0],
    rotation: [0, Math.PI / 2, 0]
  }, {
    url: 'http://threejs.org/examples/textures/cube/skybox/nx.jpg',
    position: [1024, 0, 0],
    rotation: [0, -Math.PI / 2, 0]
  }, {
    url: 'http://threejs.org/examples/textures/cube/skybox/py.jpg',
    position: [0, 1024, 0],
    rotation: [Math.PI / 2, 0, Math.PI]
  }, {
    url: 'http://threejs.org/examples/textures/cube/skybox/ny.jpg',
    position: [0, -1024, 0],
    rotation: [-Math.PI / 2, 0, Math.PI]
  }, {
    url: 'http://threejs.org/examples/textures/cube/skybox/pz.jpg',
    position: [0, 0, 1024],
    rotation: [0, Math.PI, 0]
  }, {
    url: 'http://threejs.org/examples/textures/cube/skybox/nz.jpg',
    position: [0, 0, -1024],
    rotation: [0, 0, 0]
  }];
  for (var i = 0; i < sides.length - 1; i++) {
    var side = sides[i];
    var element = document.createElement('img');
    element.width = 2050; // 2 pixels extra to close the gap.
    element.src = side.url;
    var object = new THREE.CSS3DObject(element);
    object.position.fromArray(side.position);
    object.rotation.fromArray(side.rotation);
    scene2.add(object);
  }

  //
  renderer = new THREE.WebGLRenderer();
  renderer.setClearColor(0xf0f0f0);
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  renderer2 = new THREE.CSS3DRenderer();
  renderer2.setSize(window.innerWidth, window.innerHeight);
  renderer2.domElement.style.position = 'absolute';
  renderer2.domElement.style.top = 0;
  document.body.appendChild(renderer2.domElement);
}

function animate() {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
  renderer2.render(scene2, camera);
}

Answer 1

您在重叠的画布元素中使用CSS3DRenderer 和WebGLRenderer。

您需要确保WebGLRenderer 的背景是透明的。遵循这个模式：

renderer = new THREE.WebGLRenderer( { alpha: true } ); // required
renderer.setClearColor( 0x000000, 0 ); // the default
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

renderer2 = new THREE.CSS3DRenderer();
renderer2.setSize( window.innerWidth, window.innerHeight );
renderer2.domElement.style.position = 'absolute';
renderer2.domElement.style.top = 0;
document.body.appendChild( renderer2.domElement );

three.js r.120