Comment puis-je utiliser la réflexion dans three.js?

Je veux avoir un miroir cube de surface dans une page avec WebGL Three.js. Il doit ressembler à un écran du téléphone mobile, qui reflète la lumière, mais elle doit encore être noir.

OriginalL'auteur Applecow | 2012-07-06

  1. 24

    J'ai créé un exemple d'un miroir cube (et aussi une réflexion et une sphère) avec des commentaires détaillés. La version live est à

    http://stemkoski.github.com/Three.js/Reflection.html

    avec bien mis en forme code à

    https://github.com/stemkoski/stemkoski.github.com/blob/master/Three.js/Reflection.html

    (Cela fait partie d'une collection de tutoriel, exemples à http://stemkoski.github.com/Three.js/)

    Les principaux points sont:

    • ajouter à votre scène une seconde caméra (un CubeCamera) positionné à l'objet dont la surface doit être le reflet
    • créer un matériau et de définir l'environnement de la carte que les résultats de rendu de cette deuxième caméra, par exemple

    par exemple:

     var mirrorCubeMaterial = new THREE.MeshBasicMaterial( 
    { envMap: mirrorCubeCamera.renderTarget } );
    • dans votre fonction rendu, vous devez vous rendre à partir de tous vos appareils. Masquer temporairement l'objet de la réflexion (afin de ne pas obtenir de la manière de l'appareil que vous allez utiliser), le rendu de la caméra, puis afficher l'objet réfléchissant.

    par exemple:

    mirrorCube.visible = false;
mirrorCubeCamera.updateCubeMap( renderer, scene );
mirrorCube.visible = true;

    Ces extraits de code sont l'un des liens que j'ai posté ci-dessus; les vérifier!

    OriginalL'auteur Lee Stemkoski