1

在 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中从墙壁/盒子上切割窗户。

4

1 回答 1

1

尝试将墙壁材质的阴影设置为平面阴影：

wallMaterial.shading = THREE.FlatShading;

适当阴影墙的示例图片：

示例图像

于 2015-06-05T09:07:44.247 回答