CODEWITHSUNDEEP
javascriptthree.js
eMTy
eMTy

Reputation: 387

ThreeJS, How to use CSS3Renderer and WebGLRenderer to render 2 objects on the same scene and have them overlap?

JSFiddle :

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

I am rendering an image as a background using CSS3Renderer, projected as a cube in the app.

I want to have objects, rendered using WebGLRenderer in the middle (later I will make them clickable using ray detection).

It looks like (from my code below), that WebGlrendered wireframe (the wireframe of the randomly generated square in the middle) only shows up when you rotate the view to have white background, when the background is turned to the CSS3Rendered clouds, the wireframe rendered by WebGLRenderer disappears. Is there a way to keep the wireframe in the view?

My ultimate goal is to have several floating objects (3d text for example) with links as an object property, which will be later made clickable (using rays). I want to use CSS3 renderer because it renders well on mobile vs canvasrenderer, ideas and suggestions would greatly appreciated, I am officially stuck. My 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);
}

Upvotes: 3

Views: 4698

Answers (1)

WestLangley
WestLangley

Reputation: 104783

You are using CSS3DRenderer and WebGLRenderer in overlapping canvas elements.

You you need to make sure the WebGLRenderer's background is transparent. Follow this pattern:

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

Upvotes: 1

Related Questions