Typescript csg subtraction

Questions
,
1

Hi guys,

I have a problem. I use CSG TS from GitHub - samalexander/three-csg-ts: CSG library for use with THREE.js to subtract multiple geometries on a main geometry. But for some reasons, I couldn’t generate multiple geometries, I set it up for less than 50 geometries but it only creates one geometry. I would very much appreciate that if you could help me.

csg
csg852×618 224 KB 

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { CSG } from '../src';
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
import Stats from 'three/examples/jsm/libs/stats.module.js';
import { STLExporter } from 'three/examples/jsm/exporters/STLExporter.js';

let camera: THREE.PerspectiveCamera,
  scene: THREE.Scene,
  renderer: THREE.WebGLRenderer;

init();
animate();

function init() {
  renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true});
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    1,
    10000
  );
  const controls = new OrbitControls(camera, renderer.domElement);
  camera.position.set(0, 20, 10);
  controls.update();

  const axesHelper = new THREE.AxesHelper( 50 );
  scene.add( axesHelper );

  const size = 50;
  const divisions = 50;

  const gridHelper = new THREE.GridHelper( size, divisions );
  scene.add( gridHelper );

}

const material = new THREE.MeshNormalMaterial;

//curved surface
const CurvedSurface = new THREE.Shape()
CurvedSurface.moveTo(5, 10);
CurvedSurface.bezierCurveTo(20, 30, 40, 10, 50, 12);
CurvedSurface.bezierCurveTo(70, 20, 60, 20, 90, 11);
CurvedSurface.bezierCurveTo(115, 20, 115, 20, 130, 12);
const extrudeSettings = { depth: 25, bevelEnabled: true, bevelSegments: 2, steps: 2, bevelSize: 1, bevelThickness: 1 };
const curved = new THREE.ExtrudeBufferGeometry(CurvedSurface, extrudeSettings);
const curvedgeo = new THREE.Mesh( curved, material);
curvedgeo.position.set(-50, -10, 0)


const geometry = new THREE.BoxGeometry(3, 3, 3);


for(var i = 0; i < 50; i++){
    var mesh  = new THREE.Mesh(geometry, material);
    mesh.position.x = (Math.random() - 0.5) * 120;
    mesh.position.y = (Math.random() - 0.5) * 10;
    mesh.position.z = (Math.random() - 0.5) * 50; 
    
    mesh.rotation.x = Math.random();
    mesh.rotation.y = Math.random(); 
    mesh.rotation.z = Math.random();
    mesh.scale.setScalar( THREE.MathUtils.lerp( 1.5, 3, Math.random() ) );

}

const geometry1 = new THREE.BoxGeometry(1, .5, 5);


for(var i = 0; i < 50; i++){
    var mesh1  = new THREE.Mesh(geometry1, material);
    mesh1.position.x = (Math.random() - 0.5) * 120;
    mesh1.position.y = (Math.random() - 0.5) * 10;
    mesh1.position.z = (Math.random() - 0.5) * 50; 
    
    mesh1.rotation.x = Math.random();
    mesh1.rotation.y = Math.random(); 
    mesh1.rotation.z = Math.random();
    mesh1.scale.setScalar( THREE.MathUtils.lerp( 1.5, 3, Math.random() ) );

}

curvedgeo.updateMatrix()
mesh.updateMatrix()
mesh1.updateMatrix()


const cut = CSG.subtract(curvedgeo, mesh);
const cut1 = CSG.subtract(cut, mesh1);

const group = new THREE.Group();

group.add(cut1)
//group.add(mesh)
//group.add(mesh1)

scene.add(group)


const stats = Stats()
document.body.appendChild(stats.dom)


const gui = new GUI()
const exportControls = gui.addFolder('Export');

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

const exporter = new STLExporter();

// EXPORT STL
const exportModel = {
  Export: function () {
      setTimeout(() => {
          var str = exporter.parse (group, { binary: true });
          var blob = new Blob([str], { type: 'text/plain' });
          var link = document.createElement('a');
          link.style.display = 'none';
          document.body.appendChild(link);
          link.href = URL.createObjectURL(blob);
          link.download = 'Object.stl';
          link.click();
          console.log('exported')
      },)
  } 
}

exportControls.add(exportModel, 'Export').name("Export STL")
2

Are you adding a CSG node to the scene? Idk the typescript CSG version, but if multiple passes don’t work you should check what’s wrong/different to the output compared with the first input.

3

Hi Fyrestar,

I don’t think it is about CSG. I tried to create multiple geometries and group them together. It still shows one geometry only. Could you help me, please?

code 1
code 11198×896 130 KB 

const geometry = new THREE.BoxGeometry(1,1,6);
for (var i = 0;i<50;i++){
  var mesh = new THREE.Mesh( geometry, material);
  mesh.position.x = ( Math.random() - 0.5) * 120;
  mesh.position.y = ( Math.random() - 0.5) * 10;
  mesh.position.z = ( Math.random() - 0.5) * 50;

  mesh.rotation.y = Math.random();
  mesh.scale.setScalar( THREE.MathUtils.lerp( 1.5, 3, Math.random() ) );
}

const geometry2 = new THREE.SphereGeometry(1,1,6);
for (var i = 0;i<50;i++){
  var mesh1 = new THREE.Mesh( geometry2, material);
  mesh1.position.x = ( Math.random() - 0.5) * 120;
  mesh1.position.y = ( Math.random() - 0.5) * 10;
  mesh1.position.z = ( Math.random() - 0.5) * 50;

  mesh1.rotation.x = Math.random();
  mesh1.scale.setScalar( THREE.MathUtils.lerp( 1.5, 3, Math.random() ) );
}

mesh.updateMatrix();
mesh1.updateMatrix();

const group = new THREE.Group();
group.add(mesh);
group.add(mesh1)
scene.add(group)