Web worker causing issues with loading buffer geometry mesh

After converting my geometry to buffer geometry and successfully creating a mesh with both the geometry and material, I encountered an issue where the model is not displaying in the window.

Below is the code snippet:

var myWorker = new Worker("js/respond.js");
myWorker.postMessage("horse.js");

myWorker.onmessage = function(e) {
    geometry = new THREE.BufferGeometry();
    var colorattribute = new THREE.BufferAttribute(e.data.color, 3, false);
    var uv = new THREE.BufferAttribute(e.data.uv, 3, false);//created buffer attribute with worker data
    var normal = new THREE.BufferAttribute(e.data.normal, 3, false);
    var position = new THREE.BufferAttribute(e.data.position, 3, false);
    var morph = new THREE.BufferAttribute(e.data.morphAttributes, 3, false);
    geometry.addAttribute('color', colorattribute);
    geometry.addAttribute('uv', uv);
    geometry.addAttribute('normal', normal);
    geometry.addAttribute('position', position);
    geometry.addGroup(e.data.groups[0].start, e.data.groups[0].count, e.data.groups[0].materialIndex);
    geometry.morphAttributes.position = [];
    geometry.morphAttributes.position.push(morph);
    //console.log(e.data.morphAttributes);

    // mixer = new THREE.AnimationMixer(mesh);
    // clip = THREE.AnimationClip.CreateFromMorphTargetSequence('static', geometry.morphAttributes, 30);
    console.log(geometry);
    mesh = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({color:  0xffffff, morphTargets: true}));
    console.log(mesh);
    scene.add(mesh);

Answer №1

Using libraries such as THREE.js in a web worker is not feasible.

However, you can create your geometry in the worker thread and then pass it to THREE.js afterwards. The web worker can send back an object that includes TypedArrays of UInt32Arrays and Float32Arrays necessary to populate all attributes.

This approach leads to improved performance since the data is already structured in the format required by THREE.BufferGeometry.

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

Encountering an issue in Android Studio 1.3.1 when trying to create a SQLite

I encountered an error on line 26 of MainActivity.java. A Java NULLPOINTER Exception is being displayed. Can someone please advise me on how to resolve this issue? My code is available on GitHub. https://github.com/happyshravan/SQLite Latest LogCat error: ...

Optimal Strategy: Utilizing Spring Boot for Backend Development and jQuery for Frontend Interface

I am currently tackling a project that involves a Spring Boot 2 Backend and a jQuery Frontend. The frontend communicates with the backend by sending Ajax requests to Spring REST controllers in order to interact with database entities. One of the challenge ...

Implementing Typescript for managing state in React components

Currently, I have a state set up like this: const [newInvoice, setInvoice] = useState<InvoiceType | null>(invoice) The structure of my InvoiceType is as follows: customer_email: string customer_name: string description: string due_date: stri ...

I am experiencing an issue where the position of the value in the returned response array keeps changing after an Ajax request is made. How can

I am currently using a script that sends an array of numbers through Ajax to a web server. These numbers are then used to query a database, and the corresponding values from the table are sent back. I then display these values in respective divs within my ...

Is there a method to verify the consumability of an API without having to make a direct request to it?

I'm working on an idle timer feature where the API will be called to update data once the timer runs out. How can I check if the API is still usable without actually sending a request? ...

The state in a functional component in React fails to update after the initial axios call

Issue : The value of "detectLanguageKey" only updates after selecting the language from the dropdown twice. Even after selecting an option from the dropdown for the first time, the detectLanguageKey remains empty and is only updated on the second selectio ...

Substituted text appears as the label on the screen

I decided to update a section of a content editable div by inserting a tagged word. However, instead of only displaying the new word, it also shows the tags along with it. Here is the original content within the div: This text is contained within the & ...

Preventing document.getElementById from throwing errors when the element is null

Is there a way to handle null values returned by document.getElementById in JavaScript without adding if statements or checks to the code? I'm looking for a solution that allows the execution of subsequent JavaScript calls even after encountering a nu ...

An empty array is being returned by the Model.find() method after sorting

let query = Tour.find(JSON.parse(queryStr)); if (req.query.sort) { query = query.sort(req.query.sort);//a string 'ratings' } const tours = await query; res.status(200).json({ status: 'success', requestedAt: req.requestTime, ...

Encountering a post route error when utilizing async await has hindered my ability to add a new product

Recently, I attempted to update my post route using async await, and unfortunately made some mistakes. Now I'm unsure how to correct it properly. router.post('/', async (req, res, next)=> { try{ const updatedProduct = await ...

Execute JavaScript function only if it is the final invocation

I'm currently experiencing an issue with a Javascript function that updates a bootstrap spinner. The function works well in general, but the problem arises when I click multiple times. I utilize ajax to update the quantity of selected products in the ...

Guide on transferring binary image data to a JavaScript function

I have $comment->image_data as the binary data of the image and I want to pass this data to the imgclick() function. Attempting the method below, but encountering an unexpected token error. <img src="data:image/jpg;base64,'.$comment->image_t ...

Tips for arranging my list within my list-group-items to create a visually appealing layout

I've encountered an issue where the alignment of list-group-items inside a card container is not correct. I am using Bootstrap 4 and my aim is to neatly align all 3 fields in a tabbed column layout. Any suggestions on how to achieve this are welcome. ...

Troubleshooting problems with anchor-targets in Skrollr

I am experimenting with having divs overlap each other as the page is scrolled using Skrollr. Initially, I was able to achieve the desired effect with two divs. However, when trying to incorporate a third div, only the first and last ones seem to work prop ...

Dynamic SVG circles with timer and progress animation

Is there a way to modify the following: var el = document.getElementById('graph'); // get canvas var options = { percent: el.getAttribute('data-percent') || 25, size: el.getAttribute('data-size') || 220, lineW ...

Executing JavaScript code within a class object using ASP-VB

I'm looking to create a function that will show a Javascript-based notification. I already have the code for the notification, but I'm trying to encapsulate it in a class library as a function. However, I am unsure about what to return from the f ...

Is it possible to import data into a script?

When working with Angular, I am attempting to: $scope.data = "<script> alert('hi'); </script>"; Unfortunately, this approach does not seem to be effective. I also experimented with adding ng-bind-html but did not achieve any success ...

"JS Kyle: Utilizing JWT for Signing and Encrypting Data

I am currently using jose for signing and encrypting JWTs, but I am facing an issue when trying to sign and then encrypt the entire JWT. When it comes to signing my JWT, I utilize the following function: const secretKey = process.env.JWT_SECRET; const key ...

Using the 'onended' audio event emitter in Angular 2 along with a local member of the Component

I'm looking for assistance on how to utilize audio.onended() in order to play the next song in a playlist. I can successfully add songs to the playlist and play them using the above method with an audioObject. However, when audio.onended triggers, I ...

A guide on triggering a new chart to appear beside the adjacent <div> when a bar is clicked in a highchart

I'm a beginner with Highcharts and I have a requirement for two charts (let's call them Chart A and Chart B). Creating one chart is straightforward. What I need is, upon clicking on a bar in Chart A, a new chart (Chart B) should open next to the ...