All Projects → Jiro-Digital → three-csg-ts

Jiro-Digital / three-csg-ts

Licence: MIT license
CSG library for use with THREE.js

Programming Languages

typescript
32286 projects
javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to three-csg-ts

Threejs Sandbox
Set of experiments and extensions to THREE.js.
Stars: ✭ 163 (-47.76%)
Mutual labels:  threejs, geometry, three-js
Three Mesh Bvh
A BVH implementation to speed up raycasting against three.js meshes.
Stars: ✭ 302 (-3.21%)
Mutual labels:  threejs, geometry, three-js
Threef.js
three.js addon, to produce almost infinite many time-varying geometries / buffer geometries with functions (cylindrical coordinates)
Stars: ✭ 19 (-93.91%)
Mutual labels:  threejs, geometry
Three.js Pathtracing Renderer
Real-time PathTracing with global illumination and progressive rendering, all on top of the Three.js WebGL framework. Click here for Live Demo: https://erichlof.github.io/THREE.js-PathTracing-Renderer/Geometry_Showcase.html
Stars: ✭ 872 (+179.49%)
Mutual labels:  threejs, three-js
A Mmd
A-Frame MMD component
Stars: ✭ 74 (-76.28%)
Mutual labels:  threejs, three-js
Roygbiv
A 3D engine for the Web
Stars: ✭ 499 (+59.94%)
Mutual labels:  threejs, three-js
Trois
✨ ThreeJS + VueJS 3 + ViteJS ⚡
Stars: ✭ 648 (+107.69%)
Mutual labels:  threejs, three-js
Vanta
Animated 3D backgrounds for your website
Stars: ✭ 1,162 (+272.44%)
Mutual labels:  threejs, three-js
Cga.js
CGA 3D 计算几何算法库 | 3D Compute Geometry Algorithm Library webgl three.js babylon.js等任何库都可以使用
Stars: ✭ 313 (+0.32%)
Mutual labels:  threejs, geometry
Three Ui
UI solution for Three.js
Stars: ✭ 149 (-52.24%)
Mutual labels:  threejs, three-js
Patches
Patches is a visual programming editor for building WebVR and WebGL experiences.
Stars: ✭ 164 (-47.44%)
Mutual labels:  threejs, three-js
Vue Gl
Vue.js components rendering 3D WebGL graphics reactively with three.js
Stars: ✭ 434 (+39.1%)
Mutual labels:  threejs, three-js
Hedron
Perform live shows with your three.js creations
Stars: ✭ 372 (+19.23%)
Mutual labels:  threejs, three-js
Wave Simulator
A graphical 3D simulation of the wave and heat equations
Stars: ✭ 5 (-98.4%)
Mutual labels:  threejs, three-js
3dtilesrendererjs
Renderer for 3D Tiles in Javascript using three.js
Stars: ✭ 333 (+6.73%)
Mutual labels:  threejs, geometry
Solarsys
Realistic Solar System simulation with three.js
Stars: ✭ 49 (-84.29%)
Mutual labels:  threejs, three-js
Glas
WebGL in WebAssembly with AssemblyScript
Stars: ✭ 278 (-10.9%)
Mutual labels:  threejs, three-js
Ifc.js
Ifc viewer for client applications.
Stars: ✭ 211 (-32.37%)
Mutual labels:  threejs, geometry
Three Csgmesh
Conversion of a CSG library for use with modern THREE.js
Stars: ✭ 101 (-67.63%)
Mutual labels:  threejs, three-js
Pipes
💿 Classic 3D Pipes screensaver remake (web-based)
Stars: ✭ 176 (-43.59%)
Mutual labels:  threejs, three-js

three-csg-ts

CSG (Constructive Solid Geometry) library for three.js with Typescript support.

This is a typescript rewrite of THREE-CSGMesh.

Example

Screenshot 2021-07-19 at 17 32 20

Concept

CSG is the name of a technique for generating a new geometry as a function of two input geometries.

CSG is sometimes referred to as "Boolean" operators in 3d modelling packages.

Internally it uses a structure called a BSP (binary space partitioning) tree to carry out these operations.

The supported operations are .subtract, .union, and .intersect.

By using different combinations of these 3 operations, and changing the order of the input models, you can construct any combination of the input models.

Installation

  • Install with npm npm i -save three-csg-ts
  • Install with yarn yarn add three-csg-ts

Example usage

import * as THREE from 'three';
import { CSG } from 'three-csg-ts';

// Make 2 meshes..
const box = new THREE.Mesh(
  new THREE.BoxGeometry(2, 2, 2),
  new THREE.MeshNormalMaterial()
);
const sphere = new THREE.Mesh(new THREE.SphereGeometry(1.2, 8, 8));

// Make sure the .matrix of each mesh is current
box.updateMatrix();
sphere.updateMatrix();

// Perform CSG operations
// The result is a THREE.Mesh that you can add to your scene...
const subRes = CSG.subtract(box, sphere);
const uniRes = CSG.union(box, sphere);
const intRes = CSG.intersect(box, sphere);
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].