Rotating a cone in three.js using two points and a specified radius

Using the coordinates and radius provided in an example XML file, I am trying to create a cone. Is there a way to rotate the cone if I have the top vertex's coordinates and the center of the base? Here is an image for reference: Image

Answer №1

// Let's define the base center as v1 and the cone's pinnacle as v2
let distance = v1.distanceTo(v2);
let geometry = new THREE.ConeGeometry(radius, distance);
geometry.translate(0, distance * 0.5, 0); // Move base to zero
geometry.rotateX(Math.PI * 0.5); // Align along Z-axis
let material = new THREE.MeshBasicMaterial(); // Use any other material if needed
let cone = new THREE.Mesh(geometry, material);
cone.position.copy(v1);
cone.lookAt(v2);
scene.add(cone);

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

JavaScript - issue with event relatedTarget not functioning properly when using onClick

I encountered an issue while using event.relatedTarget for onClick events, as it gives an error, but surprisingly works fine for onMouseout. Below is the code snippet causing the problem: <html> <head> <style type="text/css"> ...

Utilizing Treant.js within a Vue.js application

After attempting to integrate the Treant.js library into my Vue app for creating a tree diagram from JSON data, I encountered some errors. In my main view, here are the import statements... import Vue from "vue" import store from "../../store" import { ge ...

The display function in Javascript has a tendency to work sporadically

I’ve been tasked with creating my own tic tac toe game through coding. While I am relatively new to programming, I have a strong passion for it. At the moment, I've set up a basic function to hide only the "O", leaving only the "X" visible on the gr ...

Transform JSON into a JavaScript array object using node.js

My knowledge of Javascript is limited and I need assistance with a .json file that has the following structure: { "results": [ { "challenger": { "__type": "Pointer", "className": "Player", "objectId": "STWAxAHKay" }, "c ...

Navigating a mobile-friendly menu anytime!

I'm in the process of creating a responsive "hamburger" menu for mobile devices. The HTML code I have implemented is as follows... .menu_closed { color: red; } .menu_open { color: blue; } <script src="https://ajax.googleapis.com/ajax/libs/jq ...

Using Vue.js to send a slot to a child component in a nested structure

Check out this interesting modal component configuration //modal setup <template> <slot></slot> <slot name='buttons'></slot> </template> Imagine using it like a wizard //wizard setup <template> ...

AngularJS $http get isn't functioning properly, but surprisingly $.ajax works perfectly

Recently delving into the world of AngularJS, I am facing a hurdle with $http functionality. In my factory setup below: app.factory('employeeFactory', function ($http) { var factory = {}; // Retrieving data from controller var emplo ...

Efficiently reducing the size of a CSS selector string with javascript

Is there a library that already performs this function? I've only been able to find online tools. The reason I am interested in accomplishing this task using JavaScript is because I need to ensure that the strings a > b, a and a> b,a are conside ...

Binding an event to an Angular 2 component directly within its selector code

Looking at my Angular 2 component: import { Component, ElementRef, Renderer } from '@angular/core';; @Component({ selector: 'my-button', templateUrl: 'button.html' }) export class ButtonComponent { private text: string ...

Switch out the arrow icon in the dropdown menu with an SVG graphic

Looking for a way to customize the dropdown caret in a semantic-ui-react component? Here's how it currently appears: https://i.sstatic.net/GpvfC.png <Dropdown className="hello-dropdown" placeholder="Comapany" onChange={th ...

TypeAhead.js and Bloodhound displaying an uneven quantity of search outcomes

I have a frontend setup with TypeAhead and Bloodhound integration, fetching JSON data from a Play/Scala server. The version of Typeahead being used is 0.11.1. Here is how the implementation looks: HTML: <div id="typeahead" class="col-md-8"> < ...

Combining several meshes in ThreeJS while maintaining distinct materials

I seem to be facing a dilemma. I am attempting to consolidate several meshes into one in order to optimize draw calls. Each mesh I have comes with its own unique material, whether it be color or texture. Below is the snippet of code I have been working on ...

Utilize $validators during blur/focus interactions

In my validation directive, I currently manually set the validation state like this: $element.on('focus', function() { $scope.$apply(function() { ngModelCtrl.$setValidity('length', true); }); }); $element.on('blu ...

Locate identical values within an array in MongoDB, even if they exist independently of an object

{ "_id" : ObjectId("15672"), "userName" : "4567", "library" : [ { "serialNumber" : "Book_1" }, { "serialNumber" : "Book_2" }, { "serialNumber" : "Book_4" } ...

Issues are being faced with the execution of JavaScript on Heroku when using Rails 3.1

After upgrading a Rails 3.0 app to 3.1 on Heroku running on the cedar stack, everything seemed fine except for one major issue - the app's JavaScript wouldn't run. Despite the application.js file being compiled and accessible at myapp.com/assets/ ...

Error encountered in Node.js: The listener must be a function

I've been working on adapting the solution provided in (How to create a simple http proxy in node.js?) from HTTP to HTTPS. However, upon attempting to access the proxy through my browser, the server abruptly stops and throws the following error: eve ...

Pattern-Based jQuery Selectors

I am looking for a way to use jQuery to select all paragraphs < p > within a < div > that contain time stamps with the following formatting patterns: <p>[22:48]</p> or <p>[22:48 - Subject Line]</p> Can someone provi ...

Is there a way to implement Twitter Bootstrap Dropdowns with the first item acting as a toggle button?

Have you seen the Twitter Bootstrap Dropdowns Docs? They provide the syntax for creating a dropdown menu like this: <div class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a> <ul cla ...

Tips for properly halting an AJAX request

My challenge is to halt an Ajax request when a user clicks a button. Despite using .abort(), the Ajax request continues to occur every 2 seconds. Essentially, the user waits for a response from the server. If the response is 2, then an Ajax request should ...

Obtain a compilation of users who have expressed their reaction to a message with a specific emoji on Discord

Check out this Discord.js code snippet for a Discord bot: client.channels.fetch('channelID here').then(function (channel) { channel.messages.fetch('messageID here').then(function (message) { console.log(message.reactions.cache.get(&a ...