threeBSPメソッドを使用した後、作成された球は

Question

を滑らかにしていない私は、球のセグメント数を変更しようとしているが、私は45の限界に達している場合、私はそれをカットすることはできませんし、球を少しスムーズにする方法は他にありません。

var result; 
var sphereG = new THREE.SphereGeometry(115, 45, 45); 
var sphereM = new THREE.MeshPhongMaterial({color:"#fff"}); 
var sphere = new THREE.Mesh(sphereG,sphereM); 
var polyhedronG = new THREE.Geometry(); 
polyhedronG.vertices.push(
    new THREE.Vector3(-200,200,-200), //A 0 
    new THREE.Vector3(-200,-200,200), //B 1 
    new THREE.Vector3(200,-200,-200), //D 2 
    new THREE.Vector3(-1,-1,-1)   //O 3 
); 
polyhedronG.faces.push( 
    new THREE.Face3(0, 1, 2), 
    new THREE.Face3(0, 2, 3), 
    new THREE.Face3(0, 3, 1), 
    new THREE.Face3(3, 2, 1) 
); 
var polyhedronM = new THREE.MeshPhongMaterial({ 
    color:"#E8FBFF", 
    side:THREE.DoubleSide, 
    transparent:true, 
    opacity:0.1 
}); 
var polyhedron = new THREE.Mesh(polyhedronG,polyhedronM); 
var boxBSP = new ThreeBSP(polyhedron); 
var sphereBSP = new ThreeBSP(sphere); 
var resultBSP = sphereBSP.subtract(boxBSP);    
result = resultBSP.toMesh(); 
result.material=new THREE.MeshPhongMaterial({color:'#fff'}); 

Answer 1

computeVertexNormals()あなたが欲しいものを行う必要があります：computeVertexNormals()が呼び出されたメッシュ、左のためにそれが呼び出されなかったメッシュ

右の場合：

result = resultBSP.toMesh(); 
result.material=new THREE.MeshPhongMaterial({color:'#fff'}); 
result.geometry.computeVertexNormals(); 

は、コードスニペットを参照してください。

(function onLoad() { 
 
    var container, camera, scene, renderer, controls; 
 
    
 
    init(); 
 
    animate(); 
 

 
    function createModel() { 
 

 
    var sphereG = new THREE.SphereGeometry(115, 45, 45); 
 
    var sphere = new THREE.Mesh(sphereG); 
 
    var polyhedronG = new THREE.Geometry(); 
 
    polyhedronG.vertices.push(
 
     new THREE.Vector3(-200,200,-200), //A 0 
 
     new THREE.Vector3(-200,-200,200), //B 1 
 
     new THREE.Vector3(200,-200,-200), //D 2 
 
     new THREE.Vector3(-1,-1,-1)   //O 3 
 
    ); 
 
    polyhedronG.faces.push( 
 
     new THREE.Face3(0, 1, 2), 
 
     new THREE.Face3(0, 2, 3), 
 
     new THREE.Face3(0, 3, 1), 
 
     new THREE.Face3(3, 2, 1) 
 
    ); 
 
    var polyhedronM = new THREE.MeshPhongMaterial({ 
 
     color:"#E8FBFF", 
 
     side:THREE.DoubleSide, 
 
     transparent:true, 
 
     opacity:0.1 
 
    }); 
 
    var polyhedron = new THREE.Mesh(polyhedronG,polyhedronM); 
 
    var boxBSP = new ThreeBSP(polyhedron); 
 
    var sphereBSP = new ThreeBSP(sphere); 
 
    
 
    var resultBSP1 = sphereBSP.subtract(boxBSP); 
 
    var resultMesh1 = resultBSP1.toMesh(); 
 
    resultMesh1.material=new THREE.MeshPhongMaterial({color:'#ff8080'}); 
 
    resultMesh1.position.x = 100 
 

 
    var resultBSP2 = sphereBSP.subtract(boxBSP); 
 
    var resultMesh2 = resultBSP2.toMesh(); 
 
    resultMesh2.material=new THREE.MeshPhongMaterial({color:'#ff8080'}); 
 
    resultMesh2.position.x = -100 
 
    resultMesh2.geometry.computeVertexNormals(); 
 
    
 
    scene.add(resultMesh1); 
 
    scene.add(resultMesh2); 
 
    } 
 

 

 
    function init() { 
 
    container = document.getElementById('container'); 
 
    
 
    renderer = new THREE.WebGLRenderer({ 
 
     antialias: true 
 
    }); 
 
    renderer.setPixelRatio(window.devicePixelRatio); 
 
    renderer.setSize(window.innerWidth, window.innerHeight); 
 
    renderer.shadowMap.enabled = true; 
 
    container.appendChild(renderer.domElement); 
 

 
    scene = new THREE.Scene(); 
 
    scene.background = new THREE.Color(0xffffff); 
 
    
 
    camera = new THREE.PerspectiveCamera(70, window.innerWidth/window.innerHeight, 1, 10000); 
 
    camera.position.set(0, -400, -150); 
 
    scene.add(camera); 
 
    resize(); 
 
    window.onresize = resize; 
 
    
 
    var ambientLight = new THREE.AmbientLight(0x404040); 
 
    scene.add(ambientLight); 
 

 
    var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5); 
 
    directionalLight.position.x = -1; 
 
    directionalLight.position.y = 0; 
 
    directionalLight.position.z = -2; 
 
    scene.add(directionalLight); 
 

 
    controls = new THREE.OrbitControls(camera, renderer.domElement); 
 
\t \t 
 
    createModel(); 
 
    } 
 

 
    function resize() { 
 
    renderer.setSize(window.innerWidth, window.innerHeight); 
 
    camera.aspect = window.innerWidth/window.innerHeight; 
 
    camera.updateProjectionMatrix(); 
 
    } 
 

 
    function animate() { 
 
    requestAnimationFrame(animate); 
 
    render(); 
 
    } 
 

 
    function render() { 
 
    renderer.render(scene, camera); 
 
    } 
 
})();

<script src="https://threejs.org/build/three.js"></script> 
 
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script> 
 
<script src="https://rawgit.com/Wilt/ThreeCSG/develop/ThreeCSG.js"></script> 
 

 
<div id="container"></div>