Creating SVG paths using coordinates for THREE.js

I copied the exact code from this ThreeJs Example designed for generating a three-dimensional City Model.

I've created an SVG path outlining city boundaries using Google Maps and now I'm trying to use the above code to create a similar 3D object. Here is my SVG path code:

"M -378463.90230276587 -216828.5204525995 L -378463.90230276587 -216828.5204525995 L ... (path continues) ... -378460px, -216828px)

When I replace the example SVG path with the one mentioned above, the 3D object does not display. As a beginner in both Three.js and SVG, I'm uncertain about what I might be doing wrong.

I suspect that the coordinates in my SVG example are too large to be visible on the viewport. I attempted to mitigate this by applying the 

transform = translate(-378460px, -216828px)
method without success. Any suggestions or help would be greatly appreciated.

javascriptcsssvgthree.js

Answer №1

In the SVG coordinate system, the (x,y) plane is defined with x units to the right and y units down.

On the other hand, in Three.js, the coordinate system for (x,y,z) has x units to the right, y units upwards, and z units moving away from the observer.

In both cases, a certain transformation will be necessary to align the coordinates properly.

For instance, when representing a 2D model in SVG using the x & z axis as the SVG's x,y axis, one can apply a transformation such as transform="translate(width/w, height/2) scale(1,-1)" to center the origin at (0,0) and ensure that the axes move in alignment with the three.js model direction.

Answer №2

Your figure may not be visible because it is too far from the camera's view. I have made some modifications to the Threejs example code.

1) I have added a line that assigns a name to a mesh containing an extruded geometry created from an SVG path. By using your SVG path code, we will now have a single mesh named "mesh00" (look for the addGeoObject function with the line mesh.name = "mesh" + i + j;)

2) Once I know the name of the figure, I can easily locate it:

var svgObj = scene.getObjectByName("mesh00",true);

3) I can then center the figure:

svgObj.geometry.center();

It is important to find a way to make your figure visible to the camera. You can adjust the camera position to focus on the figure or, like I did, bring the figure closer to the camera. In the example, the camera was initially positioned very close, so I moved it further away.

View the jsfiddle demo for reference.

PS. I also implemented the use of OrbitControls for improved viewing experience.

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

An unexpected issue occurred: Unable to invoke method on NPObject

I am new to JSON and having trouble accessing object data. Here is the code snippet: <!doctype html> <html> <head> <meta charset="utf-8"> <title>ajax </title> </head> <body> <p id="p"></p& ...

javascripthtmljson

Pass data from a JavaScript array to PHP with AJAX

I have sought assistance both here and on stackoverflow in creating an invitation function. Within an AJAX-based search box, users can invite teams. Upon locating and selecting a team, it is stored in an array. However, I now need to access the data from t ...

phpjavascriptajax

Ways to move upward from a lower position

I am trying to create a hover effect where the title and content move to the right position upon hovering. The issue I am facing is that the transition on the `Title` class is not working, and as a result, the hover effect is also not functioning properly ...

htmlcss

css - align the arrow to the right in a dropdown

I recently started using a Bootstrap dashboard template created by Creative Tim. I am attempting to incorporate a dropdown list into a table cell, following the standard Bootstrap format: <div class="btn-group"> <button type="button" class="b ...

csstwitter-bootstraptwitter-bootstrap-3

Difficulty encountered when positioning a container using BootStrap 4

As a newcomer to the world of web development, I encountered an issue while trying to align a container on my webpage. Despite my efforts to center the container using (line 30), the page seems to update but there is no visible change. Can anyone help me ...

javascripthtmlcssbootstrap-4visual-web-developer

Is there a method to refresh the entire DOM-based location without having to reload the browser window?

Is it possible to achieve smooth asynchronous page transitions without breaking existing JavaScript animations in a system like Webflow? I'm struggling to find a way to present new elements to the DOM without disrupting the animations that are already ...

javascriptajaxanimationdomwebflow

Implementing coordinate formatting in JavaScript [Node.js]

I'm looking to tweak the JSON output into this specific format: [ 50.87758, 5.78092 ], [ 52.87758, 5.48091 ] and so on. Currently, the output looks like this: [ { lat: 53.1799, lon: 6.98565 }, { lat: 52.02554, lon: 5.82181 }, { lat: 51.87335, l ...

