The spheres produced by the threeBSP method exhibit a lack of smoothness

Question

The spheres produced by the threeBSP method exhibit a lack of smoothness

Is there a way to smooth out the sphere when I reach the segment limit of 45? Despite trying to change the number of segments, if I hit the cap of 45, cutting it becomes difficult and other methods seem unavailable for creating a smoother sphere.

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'});

javascript three.js csg

Answer 1

Answer №1

computeVertexNormals() function can achieve the desired outcome:

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

Refer to the following code snippet:

On the right mesh, computeVertexNormals() was invoked while on the left mesh it was not.

https://i.sstatic.net/K89Mz.png

(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);
        
    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://rawcdn.githack.com/mrdoob/three.js/r124/build/three.js"></script>
<script src="https://rawcdn.githack.com/mrdoob/three.js/r124/examples/js/controls/OrbitControls.js"></script>
<script src="https://rawgit.com/Wilt/ThreeCSG/develop/ThreeCSG.js"></script>

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

Answer 2

computeVertexNormals() function can achieve the desired outcome:

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

Refer to the following code snippet:

On the right mesh, computeVertexNormals() was invoked while on the left mesh it was not.

https://i.sstatic.net/K89Mz.png

(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);
        
    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://rawcdn.githack.com/mrdoob/three.js/r124/build/three.js"></script>
<script src="https://rawcdn.githack.com/mrdoob/three.js/r124/examples/js/controls/OrbitControls.js"></script>
<script src="https://rawgit.com/Wilt/ThreeCSG/develop/ThreeCSG.js"></script>

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

The spheres produced by the threeBSP method exhibit a lack of smoothness

Answer №1

Similar questions

How to Retrieve a Variable from the Parent Component in a Child Component using Angular (1.5) JS

What is the best way to access the local Express server that is located in the same directory as the frontend project

PHP move_uploaded_file() function encountering an issue

Extract the body.req object within a loop in a Node.js application

JavaScript - retrieve only the domain from the document.referrer

The createReadStream function cannot be found in the uploaded image

List of random items:1. Red pen2

What causes the Invariant Violation: Invariant Violation: Maximum update depth exceeded error to occur when using setState()?

Unable to employ pixelRatio for canvas within react three fiber

What are the steps to enable ajax communication with a database for posting, retrieving, and removing data?

Tips for sending an object from ng-repeat to a ng-include generated controller?

Vue.js navigation guards, restrict access to all unauthorized routes, grant entry to specific routes upon successful authentication

Is it necessary to reset the unordered list after adding it to the scrollbox?

Replicating a website to use at a later time

React - Issue with state not being updated accurately

Component encounters issue with undefined props being passed

Scripting issues detected in Safari and Microsoft Edge browsers

Having trouble with loading images from the assets folder, keep encountering a 304 error

"Need to refresh localStorage in VueJS after navigating back with this.$router.go(-1)? Here's how

Having difficulty refreshing the JGrid with updated content