Hey everyone, I'm brand new to Three.js
I'm looking to cut out some shapes from a flat board using THREE.ExtrudeGeometry.
Check out the code snippet below:
// Code snippet here...In my example, I've included a circular shape and two line shapes.
While I can successfully punch a hole for the circle shape, it doesn't seem to work for the line shape.
I've also provided images of the current output and the expected output:
Current Output :
https://i.sstatic.net/xCkKz.png
Expected Output:
To create a rectangle with rounded corners using a path, you will need to follow these steps:
const createRoundedRectangle = (x1, y1, x2, y2, thickness = 1, radius = 0) => {
const vector1 = new THREE.Vector2(x1, y1);
const vector2 = new THREE.Vector2(x2, y2);
const direction = vector2.clone().sub(vector1).normalize();
const angle = direction.angle();
const perpendicularDirection = direction.clone().rotateAround(new THREE.Vector2(0, 0), Math.PI / 2);
const path = new THREE.Path();
path.moveTo(...vector2.clone().addScaledVector(perpendicularDirection, thickness - radius).toArray());
if(radius > 0) {
path.arc(...direction.clone().multiplyScalar(-radius).toArray(), radius, angle, angle + Math.PI / 2);
}
path.lineTo(
...vector1.clone()
.addScaledVector(perpendicularDirection, thickness)
.addScaledVector(direction, radius)
.toArray()
);
if(radius > 0) {
path.arc(...perpendicularDirection.clone().multiplyScalar(-radius).toArray(), radius, angle + Math.PI / 2, angle + Math.PI);
}
path.lineTo(
...vector1.clone()
.addScaledVector(perpendicularDirection, -(thickness - radius))
.toArray()
);
if(radius > 0) {
path.arc(...direction.clone().multiplyScalar(radius).toArray(), radius, angle + Math.PI, angle + 1.5 * Math.PI);
}
path.lineTo(
...vector2.clone()
.addScaledVector(perpendicularDirection, -(thickness))
.addScaledVector(direction, -radius)
.toArray()
);
if(radius > 0) {
path.arc(...perpendicularDirection.clone().multiplyScalar(radius).toArray(), radius, angle + 1.5 * Math.PI, angle + 2 * Math.PI);
}
path.lineTo(...vector2.clone().addScaledVector(perpendicularDirection, thickness - radius).toArray());
return path;
};
Then, use the function to add a hole in the shape:
var hole1 = createRoundedRectangle(10, 200, 400, 300, 40, 20);
boardShape.holes.push(hole1);
My attempt at validating URLs is encountering a problem. It consistently fails after the input reaches the 6th letter. Even when I type in "www.google.com," which is listed as a valid URL, it still fails to pass the validation. For example: w ww www ww ...
I have a project using Angular 7, .NET Framework, and MongoDB where I am creating user profiles. One of the requirements is to allow users to optionally upload a PDF file along with their other information. This is what I have implemented so far: <labe ...
One day, I decided to create a new context file called socket.tsx: import React, { createContext } from "react"; import { io, Socket } from "socket.io-client"; const socket = io("http://localhost:3000", { reconnectionDela ...
As I delve into learning nodejs and react, my current challenge lies in building bundle.js and debugging it within the browser. However, despite creating the bundle.map file, I am faced with errors as the webpack tab fails to appear in the browser. DevTool ...
My website heavily relies on JavaScript and communicates with a .NET C# RPC service. We encountered an issue where clients' browsers cached the JavaScript, so we decided to add a version number to the URL in order to force them to use the latest JavaS ...
I've been struggling to write a unit test that verifies if the .track method of Analytics is being called. Despite my efforts, the test keeps failing, even though invoking the function through http does trigger the call. I'm unsure if I've i ...
I am currently working on creating an SMS verification code component using a series of v-text-field components. My goal is to limit the input to just a single digit. <v-text-field v-for="(num, key) of code" :key=" ...
Is there a way to convert GPS degree to decimal values or vice versa? I am working on developing a feature where users can input an address and retrieve the GPS values in both degree and/or decimal format. However, my main challenge is understanding how t ...
I am currently working on integrating Polymer 3 components into my ASP.NET MVC application. I'm not entirely sure if my approach to this issue is correct at the moment. My main goal is to execute everything from IIS Express. However, I'm encou ...
I have a list of cities and their corresponding countries structured like the following: { "data": [ { "cityname": "Newyork", "countryname": "USA" }, { "cityname": "amsterdam", "countryname": "Netherland" },{ "cityname": "Washington", "country ...
Previously, in the older way of using Redux, we could create a reducer like this - handling different action types but with the same action: export default function authReducer(state = initialState, action) { switch (action.type) { case AUTH_ERROR: ...
My goal was to minimize the amount of code by incorporating a reusable component into my application. I am facing an issue on how to iterate through the columns and rows in Grid, Card, and Table. What would be the optimal solution for this problem? Please ...
I am currently working with a Mongoose.js schema that is structured as follows: { "City": String, "Year": String, "Population": Number, "Blah": Number, "Nested": { "Something": Number, "More stuff": Number } } Is there an efficient w ...
After creating a basic webpage that displays a single message, I decided to experiment with JSDOM and encountered an error. Despite researching online examples and Stack Overflow questions, I have struggled to resolve even the most straightforward scenario ...
In my project, I am utilizing Aurelia to create a dynamic form based on a JSON data. The form is being generated from a JSON structure similar to the one shown below: Schema = [{ 'key': 'Name', 'display': 'Name&a ...
I need to implement an auto-complete feature for the county field due to a large number of items in the list causing inconvenience to users who have to scroll extensively. Currently, there are two issues with the code. The first problem is that although t ...
Hey there fellow coders! I've been facing an issue while trying to make a database query using the odbc package found at https://www.npmjs.com/package/odbc. Interestingly, I can successfully run queries using FlySpeed SQL Query. However, when attempti ...
I am currently trying to wrap my head around the functionality of this React component (which is designed to delay the rendering of its children): function Delayed({ children, wait = 500 }) { const [show, setShow] = React.useState(false); React.useEff ...
I'm experiencing an issue with my Angular controller where the code inside its constructor is not running. Here's a snippet of the relevant pieces: conversationcontrollers.js: var exampleApp = angular.module('exampleApp',[]); console ...
In this particular example... http://example.com/1 ...I am experimenting with organizing a Handlebars template and its corresponding content in separate files, as opposed to having them all combined in the HTML file or JavaScript script, like in this con ...