вычитание геометрии приводит к странному освещению

В three.js я пытаюсь «вырезать» окно из геометрии коробки (стены), используя это расширение csg (конструктивная твердотельная геометрия), которое я нашел здесь: https://github.com/chandlerprall/ThreeCSG

У меня получилось вырезать окно, но потом поверхность результата очень странно отражает свет, см. ниже (сначала обычная, потом стена с окном)

обычная стенастена с окном

var leftWallGeometry = new THREE.BoxGeometry( $scope.wall.width, $scope.room.height, $scope.room.depth);
var leftWallMesh = new THREE.Mesh( leftWallGeometry );

var leftWallBSP = new ThreeBSP( leftWallMesh );

var leftWindowGeometry = new THREE.BoxGeometry($scope.wall.width +10, 100, 100 );
var leftWindowMesh = new THREE.Mesh( leftWindowGeometry)

var leftWindowBSP = new ThreeBSP( leftWindowMesh );

var windowWallBSP = leftWallBSP.subtract( leftWindowBSP );
var result = windowWallBSP.toMesh( wallMaterial );
result.geometry.computeVertexNormals();

result.position.x = $scope.room.width / -2
result.position.y = $scope.room.height / 2
$scope.scene.add( result ); 

Материал стен MeshPhongMaterial с повторяющейся текстурой и рельефной картой.

var wallTexture = new THREE.ImageUtils.loadTexture('img/wall_diffuse_0.jpg')
// wall bump texture
var wallBumpTexture = new THREE.ImageUtils.loadTexture('img/bump_1.jpg')


// repeate wall texture and wall bump texture
wallTexture.wrapS = wallTexture.wrapT = THREE.RepeatWrapping; 
wallTexture.repeat.set( 10, 10 );

wallBumpTexture.wrapS = wallBumpTexture.wrapT = THREE.RepeatWrapping; 
wallBumpTexture.repeat.set( 10, 10 );

var wallMaterial = new THREE.MeshPhongMaterial( { map: wallTexture, bumpMap: wallBumpTexture, bumpScale: 0.2} );

Буду признателен за любые предложения по устранению этой странной проблемы со светом/отражением. ИЛИ как еще вырезать окна из стен/коробок в three.js.


person Hoff    schedule 19.05.2015    source источник
comment
можно ли включить норм? освещение предполагает, что стена больше не является вертикальной плоской стеной, поэтому, вероятно, что-то пошло не так с операцией csg.   -  person gaitat    schedule 19.05.2015
comment
привет, gaitat, спасибо за комментарий, но что ты имеешь в виду под включением нормалей, пожалуйста?   -  person Hoff    schedule 19.05.2015


Ответы (1)


Попробуйте установить заливку Материала стены на Flat Shading:

wallMaterial.shading = THREE.FlatShading;

Пример изображения правильно заштрихованной стены:

пример изображения

person Falk Thiele    schedule 05.06.2015