javascript - 如何反射(reflect)物体本身？

Question

物体是否有可能反射自身？

我喜欢在金属物体上接收 self 反射。

所以基本上，该机构的两个环应该反射(reflect)在下部。

提前非常感谢您!

<script>

   if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

   var container;

   var loader;

   var camera, cameraTarget, controls, scene, renderer;

   init();
   animate();

   function init() {

     var previewDiv = document.getElementById("preview");

     camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 15 );
     camera.position.set( 3, 0.15, 3 );

     cameraTarget = new THREE.Vector3( 0, -0.25, 0 );

     controls = new THREE.OrbitControls( camera );
     controls.maxPolarAngle = Math.PI / 2.2;
     controls.minDistance = 1;
     controls.maxDistance = 8;
     controls.noPan = false;

     scene = new THREE.Scene();
     scene.fog = new THREE.Fog( 0xdae1e6, 2, 15 );


     // Ground

     var plane = new THREE.Mesh(
       new THREE.PlaneBufferGeometry( 40, 40 ),
       new THREE.MeshPhongMaterial( { color: 0x999999, specular: 0x101010 } )
     );
     plane.rotation.x = -Math.PI/2;
     plane.position.y = -0.5;
     scene.add( plane );

     plane.receiveShadow = true;


     // feinleinen

     var feinleinentexture = THREE.ImageUtils.loadTexture( 'textures/feinleinen.jpg' );
     feinleinentexture.anisotropy = 16;
     feinleinentexture.wrapS = feinleinentexture.wrapT = THREE.RepeatWrapping;
     feinleinentexture.repeat.set( 5, 5 );
     var feinleinen = new THREE.MeshPhongMaterial( { color: 0xffffff, map: feinleinentexture } );


     // Chrome

     var path = "textures/chrome/";
     var format = '.jpg';

     var urls = [
         path + 'px' + format, path + 'nx' + format,
         path + 'py' + format, path + 'ny' + format,
         path + 'pz' + format, path + 'nz' + format
     ];

     var envMap = THREE.ImageUtils.loadTextureCube( urls, THREE.CubeReflectionMapping );

     var chrome = new THREE.MeshPhongMaterial( {
         color      : 0x151515,
         specular   : 0xffffff,
         shininess  : 200,
         envMap     : envMap,
         combine    : THREE.MixOperation, // or THREE.AddOperation, THREE.MultiplyOperation
         reflectivity : 0.8
     } );



     // basis


     var basisGeometry = new THREE.BoxGeometry(1.8,0.012,3);
     var basis = new THREE.Mesh(basisGeometry, feinleinen);
     basis.castShadow = false;
     basis.receiveShadow = true;
     basis.position.set( 0, -0.47, 0 );
     scene.add(basis);


    // 2 Ring

     var loader = new THREE.JSONLoader();
     loader.load('/models/2ring.js', function(geo, mat){

         var mesh = new THREE.Mesh(geo, chrome);

         mesh.position.set( 0.08, - 0.477, -0.2 );
         mesh.rotation.set( 0, - Math.PI / 0.67, 0 );
         mesh.scale.set( 0.1, 0.1, 0.1 );
         mesh.castShadow = true;
         mesh.receiveShadow = true;

         loadJson(mesh );
     });

      function loadJson(mesh){
          scene.add( mesh );
      }





      // Lights

     scene.add( new THREE.AmbientLight( 0x777777 ) );

     addShadowedLight( 1, 1, 1, 0xffffff, 1.35 );
     addShadowedLight( 0.5, 1, -1, 0xffffff, 1 );

     // renderer

     renderer = new THREE.WebGLRenderer( { antialias: true } );
     renderer.setClearColor( scene.fog.color );
     renderer.setPixelRatio( window.devicePixelRatio );
     renderer.setSize( window.innerWidth, window.innerHeight );

     renderer.gammaInput = true;
     renderer.gammaOutput = true;

     renderer.shadowMapEnabled = true;
     renderer.shadowMapSoft = true;
     renderer.shadowMapCullFace = THREE.CullFaceBack;

     previewDiv.appendChild (renderer.domElement);

     // resize

     window.addEventListener( 'resize', onWindowResize, false );

   }

   function addShadowedLight( x, y, z, color, intensity ) {

     var directionalLight = new THREE.DirectionalLight( color, intensity );
     directionalLight.position.set( x, y, z )
     scene.add( directionalLight );

     directionalLight.castShadow = true;
     // directionalLight.shadowCameraVisible = true;

     var d = 1;
     directionalLight.shadowCameraLeft = -d;
     directionalLight.shadowCameraRight = d;
     directionalLight.shadowCameraTop = d;
     directionalLight.shadowCameraBottom = -d;

     directionalLight.shadowCameraNear = 1;
     directionalLight.shadowCameraFar = 4;

     directionalLight.shadowMapWidth = 2048;
     directionalLight.shadowMapHeight = 2048;

     directionalLight.shadowBias = -0.005;
     directionalLight.shadowDarkness = 0.15;

   }

   function onWindowResize() {

     camera.aspect = window.innerWidth / window.innerHeight;
     camera.updateProjectionMatrix();

     renderer.setSize( window.innerWidth, window.innerHeight );

   }

   function animate() {

     requestAnimationFrame( animate );

     render();
   }

   function render() {

     camera.lookAt( cameraTarget );
     controls.update();

     renderer.render( scene, camera );

   }

 </script>

Answer 1

您希望对象在使用 Three.js 渲染器时反射(reflect)自身。

您所实现的环境映射基于所反射的环境(无限)遥远的近似值。

即使您为环境贴图使用了CubeCamera，如this example ，你也会遇到同样的问题。

使用 Three.js 的解决方案是使用某种形式的光线追踪。 Three.js 有一个 RaytracingRenderer 和一个 simple demo ，但该渲染器目前不受高度支持，也不以实时帧速率运行。

三.js r.71