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

Question

JSFiddle:

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

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

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

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

我的最终目标是拥有多个带有链接的 float 对象(例如 3d 文本)作为对象属性，这些对象稍后将变为可点击(使用光线)。我想使用 CSS3 渲染器，因为它在移动设备上渲染得比 canvasrenderer 好，非常感谢想法和建议，我正式卡住了。我的 fiddle :

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

您正在重叠 Canvas 元素中使用 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