javascript - 如何在对象上显示立方体贴图反射而不在背景中显示立方体贴图？

Question

如何在对象上显示立方体贴图反射而不在背景中显示立方体贴图？

我喜欢接收杠杆机构的反射，而不在背景中显示立方体贴图。背景应该是从蓝色到白色的渐变。

所以基本上，立方体贴图应该只在对象上可见。

提前非常感谢您!

 <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 = 3;
     controls.maxDistance = 8;
    //  controls.noPan = true;

     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 feinleinen = THREE.ImageUtils.loadTexture( 'textures/feinleinen.jpg' );
     feinleinen.anisotropy = 1;
     feinleinen.wrapS = feinleinen.wrapT = THREE.RepeatWrapping;
     feinleinen.repeat.set( 5, 5 );
     // create a cube


     var basisGeometry = new THREE.BoxGeometry(3,0.02,3);
     var basisMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, map: feinleinen } );
     var basis = new THREE.Mesh(basisGeometry, basisMaterial);
     basis.castShadow = false;
     basis.receiveShadow = true;

     // position the cube
     basis.position.set( 0, -0.47, 0 );

     // add the cube to the scene
     scene.add(basis);




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

         var chrome = new THREE.MeshLambertMaterial( { ambient: 0x444444, color: 0x111111, shininess: 800, specular: 0x111111, shading: THREE.SmoothShading, reflectivity: 1.1 } );
         var mesh = new THREE.Mesh(geo, chrome);

         mesh.position.set( 0, - 0.497, 0 );
         mesh.rotation.set( 0, - Math.PI / 2, 0 );
         mesh.scale.set( 0.008, 0.008, 0.008 );

         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

您可以通过指定模型 Material 的 envMap 属性向模型添加立方体贴图反射。

使用这样的模式:

var path = "textures/cube/foo/";
var format = '.png';

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, callback ); // callback function is optional

var material = new THREE.MeshPhongMaterial( {
    color      : 0x999999,
    specular   : 0x050505,
    shininess  : 50,
    envMap     : envMap,
    combine    : THREE.MixOperation, // or THREE.AddOperation, THREE.MultiplyOperation
    reflectivity : 0.5
} );

三.js r.71