Three.js反射平面与cubeCamera＆amp;质地

Question

我正在尝试创建一个简单的平面，它将结合纹理和cubeCamera反射，我失败了，我不知道接下来该做什么？

如果我将平面材质上的envMap交换为简单的jpg / png纹理立方体，那么它将正常工作，但这不是我想要的。

我的目标是创建一个光泽的反射平面，其纹理将被复制以创建一个房间并反映房间内的任何三维网格。

这是我到目前为止所拥有的。

var scene, camera, cameraCube, renderer;
var light1, light2;
var wallMesh;

var init = function(){

    // scene
    scene = new THREE.Scene();

    // cameras
    camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
    camera.position.set(0,50000,50000);
    cameraCube = new THREE.CubeCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
    cameraCube.renderTarget.minFilter = THREE.LinearMipMapLinearFilter; // mipmap filter
    scene.add(cameraCube)


    // textureCube just for test
    // var path = "http://three.dev/cortana/textures/";
    // var format = '.png';
    // var urls = [
    //  path + 'px' + format, path + 'nx' + format,
    //  path + 'py' + format, path + 'ny' + format,
    //  path + 'pz' + format, path + 'nz' + format
    // ];
    // var textureCube = THREE.ImageUtils.loadTextureCube( urls );

    var texture = THREE.ImageUtils.loadTexture( 'http://three.dev/various/textures/white.png' );


    // room
    var plane = new THREE.PlaneBufferGeometry( 50000, 50000 );
    var wallMaterial = new THREE.MeshLambertMaterial( {
        color: 0x333333,
        ambient: 0xdddddd,
        map: texture,
        envMap: cameraCube.renderTarget,
        combine: THREE.MixOperation, 
        reflectivity: 0.5 
    } ); 

    var wallMaterial =   new THREE.MeshBasicMaterial({
        envMap: cameraCube.renderTarget,
    })

    wallMesh = new THREE.Mesh( plane, wallMaterial );
    wallMesh.rotateX(toRadians(-90));
    wallMesh.position.set(0,-250,0);
    scene.add( wallMesh );





    // sphere
    var sphereGeometry = new THREE.SphereGeometry( 100, 64, 64 );
    var sphereMaterial = new THREE.MeshPhongMaterial( { ambient: 0x111111, color: 0x111111, specular: 0x333333, shininess: 50, shading: THREE.SmoothShading });
    var sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
        sphere.scale.x = sphere.scale.y = sphere.scale.z = 20;
        sphere.position.set( 0, 2000, 0 );
        scene.add(sphere);

    // lights
    var ambient = new THREE.AmbientLight(0xffffff);
        scene.add( ambient );

    var directionalLight1 = new THREE.DirectionalLight( 0xffffff, 1 );
    directionalLight1.position.set( 0, 50000, 0 ).normalize();
    scene.add( directionalLight1 );     

    var color = new THREE.Color("rgb(0,255,0)");
    light2 = new THREE.PointLight(color, 1, 50000);
    light2.position.set(2000,500,2000);
    scene.add( light2 );



    // renderer
    renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    renderer.setClearColor( 0xffffff, 1 );
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.autoClear = false; 

    document.getElementsByTagName('body')[0].appendChild( renderer.domElement );




    // controls
    controls = new THREE.OrbitControls( camera, renderer.domElement );
    controls.rotateSpeed = 0.5;
    controls.minDistance = 1000;
    controls.maxDistance = 50000;
    controls.minPolarAngle = 0;
    controls.maxPolarAngle = toRadians(90)

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

}

function onWindowResize() {

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

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

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

}

function animate() {

    requestAnimationFrame( animate );
    render();

}

function render() {

    controls.update();
    //camera.lookAt( scene.position );
    //cameraCube.rotation.copy( camera.rotation );
    //renderer.render( scene, cameraCube );

    wallMesh.visible = false;
    cameraCube.updateCubeMap(renderer, scene);
    wallMesh.visible = true;

    renderer.render( scene, camera );

}

window.onload = function(){
    init();
    animate();
}