three.js - 对地面/地板 [英] three.js - Reflection on ground / floor

问题描述

我希望做同样的事情，即：（复制内部消除球）

http://people.mozilla.org/~sicking/webgl/ray。 HTML

我做的，它的工作原理，但反射是太大：/

  VAR groundTexture = THREE.ImageUtils.loadTexture（文件/ checkerboard.jpg）;
groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping;
groundTexture.repeat.set（25，25）;
groundTexture.anisotropy = 16;

mirrorGroundCamera =新THREE.CubeCamera（0.1，5000，512）;
scene.add（mirrorGroundCamera）;

VAR mirrorGroundMaterial =新THREE.MeshBasicMaterial（{图：groundTexture，一面：THREE.DoubleSide，envMap：mirrorGroundCamera.renderTarget}）;
mirrorGround =新THREE.Mesh（groundGeometry，mirrorGroundMaterial）;
mirrorGround.position.y = -0.5;
mirrorGround.rotation.x =  -  Math.PI / 2;
mirrorGroundCamera.position = mirrorGround.position;
scene.add（mirrorGround）;
 

解决方案

在three.js环境映射是一个近似值，并使得假设环境是无限不远了。

请参阅 http://threejs.org/examples/webgl_mirror.html 获得的一个例子如何在three.js处理镜面反射。

three.js R.70

I would like to do same thing as that : (whithout replicate spheres)

http://people.mozilla.org/~sicking/webgl/ray.html

I made that, it works but reflections are too big :/

var groundTexture = THREE.ImageUtils.loadTexture( "files/checkerboard.jpg" );
groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping;
groundTexture.repeat.set( 25, 25 );
groundTexture.anisotropy = 16;

mirrorGroundCamera = new THREE.CubeCamera( 0.1, 5000, 512 );
scene.add( mirrorGroundCamera );

var mirrorGroundMaterial = new THREE.MeshBasicMaterial( { map: groundTexture,  side: THREE.DoubleSide, envMap: mirrorGroundCamera.renderTarget } );
mirrorGround = new THREE.Mesh( groundGeometry, mirrorGroundMaterial );
mirrorGround.position.y = -0.5;
mirrorGround.rotation.x = - Math.PI / 2;
mirrorGroundCamera.position = mirrorGround.position;
scene.add(mirrorGround);

解决方案

Environment mapping in three.js is an approximation, and makes the assumption that the environment is "infinitely" far away.

See http://threejs.org/examples/webgl_mirror.html for an example of how to handle mirror reflections in three.js.

three.js r.70

这篇关于three.js - 对地面/地板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！