I'm currently working on a game using Three.JS and I've successfully imported a city model from Sketchup. However, I now want to dynamically add "follow me" arrows (similar to the ones in the mockup). I think I may need to use Three.CurvePath for this, but I'm uncertain if it's the best approach. Should I manually create the path and calculate the tangent for each arrow so they naturally point around corners (like the left turn in the mockup)?
I hope that all makes sense!
I believe I have found a potential solution after not working with three.js for some time, so my approach may not be the most elegant. To begin, I referred to the Shapes Example as it demonstrates:
Therefore, I divided the issue into two main parts:
Generating the path: I utilized the rounded rectangle definition, which closely resembles a portion of the screenshot you provided.
var roundedRectShape = new THREE.Shape();
( function roundedRect( ctx, x, y, width, height, radius ){
ctx.moveTo( x, y + radius );
ctx.lineTo( x, y + height - radius );
ctx.quadraticCurveTo( x, y + height, x + radius, y + height );
ctx.lineTo( x + width - radius, y + height) ;
ctx.quadraticCurveTo( x + width, y + height, x + width, y + height - radius );
ctx.lineTo( x + width, y + radius );
ctx.quadraticCurveTo( x + width, y, x + width - radius, y );
ctx.lineTo( x + radius, y );
ctx.quadraticCurveTo( x, y, x, y + radius );
} )( roundedRectShape, 0, 0, 200, 200, 20 );
Your path might deviate from a rounded rectangle, but the available curve functions (quadraticCurveTo, bezierCurveTo, splineThru) can still be very handy.
Another suggestion that comes to mind is to employ a Ruby script for exporting path coordinates from Sketchup to three.js. You could create your own script or explore existing ones. Here's one such script that can be easily located through Google search.
Traversing the path:
Thankfully, three.js already provides this functionality via Path's getPoint(t), where 't' ranges from 0.0 to 1.0 representing the traversal across the path. Thus, obtaining the position is straightforward along with calculating the next interpolated position on the path. Furthermore, utilizing Math.atan2() helps determine the rotation:
t = (t + s)%1.0; // increment t while keeping it within 0.0 and 1.0
var p = path.getPoint(t); // point at t
var pn = path.getPoint((t + s)%1.0); // point at the next iteration of t
if(p != null && pn != null){
// move to current position
arrow.position.x = p.x;
arrow.position.y = p.y;
// calculate orientation based on the next position
arrow.rotation.z = Math.atan2(pn.y - p.y, pn.x - p.x);
}
To demonstrate generating and traversing a path in three.js based on the shapes example, below is a basic illustration (substituting an arrow shape with a cube):
<!DOCTYPE html>
<html lang="en">
<head>
<title>path interpolation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="debug" style="position:absolute; left:100px"></canvas>
<script src="../build/three.min.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
var container, stats;
var camera, scene, renderer;
...
(Additional code and implementation details continue)
...
</script>
</body>
</html>
To offer a practical demonstration directly on this page, here is a runnable code snippet:
(JavaScript code block providing functional code related to path traversal using three.js)
... (CSS styling properties presentational purposes)
...<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>I'm currently working on a To-Do List and facing an issue while trying to delete an item upon clicking a trash bin icon. image The problem I'm encountering is that only one data point is removed from local storage when the icon is clicked. If I ...
Currently, I am facing a dilemma where I have a paragraph that requires a select box to be placed right in the middle of it. However, the v-select component is too large and does not seem to offer any control over its width. This is how it currently appea ...
I'm having trouble placing a social button on top of an iframe that contains a YouTube or Vimeo video. The social buttons are located within a div container, which reveals or hides the content with JavaScript. However, I'm experiencing a blinking ...
After gathering the latest angularjs material, I noticed that the links in the document lead to absolute URLs at material.angularjs.org/.... I wish to have access to read the documentation and demonstration content locally. ...
My code consists of a series of checkboxes that need to be checked, then if they are checked, a string is added to an array. The goal is to loop through the array and concatenate the strings with commas in between. Unfortunately, every time I run this, err ...
I need to increase the value of + 450 to var threshold only when the page is on body.home. Here's an example: var headHeight = jQuery('#masthead-space').height() + 23; var threshold = jQuery('.PopularTabsWidget').offset().top - ...
Currently, I am working on developing a Chrome extension for a university project. However, I am facing challenges in making the background or body of the extension's HTML completely transparent to achieve a cleaner interface. The issue specifically l ...
I am attempting to hide the "mark as complete" button and replace it with a "completed" button by switching the classes from "hidden" to "completed" and vice versa. However, when I use an event listener to manipulate the DOM with the code provided below, t ...
Hello there! I'm currently working on enhancing an angular 1.6 app and have encountered a dilemma that needs solving. Let me provide some context: The page in question is a lengthy form consisting of thirty questions. The client-side logic includes nu ...
It might seem a little confusing, but I'm working with Material UI on my webpage and I want to replace the icon in the input field with another icon from Material UI Icons. <input className={classes.fieldDate} type="datetime-local" ... /& ...
Can I view custom methods in the IE developer toolbar's watch window? For example, if I have a global function named hello, can I locate it within the DOM? function hello() { alert("hello"); } If so, where in the watch window would I find them? ...
I'm encountering an issue with redirection after retrieving the XML data. The scenario involves a login process that fetches the ID values for username and password, verifies their existence, and then displays the alert "worked." However, despite show ...
Is there a way to create a URL field similar to the one on ? It's the field where the text is faded and when you click on it to type, it automatically appends ".tumblr.com" that cannot be erased or highlighted. The JavaScript used for this feature is ...
Hey there, I'm facing an issue with the code snippet available here. I would really appreciate it if you could assist me in resolving this problem. This is the code: import React from "react"; import { Select } from "antd" ...
I am facing a challenge with converting two time strings to Date objects and subtracting their values. The times I have are: 14:10 and 19:02 To perform the subtraction, I attempted to parse them using the following code: var res = date1 - date2; Howev ...
Recently, I've been working on updating data in a component every time the Vuex state is not null. I have set up API routes with Laravel that return user information once they are logged in. API routes: Route::group(['middleware' => [&a ...
I'm currently working on implementing a unique slideshow that will be embedded within an image of a smartphone on my website. I have found that using Owl Carousel makes creating the slideshow itself quite easy, but now I am faced with the challenge of ...
When I import a Blender scene into a three.js environment, the curved faces appear flat. Is there a method to ensure that these surfaces remain smooth as intended? Despite calculating vertex normals and activating the smoothShaded option, the issue persis ...
I am currently learning JavaScript and I have accumulated numerous small pieces of code that I want to test. Is there a way to do this in Chrome or any other browser without having to create a temporary .js/.html file? Someone recommended using Chrome&ap ...
In my project, I wanted to create a functionality where clicking on an image would trigger a modal box to pop up with additional content added once. However, I encountered two issues that I'm currently facing. Firstly, the header text that I intended ...