Combine two shapes to create a single form using the PLYLoaders tool

I have encountered an issue while attempting to merge two PLY files using the PLYLoader method. How can I simultaneously access the Geometry of both loaders?

After loading the two ply files and defining a new BufferGeometry for the combined shape, I found that the variables mesh1 and mesh2 were undefined when trying to access the geometry properties.

Below is the code snippet:

//  ...
var mesh1, material1;
var mesh2, material2;
var singleGeometry, material, mesh;
// ...

init();
animate();

singleGeometry = BufferGeometry();

function init() {
  //   ...
  singleGeometry = new THREE.BufferGeometry();
  //  ...

  var loader = new THREE.PLYLoader();
  loader.load("path/ply1.ply", function(geometry) {
    geometry.computeVertexNormals();
    material = new THREE.MeshStandardMaterial({ color: 0x0055ff, flatShading: true });
    mesh1 = new THREE.Mesh(geometry, material);

    mesh1.position.y = -0.2;
    mesh1.position.z = 0.3;
    mesh1.rotation.x = -Math.PI / 2;
    mesh1.scale.multiplyScalar(0.01);
    mesh1.castShadow = true;
    mesh1.receiveShadow = true;
  });

  loader.load("path/ply2.ply", function(geometry) {
    geometry.computeVertexNormals();
    material = new THREE.MeshStandardMaterial({ color: 0x0055ff, flatShading: true });
    mesh2 = new THREE.Mesh(geometry, material);

    mesh2.position.x = -0.2;
    mesh2.position.y = -0.02;
    mesh2.position.z = -0.2;
    mesh2.scale.multiplyScalar(0.0006);
    mesh2.castShadow = true;
    mesh2.receiveShadow = true;
  });

  singleGeometry.mergeBufferGeometries([mesh1.geometry, mesh2.geometry]);
  material = new THREE.MeshPhongMaterial({ color: 0xff0000 });
  mesh = new THREE.Mesh(singleGeometry, material);
  scene.add(mesh);
}

Answer №1

The issue here stems from not allowing the loader to fully load meshes mesh1 and mesh2 before attempting to merge them together.

To address this, we can streamline the process by utilizing Promises, which simplifies handling asynchronous loading tasks.

(I have omitted the code related to generating meshes from single geometries as it doesn't seem to be utilized.)

var plyLoader = new THREE.PLYLoader();
function loadAsset(path) {
  return new Promise(resolve => {
    plyLoader.load(path, resolve);
  });
}

var singleGeometry, material, mesh;

Promise.all([
  loadAsset("ply/Paso_1_mandible.ply"),
  loadAsset("ply/Lucy100k.ply"),
])
  .then(geometries => {
    geometries.forEach(geometry => geometry.computeVertexNormals());
    var singleGeometry = new THREE.BufferGeometry();
    singleGeometry.mergeBufferGeometries(geometries);
    material = new THREE.MeshPhongMaterial({ color: 0xff0000 });
    mesh = new THREE.Mesh(singleGeometry, material);
    scene.add(mesh);
  })
  .then(() => {
    animate();
  });

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

discord.js embed message not displaying text correctly in Upper and Lower case

I created a custom "test" command and I want it to be case-insensitive so that it works regardless of whether the user types -test, -Test, -TEST, etc. Currently, it only responds to lowercase -test commands. I tried changing the toLowerCase(); method to to ...

Download functionality is functional in Chrome but not in Explorer when using jQuery

I have implemented the following code to facilitate file downloads directly to the desktop: $('#resourceTable tbody').on( 'click', '#getFile', function () { var data = resourceTable.row( $(this).parents('tr& ...

Modifying the color of a div based on a specified value using JavaScript

<div id="navigation"> Add your text here </div> <input type="text" id="newColor"><button onclick="modifyColor()">Update</button> <script> function modifyColor(){ var chosenColor = document.getElementB ...

Making an Ajax request to the GitHub API using Backbone

Currently delving into Backbone, I have encountered an issue while attempting to fetch JSON data from the GitHub API. My goal is to create a simple web application that retrieves a paginated list of open issues from the GitHub Rails repository. The stumbli ...

Rearrange elements in an array

Currently, I have an array of sphere meshes and I am looking for a way to position them in a level. The meshes are currently set in a specific position (in the shape of a skeleton), but I would like to move the entire array and place it in a different loca ...

JavaScript for varying content that is dynamically loaded on a completely ajax-powered website

This post has been updated to address the issue more effectively with a refined concept and code (based on the responses provided so far) I am working on developing an ajax-driven website, but I have encountered some issues with multiple bound events. He ...

Encountering an unknown provider error in AngularJS while using angular-animate

Upon removing bower_components and performing a cache clean, I proceeded to reinstall dependencies using bower install. However, the application failed to load with the following error message: Uncaught Error: [$injector:unpr] Unknown provider: $$forceRefl ...

how to retrieve a value from a lookup field in CRM 2015 with JavaScript

How can I retrieve the email of a contact when I already have their ID? function getEmailFromContactID(){ var contactId, contactName, contactEmail, contactObject; // mbmhr_employee is the lookup field name that we want to retrieve values from c ...

div consistently positioned above fixed element

My goal is straightforward - I have a fixed div at the bottom of my page that always needs to be visible. Inside this div, there are two sub-divs; one small div should always be on top, and the other should be scrollable. The issue lies with the small div ...

Issue with bootstrap 4 CDN not functioning on Windows 7 operating system

No matter what I do, the CDN for Bootstrap 4 just won't cooperate with Windows 7. Oddly enough, it works perfectly fine on Windows 8. Here is the CDN link that I'm using: <!doctype html> <html lang="en> <head> <!-- Req ...

Transferring information from the main function to getServerSideProps

I've been facing challenges while trying to pass data from a function component to the getServerSideProps method in Next.js. As a beginner in learning Next.js, I am struggling to understand this concept. My approach involves using context from _app, b ...

Angular 1.5 component using HTTP GET

Trying to utilize a 1.5 component with AngularJS has presented some challenges for me. I have a service that fetches my JSON file using $HTTP and returns a promise. In the controller of my component, I resolve the promise and assign it to a value using thi ...

Ensure Website Accessibility by Implementing Minimum Resolution Requirements

Is it possible to create a website that only opens on screens with a resolution of at least 1024 x 768, and displays an error message on unsupported resolutions? I've tried using JavaScript to achieve this, but haven't had any success. Any assis ...

Setting a variable for a JavaScript function to insert a video - a step-by-step guide

Here is a grid structure that I am working with: <div class="main"> <ul id="og-grid" class="og-grid"> <li> <a href="http://..." data-video="my-url" data-largesrc="images/1.jpg" data-title="Title" data-descript ...

Description for script tag in HTML body

How can I embed a GitHub gist on my website using the script tag? I currently use the following code: <script src="https://gist.github.com/uname/id.js"></script> I've been wondering if there is a way to add alt text in case the gist fail ...

Encountering an issue with JQuery when attempting to create a double dropdown SelectList. Upon submitting the POST request, the output received is always

Two dropdownlists have been created, where one acts as a filter for the other. When selecting a customer from the dropdown Customer, only a limited set of ClientUsers is displayed in the dropdown ClientUser. This functionality is achieved using a jQuery fu ...

Unable to retrieve information from the json-server

For my current project in Backbone.js, I'm utilizing the json-server package to populate it with data. I've created a db.json file containing the data and executed the command json-server --watch db.json. The server started successfully and is ru ...

FullCalendar Angular 10 not displaying correct initial view

I am currently using Angular 10 along with FullCalendar version 5.3.1., and I am facing an issue where I cannot set the initial view of FullCalendar to day view. It seems to be stuck on the dayGridMonth view by default. Below is the HTML snippet: <full ...

Updating an array of objects within a for loop using useState in React Native: A Guide

I am working with a state that contains an array of objects, and I need to update the 'time' property of each object within a for loop. Here is my code snippet: Each object in the array has properties for value, text, and time. The time property ...

Revise Bootstrap accordion setup

I currently have a Bootstrap accordion set up on my website using Bootstrap 4.1.0 <div id="accordion" class="mt-3"> <div class="card"> <div class="card-header bg-dark text-white" id="headingOne"> <h5 class="mb-0 f ...