Is it possible to animate the underlying shape of a mesh created using Three.js by drawing a shape and extruding it?
For example:
drawShape: function(){
var shape = new THREE.Shape();
shape.moveTo(0, 0);
shape.arc(0,0,30,0,(Math.PI*1.9),true);
return shape;
},
var shapeGeom = new THREE.ExtrudeGeometry(this.drawShape(), options);
I am interested in modifying the geometry by adjusting the shape path or arc.
To achieve the desired outcome, I opted for using morph targets in my approach. I developed a function that pre-creates the frames and then proceeds to animate through them. The process involves utilizing the function below to draw, as demonstrated:
createMorphTargets: function(geom,initVal,targetVal){
var numFrames = 60;
var fraqStep = (1/numFrames);
var diff = targetVal-initVal;
var stepVal = (targetVal-initVal)/numFrames;
for(var i=1;i<60;i++){
var delta = TWEEN.Easing.Quintic.InOut(fraqStep*i);
var lerpVal = initVal+(diff*(delta));
var mesh = new THREE.ExtrudeGeometry(this.drawShape(lerpVal), this.bevelOptions);
geom.morphTargets.push({
name:'target-'+i,vertices:mesh.vertices
});
}
},
I attempted to replicate a points example based on the official example, but unfortunately, the outcome was not what I had hoped for: https://i.sstatic.net/JI1Jl.png Instead of being circular, the points appeared to be rectangular! Below is the material ...
I recently implemented material-ui scrollable tabs in my project, referencing the documentation at https://mui.com/material-ui/react-tabs/#scrollable-tabs. Here is a snippet of the code I used: <Tabs value={value} onChange={handleChange ...
Currently, I am working on a project that involves Nuxt.js3 and supabase integration. In my plugins/supabase.server.js file (I am still unsure whether using server or client is the best approach), I want to call "supabase = createClient(~~)" from index.vu ...
var mongoose = require('mongoose'); var Schema = mongoose.Schema; const NewsAPI = require('newsapi'); const { response } = require('express'); const newsapi = new NewsAPI('87ca7d4d4f92458a8d8e1a5dcee3f590'); var cu ...
Attempting to create a simple welcome message embed. Here is my main.js file without the login token: const Discord = require('discord.js'); const client = new Discord.Client(); const MessageEmbed = new Discord.MessageEmbed(); const prefix = &ap ...
I am currently attempting to display a loading div when a button is clicked, however, I am encountering some issues with the functionality. Javascript : <script type="text/javascript"> $(document).ready(function (e) { $(&a ...
I accidentally caused a backward compatibility issue in my React application by utilizing Array.prototype.flat. I was quite surprised that this problem persisted even after transpiling - I had assumed it would generate es2015-compatible code. Is there a w ...
I'm trying to wrap my head around VueX, but I'm having trouble getting Axios to work with it. In my store.js file, I have the following setup: state: { cards: [], currentPage: 1, lastPage: 2, }, actions: { loadGradients(page ...
I am currently developing a Nuxt3 project and I'm looking to integrate a script provided by Axeptio, a cookie platform. To achieve this integration, I created a custom plugin in Nuxt3. export default defineNuxtPlugin((useNuxtApp) => { ;(<any ...
I currently have this code that formats numbers into currency format, however I would like to include the dollar sign ($) before the numbers. document.getElementById("numbers").onblur = function (){ this.value = parseFloat(this.value.r ...
Using the Google Drive API, I am able to generate a document and receive some URLs: alternateLink : https://docs.google.com/document/d/xxxsome_idxxxxx/edit?usp=drivesdk embedLink https://docs.goo ...
My goal is to store form data in localStorage, but I'm facing an issue with rich text fields not saving their data. Regular HTML fields like textboxes work fine. In my Razor markup for the field (using MVC), here is an example: <div class="form-g ...
I am trying to create a program that consists of one HTML page, where I can dynamically update and populate it with different elements using JavaScript. The main feature of the program is a button that remains constant in every version and displays a mod ...
Looking for a solution to embed a YouTube video on my webpage without the link appearing when hovering over it and without the suggested videos at the end. Just the option to replay the video without the distraction of related videos. ...
I am looking to convert this code to Angular. I have already written some of the code, but I am unsure what to use in place of :It(). The jQuery code can be found at the following URL: jsfiddle.net Here is my Angular code: x = 3; $scope.itemsPerPage = 3; ...
Encountering ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables like Arrays. *ngFor="let spec of vehicleSpecs" Tried various solutions and searched extensi ...
I have successfully implemented handlebars with puppeteer to generate a PDF server-side and save it in my database. However, I am facing an issue with loading images stored in an assets directory through the img tag. In my index.js file, I have a helper c ...
The navigation bar features categories such as: politics, economy, education Upon clicking on these categories, a dropdown menu appears with locations like: asia, europe, North America What I am looking for is this: If the user clicks (tabs) or hovers (o ...
Can anyone show me how to load a jquery URL in Joomla (Component)? I have a button that, when clicked, will reload the page and use the GET method to display a value from a variable. JavaScript: jQuery("#btnclickme").click(function(){ jQuery("#divpro").l ...
My Schema looks like this: const PublicationSchema = mongoose.Schema({ title: { type: String, required: true }, files:[{ contentType: String, data: Buffer, name: String }] }) I am attempting to re ...