All Projects → manthrax → Three Csgmesh

manthrax / Three Csgmesh

Conversion of a CSG library for use with modern THREE.js

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Three Csgmesh

Livecodelab
a web based livecoding environment
Stars: ✭ 276 (+173.27%)
Mutual labels:  threejs, three-js
Vue Gl
Vue.js components rendering 3D WebGL graphics reactively with three.js
Stars: ✭ 434 (+329.7%)
Mutual labels:  threejs, three-js
Glas
WebGL in WebAssembly with AssemblyScript
Stars: ✭ 278 (+175.25%)
Mutual labels:  threejs, three-js
three-kt-wrapper
Kotlin wrappers for Three.js
Stars: ✭ 46 (-54.46%)
Mutual labels:  threejs, three-js
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 (+763.37%)
Mutual labels:  threejs, three-js
TweetMigration
A WebGL heatmap of global Twitter activity
Stars: ✭ 42 (-58.42%)
Mutual labels:  threejs, three-js
Hedron
Perform live shows with your three.js creations
Stars: ✭ 372 (+268.32%)
Mutual labels:  threejs, three-js
react-with-threejs-example
An example project integrating React with three.js
Stars: ✭ 27 (-73.27%)
Mutual labels:  threejs, three-js
Wave Simulator
A graphical 3D simulation of the wave and heat equations
Stars: ✭ 5 (-95.05%)
Mutual labels:  threejs, three-js
Trois
✨ ThreeJS + VueJS 3 + ViteJS ⚡
Stars: ✭ 648 (+541.58%)
Mutual labels:  threejs, three-js
three-musketeers
A simple module to introspect, debug and test any THREE.js application.
Stars: ✭ 30 (-70.3%)
Mutual labels:  threejs, three-js
Vanta
Animated 3D backgrounds for your website
Stars: ✭ 1,162 (+1050.5%)
Mutual labels:  threejs, three-js
WebGL-Billiards
ThreeJS based 8-ball pool
Stars: ✭ 28 (-72.28%)
Mutual labels:  threejs, three-js
FairyGUI-threejs
A GUI Editor & framework for Three.js
Stars: ✭ 115 (+13.86%)
Mutual labels:  threejs, three-js
gamedex
👾 The code for my game dev + computer graphics experiments on YouTube.
Stars: ✭ 165 (+63.37%)
Mutual labels:  threejs, three-js
Three Mesh Bvh
A BVH implementation to speed up raycasting against three.js meshes.
Stars: ✭ 302 (+199.01%)
Mutual labels:  threejs, three-js
EduSmart
It utilizes 3D, Augmented reality to give real-life simulations or feels of various models and make the learning process more impactful and fascinating. With an interactive live feature, students can ask the teacher their doubts instantly and also discuss.
Stars: ✭ 23 (-77.23%)
Mutual labels:  threejs, three-js
Manim.three.js
A web compatible html5 canvas based mathematical rendering engine like the manim by 3b1b
Stars: ✭ 14 (-86.14%)
Mutual labels:  threejs, three-js
Roygbiv
A 3D engine for the Web
Stars: ✭ 499 (+394.06%)
Mutual labels:  threejs, three-js
Solarsys
Realistic Solar System simulation with three.js
Stars: ✭ 49 (-51.49%)
Mutual labels:  threejs, three-js

THREE-CSGMesh

Conversion of a CSG - (Constructive Solid Geometry) library for use with modern THREE.js

Original version: Copyright (c) 2011 Evan Wallace (http://madebyevan.com/), under the MIT license.

THREE.js rework by thrax under MIT license.

Here's a running demo http://vectorslave.com/csg/demos/CSGDemo.html

csg screenshot

And a shinier, slightly more complex demo: http://vectorslave.com/csg/demos/CSGShinyDemo.html

csg screenshot

And a more complex example showing a text mesh cut into another complex mesh via an intermediate cube: http://vectorslave.com/csg/v2/index.html

csg screenshot

An example showing multiple material groups, and vertex color channel: http://vectorslave.com/csg/demos/CSGStress.html

csg screenshot

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.

In the first screenshot/demo above, I show the possible results with a cube and a sphere...

In blue is the result of the .union operation, for sphere->cube and cube->sphere (the result is same in this case )

In green is the result of the .intersect operation, for sphere->cube and cube->sphere (the result is same in this case )

In red is the result of the .subtract operation, for sphere->cube and cube->sphere. Here the result differs based on the order of the inputs.

Example usage:

EXAMPLE 0:

//Minimal example.. subtract mesh b from mesh a:
import {CSG} from "three-csg.js"
scene.add(CSG.toMesh(CSG.subtract(CSG.fromMesh(a),CSG.fromMesh(b)),a.material))

EXAMPLE 1. Verbose... step by step..


// Make 2 box meshes.. 

let meshA = new THREE.Mesh(new THREE.BoxGeometry(1,1,1))
let meshB = new THREE.Mesh(new THREE.BoxGeometry(1,1,1))

//offset one of the boxes by half its width..

meshB.position.add(new THREE.Vector3( 0.5, 0.5, 0.5)

//Make sure the .matrix of each mesh is current

meshA.updateMatrix()
meshB.updateMatrix()

 //Create a bsp tree from each of the meshes
 
let bspA = CSG.fromMesh( meshA )                        
let bspB = CSG.fromMesh( meshB )

// Subtract one bsp from the other via .subtract... other supported modes are .union and .intersect
 
let bspResult = bspA.subtract(bspB)

//Get the resulting mesh from the result bsp, and assign meshA.material to the resulting mesh

let meshResult = CSG.toMesh( bspResult, meshA.matrix, meshA.material )

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].