Is it possible to use CatmullRomCurve3 to extrude over a sharp line, as shown in the image below:
https://i.sstatic.net/wJNEv.png
I am looking to achieve the following result:
https://i.sstatic.net/Fe87K.png
The goal is to achieve this with minimal polygons.
If you're looking to generate a staircase geometry using ExtrudeGeometry, there are several approaches you could take. One method involves creating a shape and defining the steps with a specific step size.
const shape = new THREE.Shape();
shape.moveTo( 0, 0 );
const numSteps = 10;
const stepSize = 10;
for ( let i = 0; i < numSteps; i ++ ) {
shape.lineTo( i * stepSize, ( i + 1 ) * stepSize );
shape.lineTo( ( i + 1 ) * stepSize, ( i + 1 ) * stepSize );
}
const extrudeSettings = { amount: 100, bevelEnabled: false };
const geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );
const material = new THREE.MeshBasicMaterial( {color: 0xffffff } );
const steps = new THREE.Mesh( geometry, material );
For a complete example utilizing webgl_geometry_extrude_shapes2, check out the link below:
After much effort, I took the initiative to generate vertices, faces, and calculate UVs on my own. If you're looking to tackle a similar project, I found this resource incredibly helpful. I'm still uncertain whether ExtrudeGeometry would have been applicable in this scenario.
Question : var str = "I have a <animal>, a <flower>, and a <car>."; In the above string, I want to replace the placeholders with Tiger, Rose, and BMW. <animal> , <flower> and <car> Please advise on the best approach ...
Currently, I am working on creating a visual countdown for my users to indicate when an animation will finish. The code snippet below shows my initial attempt: function setClassAndFire(){ timer = setInterval(function () { t--; ...
Hello, I am currently attempting to assign the correct type to an object with nested values. Here is a link to the code in the sandbox: https://codesandbox.io/s/0tftsf interface Product { name: string, id: number productList?:ProductItem[] } interf ...
I created a basic accordion using jQuery. It allows the user to toggle the items open and closed, and automatically closes any other active items. Check out the code snippet below: $(document).ready(function($) { $('#accordion').find(&apo ...
I've set up a modal sheet component with the following structure: <f7-sheet class="myClass" style="height: auto" swipe-to-step :backdrop="false" > <div class="sheet- ...
Is there a way to animate the sliding of the bottom border of a menu item when clicked on? Check out the code below: HTML - <div class="menu"> <div class="menu-item active">menu 1</div> <div class="menu-item">menu 2</ ...
I need help merging two different JavaScript files, one in a functional component and the other in a class component. I am new to ReactJS and class components, so I am looking to convert the class component file to a functional component. Any assistance in ...
I've built a backend system for user registration and login, but I'm struggling with handling and verifying sessions on the server side. Although I've read some guides on generating session tokens, I'm unsure about how to validate thes ...
I'm interested in combining two images using canvas. However, I'm curious if it's necessary to have these images in the DOM. What if I have multiple images with URLs but prefer not to preload them? ...
My web app sends hundreds of HTTP requests to a Node.js API I created. I need to ensure that only authenticated requests are accepted by Node.js. The issue at hand: I don't want to manually update each AJAX request in my JavaScript code to include a ...
I am currently developing a feature to securely encrypt user passwords using Bcrypt for my Angular application, which is integrated with MongoDB for the backend operations. Here is the implemented code snippet: Data Model var mongoose = require('mo ...
I have been tasked with looping through an array using the .forEach method in order to return all the values. If any of the numbers are a multiple of 3 or 5, or both 3 and 5, that number must be returned as a string. Here is my current code: let arr = [1, ...
Currently, I am facing an issue with a jquery emoji plugin that I need to use on one of my components until I complete building a custom plugin. Interestingly, when I call the emoji plugin inside componentDidMount, everything works fine, except for the ab ...
I've been working on setting up a lambda function to handle authentication, validation, and sending of a contact form. As I'm new to lambda functions, my code might have some flaws. However, despite my efforts, I am struggling to modify the resp ...
In this scenario, I aim to showcase the distance between two mouse click locations on the canvas. While I have achieved this functionality, my struggle lies in creating a line connecting these points. I kindly request suggestions on what steps I should ta ...
let spans = document.querySelector(`#spans`); let hrs = document.querySelector(`#hrs`); let mins = document.querySelector(`#mins`); let secs = document.querySelector(`#secs`); let start = document.querySelector(`#start`); let stop = document.querySelector( ...
I am currently working on a Node.js app and I am facing difficulties in looping through an irregular JSON to extract and print its data. The JSON structure is as follows: { "courses": [ { "java": [ { "attendees": 43 }, ...
I am trying to implement functionality to show/hide a div when a single checkbox is selected. Currently, it works with "Select all" but I am struggling to make it work with a single checkbox. Below is the code for "Select All": JS: <script language=&a ...
Trying to incorporate a basic Google chart using jQuery .load functionality to transfer the chart into another webpage with a specific containing DIV: <html> <head> <script type="text/javascript" src="https://www.google.com/jsapi">< ...
I have a method that populates an array. I would like to utilize it in this manner: arrayname.fill("First Array"); And not like this: arrayname = fill("First Array"); What approach should I take? function fillArray(name) { let newArray = ...