Question

我的场景中的每个CSS3D精灵都有一个反射，当我旋转相机时会出现这种情况。有没有解决的办法？反射在每个浏览器/操作系统上都不可见 - 在Mac上的FF上它是不可见的，在Linux上它是。另一个问题是，即使它不可见，它也是可点击的。您可以使用Firebug通过将鼠标放在HTML检查器中的a元素上来指示反射的位置。

示例：

  <!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>

Answer 1

没关系，我使用的是THREE.Sprite

three.js CSS3DSprite反映在z轴上

1 个答案: