Как отразить объект сам по себе?

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 = 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 визуализации.

Отображение окружающей среды, которое вы внедрили, основано на приближении, что окружающая среда (бесконечно) находится далеко.

Даже если вы использовали CubeCamera для вашей карты окружения, как в this example, у вас была бы такая же проблема.

Решение, использующее функцию three.js, заключается в использовании формы raytracing. three.js имеет RaytracingRenderer и simple demo, но этот рендеринг в настоящее время не поддерживается и не работает в режиме реального времени.

three.js r.71