Exploring Clara.io's json data for 3D geometry within the Three.js

I've encountered an issue with exporting models in Clara.io. According to their instructions, exporting a selection should create a file for JSONLoader and exporting the full scene should result in a file for ObjectLoader. However, none of the export functions seem to be working properly with JSONLoader ().

In my application, I only require the geometry from the model to build a Points object. Therefore, I am searching for methods to either convert a loaded object to Mesh or perform some sort of geometry subtraction directly from the object itself. The documentation and examples from both Three.js and Clara.io only show one action with a loaded object - scene.add(object).

import THREE from 'three/build/three.module';
import {Scene,PerspectiveCamera,Fog,WebGLRenderer,ObjectLoader,Geometry} from 'three/build/three.module';
....
var loader = new ObjectLoader();
loader.load( 'assets/models/rabbit.json', function ( object  ) {
  //I don't need to add object here but this is the only thing that works
  //scene.add(object);
  //I need to do something like this
  geometry2 = new Geometry();
  geometry2.vertices = object.geometry.vertices; // ???
  particles = new Points( geometry2, new PointsMaterial( { color: 0xff0000, size:5 } ) );
  scene.add(particles)
});

Answer №1

It appears that clara.io only exports a single object in each scene. To extract the mesh from it, you can follow this example:

loader.load( 'assets/models/rabbit.json', function ( obj  ) {
  //No need to add obj here - this is the only working solution
  //scene.add(obj);
  //Perform these steps instead
  geometry = new Geometry();
  geometry.vertices = obj.children[0].geometry.vertices;
//obj.children[0] refers to the first mesh within the exported object
  points = new Points( geometry, new PointsMaterial( { color: 0xff0000, size:5 } ) );
  scene.add(points)
});

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

Issue with Quantity Box not displaying values in Shopify store

I am currently seeking assistance with resolving an issue I have encountered on a Shopify theme that I recently customized. The problem lies within the quantity box on the live site where despite being able to adjust the quantity using the buttons, the act ...

Is it possible to exchange CSS classes for a specific group of elements using JQuery?

I have two list items listed below: <li name="luxury" class="cars luxury> <div id="featured_lux" name="featured" class="carImg_lux col2_lux "> My Luxury Car<img border="0" class="car-im ...

Determine the active animation on an element using jQuery or JavaScript

Can you provide the code for the know_anim() function that can determine which animation is currently running on the '#div' element? Check out the jsFiddle link for reference:https://jsfiddle.net/himavicii/bL0nsjeL/ function moveLeft() ...

Is it possible that paramquery is failing to load a JSON string from the servlet URL?

I'm having trouble getting the index.xhtml file to load and display data from a URL. The servlet is functioning correctly, returning the JSON string as shown below: {"data":[{"LASTNAME":"Leonard","PERSON_ID":"0","FIRSTNAME":"Erick","FULLNAME":"Erick ...

Saving JSON data as a field in PostgreSQL using Spring Data JPA

Looking to create a unique table structure with two columns - an ID and a field specifically designed for storing JSON objects, all managed by Spring Data JPA. Consider this example: @Entity @Table(name = "unique_table") public class UniqueTable { @ ...

React-easy-crop simply provides a blob url as a result

Currently, I am utilizing the react-easy-crop package to enable users to make adjustments to their profile pictures post uploading. However, I have encountered an issue where the cropped image is returned in the form of a blob URL such as blob:http://local ...

Modifying a css class via javascript

Is it possible to set an element's height using CSS to match the window inner height without directly modifying its style with JavaScript? Can this be achieved by changing a CSS class with JavaScript? One attempted solution involved: document.getEle ...

Error: The hyperlink in the response from the Ajax request is not functioning as expected

I've exhausted all the suggestions for fixing this issue, but nothing has worked so far. Currently, my setup involves making an AJAX call to a PHP page called livesearch.php from the index page in order to retrieve live search results. <html> ...

``I am experiencing difficulties with utilizing a personalized color scheme in React JS with Material

I'm currently working on customizing the color palette for my project, but I am only able to modify the main attribute and not others. My development environment is JavaScript with MUI, not Typescript. import './App.css'; import {BrowserRout ...

The performance of HTTP requests is significantly decreased in Internet Explorer compared to expected speeds

I am currently developing an Angular site where I need to send a significant amount of data (approximately 1 MB) in an API call. In the Chrome and Firefox browsers, everything works smoothly and quickly, with a response time under one second. However, whe ...

Basic calculation of movement yields inaccurate outcome

I am encountering an issue with this specific function implementation. Calculations.add(this, //CONTEXT function () { //CALUCATE this.position.x += (this.movementSpeed.x / 10); }, function () { //HAVE CALCULATED ...

Creating a loading screen in Angular2: Step-by-step guide

How can you best integrate a preloader in Angular 2? ...

issue with brightcove player's complete event not triggering upon video replay

I have a videoplayer with an event listener added in an onTemplateReady function. Upon completion of the video, I want to replay it: videoPlayer.addEventListener(brightcove.api.events.MediaEvent.COMPLETE, completedCallback); function completedCallback(){ ...

Error: The object being referenced (scope.awesomeThings) is undefined and unable to be evaluated

Each time I run the grunt test command, I encounter this error. I set up a project using yo angular and attempted to execute the example code provided in Yeoman's scaffold. Something seems to have gone awry here - below is the code snippet that I trie ...

Transfer the data in the columns of Sheet1 to Sheet2 and eliminate any duplicates using Google App Script

Is there a way to transfer only unique rows from a SOURCE Spreadsheet to a DESTINATION spreadsheet? Spreadsheet #1 (SOURCE) - This sheet contains ID's and Names, but has duplicate rows. There are over 500k rows in this sheet and it is view-only. Spre ...

Attempting to trigger CSS transitions using JavaScript will not be successful

I'm facing an issue where CSS transitions do not work as expected when triggered by JavaScript. let isSearchBarOpen = false; function toggleSearchBar() { if (isSearchBarOpen) { searchBar.style.display = "none"; } else { searchBar.sty ...

Setting the focus on an input when updating a property in the Pinia store using Vue

When a component I have is clicked, it triggers a function in the store: <button @click="this.store.foo()"></button> Within the store, I am updating a specific property: state: () => ({ focusIn: false, }), actions: { foo() { ...

Addressing the issue with this.setState and this.state on the Registration page

I am facing an issue with my Registration Page code. I am trying to send data to a database using this.setState and this.state, but every time I run the code, it shows an error in the onSubmit function related to this.state. Can someone please help me unde ...

Generating div elements dynamically and applying styles

Generating a div dynamically and adding style to it var newDiv = document.createElement('div'); newDiv.setAttribute("id","dynamic-div"); document.body.appendChild(newDiv); // Simulating dynamic ajax content loading $(document).ready(function () ...

The hierarchy of script loading in Angular applications

After years of working with MVC, I recently delved into Angular. Although I am well-versed in JavaScript and HTML, I'm still a beginner in the world of Angular. I spent hours troubleshooting my app only to realize that the problem was elusive. The a ...