https://github.com/angydev/threejs-clipping

Clipping multiple objects and close the mesh with the original color of the object
https://github.com/angydev/threejs-clipping

3d javascript threejs threejs-example threejs-learning

Last synced: 17 days ago
JSON representation

Clipping multiple objects and close the mesh with the original color of the object

• Host: GitHub
• URL: https://github.com/angydev/threejs-clipping
• Owner: AngyDev
• License: mit
• Created: 2022-08-04T11:55:19.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-12-17T09:12:36.000Z (about 2 years ago)
• Last Synced: 2024-11-21T20:48:17.288Z (3 months ago)
• Topics: 3d, javascript, threejs, threejs-example, threejs-learning
• Language: JavaScript
• Homepage:
• Size: 67.4 KB
• Stars: 8
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Clipping with three.js

Clipping multiple objects and close the mesh with the original color of the object with the [three.js](https://threejs.org/) library.

I created another repo, [three-clipping-vr](https://github.com/AngyDev/three-clipping-vr) with the same clipping function but applied to the VR environment. A working progress work.

### Demo

https://threejs-clipping.netlify.app

![Clipping](img/screenshot-clipping-app.png)

## Table of Contents

- [Clipping with three.js](#clipping-with-threejs)

    - [Demo](#demo)

  - [Table of Contents](#table-of-contents)

  - [General info](#general-info)

  - [Setup](#setup)

## General info

The purpose of this example is to clip the objects, with multiple planes, and to close the mesh with the color of the object itself. It's also possibile to negate the clipping to have the other part of the clipping.

In this case is not possible to choose which part of the objects render with the clipping, maybe a future issue to develop.

The algorithm is composed by the following steps:

1. Gets the planes in the scene (THREE.PlaneGeometry)

2. Calculates the center of each plane

3. Creates a plane (THREE.Plane) for each plane (THREE.PlaneGeometry)

4. Calculates the barycenter of the planes

5. Gets the distance from the plane and the barycenter

6. Negates only the plane with negative distance

7. Creates the clipping object with colors

Step seven is similar to the official [three.js example](https://threejs.org/examples/?q=clipping#webgl_clipping_stencil)

The file index1plane.js is the clipping with only one plane. If you want to try this change the name from index1plane to index.

## Setup

If you want to start the application in local:

1. Clone the project `git clone [email protected]:AngyDev/threejs-clipping.git`

2. With your terminal go in the folder where you cloned the project

3. Run the command `npm init` that create the package.json file

4. Run the command `npm i live-server` that install the server on your project

5. Run the server with the command `live-server`