减去的几何形状导致奇怪的照明
subtracted geometries result in strange lighting
在 three.js 中,我正在尝试使用我在这里找到的这个 csg(构造实体几何)扩展从一个盒子几何体(一堵墙)'cut out' window:https://github.com/chandlerprall/ThreeCSG
我切割成功了window,但是结果的表面反光很奇怪,见下图(先是正常,然后是window的墙)
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 );
墙 material 是具有重复纹理和凹凸贴图的 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} );
如有任何关于如何解决这个奇怪的 light/reflection 问题的建议,我将不胜感激。或者如何在 three.js.
中从 walls/boxes 中剪切 windows
尝试将墙壁 Material 的阴影设置为平面阴影:
wallMaterial.shading = THREE.FlatShading;
正确着色的墙示例图片:
在 three.js 中,我正在尝试使用我在这里找到的这个 csg(构造实体几何)扩展从一个盒子几何体(一堵墙)'cut out' window:https://github.com/chandlerprall/ThreeCSG
我切割成功了window,但是结果的表面反光很奇怪,见下图(先是正常,然后是window的墙)
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 );
墙 material 是具有重复纹理和凹凸贴图的 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} );
如有任何关于如何解决这个奇怪的 light/reflection 问题的建议,我将不胜感激。或者如何在 three.js.
中从 walls/boxes 中剪切 windows尝试将墙壁 Material 的阴影设置为平面阴影:
wallMaterial.shading = THREE.FlatShading;
正确着色的墙示例图片: