Determine the point where a cube intersects a plane using Three.js

Given a plane and a cube, I am interested in determining if they intersect. If they do intersect, I would also like to find out:

  1. What shape does their intersection form - a triangle, a parallelogram or a hexagon?

    • In degenerate cases, it may just be a point or a segment.

  2. What are the coordinates of the vertices where the intersection occurs?

    2.1. Relative to the standard frame of reference

    2.2. Relative to the cube's frame of reference

Note:

  • The cube is created using new THREE.BoxGeometry(1, 1, 1) with translation and rotation applied through applyMatrix4 using corresponding matrices.
  • The plane under consideration is an arbitrary new THREE.Plane()
typescriptthree.js3dintersectionplane

Answer №1

After a thorough review of the Three.js documentation, I discovered some valuable information:

  • Plane includes a method intersectBox that determines if the plane intersects with a specified Box3.
  • Of particular interest is the Plane method intersectLine, which identifies where a given Line3 intersects the plane.
  • The Three.js examples showcase a class ConvexHull that constructs a convex polyhedron from a set of vertices:
new ConvexHull().setFromPoints(points).faces

An alternative approach to this issue may involve:

  1. Dividing the cube into 12 lines, each representing an edge,
  2. Examining each line for intersection with the plane. If there is an intersection, include the point in the convex hull

In the end, I opted not to utilize the convex hull method. Instead, I generated all potential faces by iterating through the intersection points using a triple nested loop.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When it comes to TypeScript, there is a limitation in assigning a value to an object key with type narrowing through the

I created a function called `hasOwnProperty` with type narrowing: function hasOwnProperty< Obj extends Record<string, any>, Prop extends PropertyKey, >( obj: Obj, prop: Prop, ): obj is Obj & Record<Prop, any> { return Object ...

javascripttypescript

The given 'FC<ComponentType>' type argument cannot be assigned to the 'ForwardRefRenderFunction<unknown, ComponentType>' parameter type

Currently, I am using react in conjunction with typescript. Within my project, there are two components - one serving as the child and the other as the parent. I am passing a ref to my child component, and within that same child component, I am binding my ...

javascriptreactjstypescript

Using keyof on an indexed property within a generic type in Typescript does not effectively limit the available options

Imagine having an interface structure like this: export interface IHasIO { inputs: { [key: string]: string }, outputs: { [key: string]: string } } The goal is to develop a function that adheres to this interface as a generic type and ensur ...

typescript

How to utilize the async pipe on an observable<Object> and connect it to a local variable in the HTML using Angular

Hey there! So, I have this observable called user$ which has a bunch of properties such as name, title, and address. component{ user$:Observable<User>; constructor(private userService:UserService){ this.user$ = this.userService.someMethodRet ...

angulartypescriptpipelocal-variablesangular2-observables

The module 'contentlayer/generated' or its type declarations are missing and cannot be located

Currently running NextJS 13.3 in my application directory and attempting to implement contentlayer for serving my mdx files. tsconfig.json { "compilerOptions": { ... "baseUrl": ".", "paths" ...

typescriptnext.jsmd5

Type inference and the extends clause in TypeScript 4.6 for conditional types

My focus was on TypeScript 4.7 when I created the following types: const routes = { foo: '/foo/:paramFoo', bar: '/bar/:paramFoo/:paramBar', baz: '/baz/baz2/:paramFoo/:paramBar', } as const; type Routes = typeof routes; ...

typescript

Having trouble importing the d3-geo package into a Node.js TypeScript project

Seeking a way to test the inclusion of specific latitude and longitude coordinates within different GeoJSON Features using code. When attempting this with: import d3 from 'd3-geo'; // or: import * as d3 from 'd3-geo' // no difference ...

javascriptnode.jstypescriptd3-geo

There is a lint error that is thrown when upgrading the typings file for JQuery version 3.2

I recently encountered an issue in my application where I used the following interface. It worked perfectly with jQuery 2.0: interface JQuery{ data(key: any): any; } However, upon upgrading to jQuery 3.2, the following lint errors were thrown: All decla ...

angulartypescript

Displaying buttons based on the existence of a token in Angular - A guide

Can you assist me with a coding issue I'm facing? I have implemented three methods: login, logout, and isAuthenticated. My goal is to securely store the token in localStorage upon login, and display only the Logout button when authenticated. However, ...

angulartypescriptrxjstoken

The glb file in Three.js captures the essence of its environment, but lacks the ability to

Using threejs, I've successfully imported and displayed a glb file of a multi-story house with various objects like chairs, tables, and a kitchen. However, I'm struggling to make these objects reflect themselves in addition to the environmental l ...

reflectionthree.jsraytracing

Starting a nested JSON structure with TypeScript and Angular 7

I'm encountering an error when attempting to make a POST request by sending an object TypeError: Can not set property 'ItemCode' of undefined My setup involves Angular 7 and Typescript Here is my initial JSON: objEnvio:any = <an ...

angulartypescript

Encountered an error in production mode with Angular 7: Uncaught ReferenceError - "environment" variable

During development, my application runs smoothly, and ng build --prod --source-map successfully compiles the application. However, when attempting to access it through the browser, an error occurs: app.module.ts:47 Uncaught ReferenceError: env is not defi ...

javascriptangulartypescriptnpmangular-cli

"CanDeactivate Implementation Failure: Why isn't the Generic Function Being Called

I am currently working on implementing a guard to prevent users from navigating to the login page once they have authenticated themselves. This guard should apply to all page components in my app except for the login page. Below is the code snippet I am u ...

angulartypescript

How can you indicate that a function in TypeScript is expected to throw an error?

An error occurs when trying to compile the following code: "a function whose declared type is neither void nor any must return a value or consist of a single throw statement." Is there a way to indicate to the compiler that _notImplemented throws an excep ...

typescripttypescript1.7

Creating a real-time face generator for a three.js shape

Currently, I am developing webgl software for generating 3D models that heavily relies on dynamic geometry. During my work, I have encountered some unusual behavior which I have managed to isolate in a JSFiddle demo. It appears that any new faces added af ...

javascriptthree.js

The unsightly square surrounding my sprite in Three.js

I am attempting to create a beautiful "starry sky" effect using Three.js. However, I am encountering an issue where my transparent .png star sprites have a colored outline around them. Here is the sprite I am using: https://i.sstatic.net/2uylp.png This ...

javascripttypescriptthree.js

Three.js: Blinking Squares (not in the same z-coordinate)

Currently, I am developing a Three.js scene where I am rendering some static and textured quads. Strangely, some of these quads flicker when I move the camera around. I have encountered this issue before when two quads have the same x, y, z coordinates, kn ...

three.js

Creating a new model in TypeScript may encounter a declaration issue with getting

I may just be overlooking something, but I have the following model: import { Brand } from './brand'; import { Plan } from './plan'; import { Venue } from './venue'; export class Subscription { id: number; brandId: number ...

angulartypescript

Exploring the capabilities of Angular 10 in conjunction with threex.domevents.js

I'm experiencing difficulties with incorporating threex into my Angular project. Does anyone have experience using this JavaScript library in an Angular environment? ...

angularthree.js

Issue with Angular 7 cli failing to recognize a custom TypeScript file

While working on an Angular 7 component, I encountered an issue when trying to read a custom file. The problem arises when the server restarts, even though there are no errors in the component's TypeScript file. ERROR: app/zontify-components/zonti ...

angulartypescriptinterfaceangular7