javascriptjsonnode.js

When I zoom in, h4 and h5 headers expand and extend beyond their boundaries

Currently, I am working on designing forms for this specific website. Everything appears to render properly at normal zoom levels. However, when I adjust the zoom in or out slightly, issues arise where the h4's and h5's are no longer centered wit ...

htmlcssoverflowweb

When the Angular UI Bootstrap typeahead ng-model is cleared, it displays as null

The filter is performing admirably, however, after deleting the entered text, the {{filterlist.name}} displays null. This leads to the tables appearing empty due to the presence of null. Check out the demo here: https://plnkr.co/edit/1QVdctw1hr4ggJOtFHUZ? ...

javascriptangularjsangular-ui-bootstraptypeaheadangular-ui-typeahead

The parcel command seems to be inactive and is not registered as a valid command

After successfully installing Parcel using npm, I created a package.json file with the following content: { "name": "example", "version": "0.1.0", "source": "src/index.js", "m ...

javascriptnpmminifyparceljs

What is the best way to adjust the size of a column when hovering

What I am attempting to achieve is, I would like the column box to have a 100% width, and when it is hovered over, I want it to transition to the left, with the width of the column box being about 60%, revealing a second block that shows up as 20% width o ...

jqueryhtmlcsshover

CSS-Only tooltip that adjusts size dynamically

Having trouble getting a tooltip to work exactly as desired? I need to implement tooltips for the contents of dynamically built HTML tables. It must be done with CSS only, without relying on JavaScript or events for performance reasons. The challenge is ha ...

htmlcsstooltip

Is it possible to disregard JQMIGRATE warnings for AngularJS v1.4.5 and proceed with upgrading AngularJS?

I currently have jquery 2.2.4 and AngularJS v1.4.5 integrated into my website. After setting up jquery-migrate-1.4.1, I encountered the following warning: JQMIGRATE: jQuery.fn.attr('selected') might use property instead of attribute The issue s ...

javascriptjqueryangularjs

"A lengthy contenteditable div designed to mimic an input field, with the ability to horizontally scroll

When the input is too short for the entire text to be displayed, users have the option to horizontally scroll the text inside the input by dragging with the mouse. Is there a way to implement this functionality in a contenteditable field that appears as ...

javascripthtmlcssinputcontenteditable

Is it feasible to execute a cross-site request forgery attack on a URL that delivers a JSON object as a response?

I am aware of the potential for a Cross-Site Forgery Attack that can target requests returning arrays by manipulating the Array constructor. For instance, let's say I have a site with a URL: foo.com/getJson that provides the following array: [&apos ...

javascriptjsonxsssecurityxmlhttprequest

bootstrap 4 appears to encounter some responsiveness issues when it comes to rendering on iPhone

https://i.sstatic.net/rdOtX.png While inspecting my website on mobile using developer tools, everything looks perfect. However, when I view it on my actual iPhone 6, the layout seems off. Could this be a bug specific to the iPhone 6? Here are my meta tag ...

ioscssbootstrap-4iphone-6

Having difficulty transforming a JSON string into a JSON object using Javascript

Currently, I am working on a hybrid mobile application using Angular. I have a string that is obtained from a $http.jsonp request and I am attempting to convert the response into JSON format. After checking the validity of the JSON at , it appears to be va ...

javascriptjsonangularjs

Guide on how to implement a file upload feature using only JavaScript and the FileReader API

Allow me to explain the issue I'm facing. To give you some context, I've been working on a forum web application. Lately, I've been trying to enable users to choose a photo from their local file system during sign up. The idea is that once a ...

javascriptformsfilefilereader

Switch from using a stylesheet to implementing jQuery

In order to achieve real-time replacement, the style changes immediately after a user interaction: $('link#mystyle').attr('disabled', 'disabled'); $('link#mystyle').remove(); if(new_style){ $('head').ap ...

jqueryhtmlcssstylesheet

The issue with Angular 1.6 not displaying the scope value in the template

Hey there! I'm currently working on index.html Here's the code snippet from before: <body ng-app="MainController"> <div class="page page-base {{ pageClass }}" ng-view> </div> </div> Then, I made changes by ass ...

javascriptangularjsangularjs-1.6