JSFiddle :
http://jsfiddle.net/ApoG/50y32971/2/
I am working on a project where I am using CSS3Renderer to render an image as a background projected as a cube in the app. However, I also want to incorporate objects rendered using WebGLRenderer in the middle, which I plan to make clickable using ray detection.
Currently, I am facing an issue where the wireframe rendered by WebGLRenderer (the wireframe of a randomly generated square in the middle) only shows up when the background is rotated to have a white background. When the background is set to the CSS3Rendered clouds, the wireframe disappears. Is there a way to keep the wireframe visible regardless of the background?
My end goal is to have multiple floating objects (such as 3D text) with links as object properties that can be clicked using rays. I prefer using CSS3 renderer as it renders well on mobile compared to canvasrenderer. Any ideas or suggestions would be greatly appreciated as I am currently stuck on this. You can find my fiddle here:
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);
}