three.js CSS3DSprite, отражающийся по оси z

Каждый спрайт CSS3D в моей сцене имеет отражение, ведьма появляется, когда я поворачиваю камеру. Есть ли способ обойти это? Отражение не видно на каждом браузере/ОС - на FF на Mac это не видно, на Linux это так. Другая проблема заключается в том, что даже если она не видна, она доступна для просмотра. Вы можете использовать Firebug, чтобы указать положение отражения, удерживая мышь от a-элемента в HTML-инспекторе.three.js CSS3DSprite, отражающийся по оси z

Пример:

<!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.position.z = 400; 
     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); 
     //imageInfo.style.cursor = 'pointer'; 



     infoIcon = new THREE.CSS3DSprite(imageInfoLink); 
     //infoIcon.position.x = 50; 
     //infoIcon.position.y = 2500; 
     //infoIcon.scale.x = 0.1; 
     //infoIcon.scale.y = 0.1; 

     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.x += 0.005; 
     mesh.rotation.y += 0.01; 
     renderer.render(scene, camera); 
    } 

    </script> 
    </body> 
    </html>

источник

2014-08-12 Torben

Можете ли вы настроить jsfiddle для этого? – mrdoob

sry, мне не удалось попасть в jsfiddle, поэтому я обновил пути и изображения в приведенном выше примере, чтобы его можно было запустить из «примеров» -каталога. – Torben

Ничего, я использую THREE.Sprite вместо

источник

2014-08-22 14:27:04 Torben

three.js CSS3DSprite, отражающийся по оси z

ответ

Смежные вопросы