Question

JSFiddle：

我使用CSS3Renderer将图像渲染为背景，在应用程序中投影为多维数据集。

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

看起来（从我下面的代码中），WebGlrendered线框（中间随机生成的方块的线框）仅在您将视图旋转为具有白色背景时显示，当背景转向CSS3Rendered云时，WebGLRenderer呈现的线框消失了。有没有办法让线框保持在视图中？

我的最终目标是使用链接作为对象属性的多个浮动对象（例如3d文本），稍后可以使用光线（使用光线）。我想使用CSS3渲染器，因为它在mobile和canvasrenderer上呈现得很好，想法和建议会非常感激，我被正式卡住了。我的小提琴：

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的{{1}}设置在最前面，并且您需要确保z-index的背景是透明的。

WebGLRenderer

更新小提琴：http://jsfiddle.net/50y32971/3/

three.js r.77

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

1 个答案: