Each CSS3D sprite within my scene displays a reflection when the camera is rotated. Is there a way to prevent this? The Reflection does not appear consistently across different browsers and operating systems - it's not visible on Firefox on Mac, but it is on Linux. Another issue is that even if the reflection isn't visible, it remains clickable. To indicate the position of the reflection, you can use Firebug by hovering over the a-element in HTML-inspector.
Example:
<!DOCTYPE html>
<html>
<head>
<title>test11a</title>
<style>canvas { width: 100%; height: 100% } body {margin: 0px;overflow: hidden;}</style>
</head>
<body>
<script src="../build/three.min.js"></script>
<script src="js/renderers/CSS3DRenderer.js"></script>
<script>
var camera, scene, renderer;
var mesh;
var infoIcon;
var lon = 0;
var lat = 0;
var phi = 0;
var theta = 0;
init();
animate();
function init()
{
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
camera.target = new THREE.Vector3( 0, 0, 0 );
scene = new THREE.Scene();
htmlScene = new THREE.Scene();
var geometry = new THREE.SphereGeometry( 100, 60, 40 );
var texture = THREE.ImageUtils.loadTexture( 'textures/disturb.jpg' );
texture.anisotropy = renderer.getMaxAnisotropy();
var material = new THREE.MeshBasicMaterial( { map: texture } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
camera.position.z = 400;
window.addEventListener( 'resize', onWindowResize, false );
//place infoIcon
/*------------*/
var imageInfoLink = document.createElement( 'a' );
imageInfoLink.setAttribute("href", "http://www.google.de");
var imageInfo = document.createElement( 'img' );
imageInfo.src = 'textures/sprite0.png';
imageInfoLink.appendChild(imageInfo);
infoIcon = new THREE.CSS3DSprite( imageInfoLink );
infoIcon.position.z = -500;
htmlScene.add( infoIcon );
htmlRenderer = new THREE.CSS3DRenderer();
htmlRenderer.setSize( window.innerWidth, window.innerHeight );
htmlRenderer.domElement.style.position = 'absolute';
htmlRenderer.domElement.style.top = 0;
htmlRenderer.domElement.style.zIndex = 10;
document.body.appendChild( htmlRenderer.domElement );
}
function onWindowResize()
{
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate()
{
requestAnimationFrame( animate );
rotate();
lon += 0.5;
lat = Math.max( - 85, Math.min( 85, lat ) );
phi = THREE.Math.degToRad( 90 - lat );
theta = THREE.Math.degToRad( lon );
camera.target.x = 500 * Math.sin( phi ) * Math.cos( theta );
camera.target.y = 500 * Math.cos( phi );
camera.target.z = 500 * Math.sin( phi ) * Math.sin( theta );
camera.lookAt( camera.target );
htmlRenderer.render( htmlScene, camera );
}
function rotate()
{
mesh.rotation.y += 0.01;
renderer.render( scene, camera );
}
</script>
</body>
</html>