A comprehensive guide on implementing Three.InstancedMesh in Aframe

Currently, my project is focused on incorporating instancing in Aframe using the ThreeJs InstancedMesh. I'm following the example provided in this link: https://github.com/mrdoob/three.js/blob/master/examples/webgl_instancing_dynamic.html

Highlighted segment of code:

    init: function() {
        const {count, radius, scale, colors, positions} = this.data;  
        this.start = true;
        this.dummy = new THREE.Object3D();
        // Rest of the initialization code...
    },
    
    setMatrix: function (start) {
        if conditions for setting matrix
    },
    tick: function() {
        calling setMatrix()
    },

I am not encountering any errors or informative messages at the moment. However, even though the number of triangles being drawn significantly increases when I integrate this component, none of the instanced objects are visibly rendering. Unfortunately, I am unable to provide a specific example. Does anyone have insights into where I might be going wrong? Thank you in advance!

Note: Although the objects appear to be rendered due to the spike in triangle count, they are not visible anywhere and do not show up in the aframe inspector as well.

javascriptthree.jsaframevirtual-reality

Answer №1

This question is very specific and covers a broad topic, so here's some advice:

Typically, using THREE.InstancedMeshes is straightforward, and you're on the right track:

// Create an instanced mesh
let iMesh = new THREE.InstancedMesh(geometry, material, count)
element.object3D.add(iMesh)

// Manipulate the instances
let mtx = new Matrix4()
// Set the position, rotation, scale of the matrix
// ...
// Update the instance
iMesh.setMatrixAt(index, mtx);
iMesh.instanceMatrix.needsUpdate = true;

You can see an example of an instanced gltf model here

Your code seems to be quite complex, and simplifying it would be beneficial. However, one significant issue is that this.model is not defined anywhere, causing the setMatrix function to have no effect. Additionally, you may need to disable frustum culling (mesh.frustumCulling = false) or set a bounding sphere to prevent objects from disappearing when out of view. You can read more about this issue here.

Once these adjustments are made, your code should start working as intended. You can test it here

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

Halt the adhesion of the Bootstrap column when it hits the div section

I have a simple bootstrap row containing two columns: <div class="row"> <div class="col-xs-7"> <p>Walking together</p> </div> <div class="col-xs-5" id="stay"> <p>Joyful journey</p> </div ...

javascriptjquerycsstwitter-bootstrap

Creating a dropdown selection that allows for both multiple and single choices

I am working on a JavaScript function that dynamically changes the display of a DIV based on the selection made in another dropdown. The first dropdown contains options for one, multiple, or none. When 'single' is selected, I want it to change th ...

javascripthtmljquery

What is the best way to update $state in AngularJs when the user makes changes to the controller?

I am currently working on Angular UI Router and I want to refresh the current state by reloading it and rerunning all controllers for that state. Is there a way to reload the state with new data using $state.reload() and $stateParams? Here is an example ...

javascriptangularjs

Error Encountered: Unable to locate the variable "Login"

I encountered this rejection error It all started to go wrong in "Routes.js": import React, {Component} from 'react'; import {Router, Stack, Scene} from 'react-native-router-flux'; export default class Routes extends Component<{ ...

javascriptreactjsreact-nativevariablesreact-router

Challenges with removing and adding controllers in Angular versions 1.2 and above

I am currently in the process of migrating my app from Angular 1.2 to 1.3 and I am encountering an issue with the different behaviors of the removeControl and addControl functions. Within my directive, I have implemented a functionality that escapes regis ...

javascriptangularjsmigration

show information from json onto an html page with the help of jquery

I'm looking to showcase buttons from a JSON file within a simple block. Here's the JSON data for movies: { "movies": [ { "title": "Mena", "movieid": "1", ...

javascriptjqueryhtmljson

Unable to save data to file: ENOENT error - file not found

I'm currently working on creating a folder named "build" that will house numerous map files and JavaScript files. However, I've encountered the following issue. Snippet of the code: "scripts": { "prestart": "d2-manifest package.json manifes ...

cygwinnpmjavascript

Using HTML Select field to make ajax calls to web services

When working with modals that contain forms to create objects for database storage, there is a Select field included. This is the code snippet for the Select field: <div class="form-group" id=existingUser> <label>Username</label> < ...

javascriptjqueryhtmlajaxmodel-view-controller

methods for transferring JSON data from JavaScript to PHP

I am trying to figure out how to parse JSON data from JavaScript to PHP. Here is my JavaScript code: var Dataconvert; var asetid = new Array(); $("#simpanmodifikasi").click(function(){ var table = $('#tableasal tbody' ...

javascriptphpjsonajax

What about a lightbox with enhanced jQuery features?

As a newcomer to jQuery, I've never experimented with lightboxes before. However, I was tasked with creating something fun for April Fools' Day at work. Naively, I accepted the challenge thinking it would be simple, but now I find myself struggli ...

javascriptjqueryhtmlcss

Exploring the World of Browserify Submodules

/xyz /abc.js /abcdef.js /index.js When working with node.js, if you use the require statement for a directory (require('xyz')), it will automatically search for an index.js file within that directory and return the exports defined in that ...

javascriptnode.jsreactjsbrowserify

In what ways can I incorporate Django template tags into my JavaScript code?

I've encountered an issue with implementing my model data into a FullCalendar library template in JavaScript. Despite seeing others do the same successfully, I keep getting errors as the template tags fail to register properly. <script> documen ...

javascripthtmlcssdjangodjango-templates

Click the button to add content to the top section of the div using jQuery

Looking for some assistance with a web development issue I'm facing. Here's the scenario: I have two sections on my webpage - TOP and BOTTOM. In the bottom section, there are 3 list records each with a checkbox and button. What I need help with ...

javascriptjqueryhtmlcss

Alert: Ajax encountered an issue with the auto-refreshing field

When running a script I created for a self-updating field, I encountered the following error message: UpdateField.html:37 Uncaught ReferenceError: fieldname is not defined at HTMLInputElement.onchange (UpdateField.html:37) Script: https://i.sstatic.n ...

javascriptphphtmlajax

Utilize Node.js to compare values within nested arrays and display the results

Is there a way to compare and check the values of an array of arrays based on the name attribute, then print out the matching values separately from the unmatched ones? arrayToCheck =[ { id: 1, name:Java, description: language }, { id ...

javascriptnode.jsarraysnodes

The error message states that the element (0 , _dayjs.Dayjs) is not a valid function

I am currently in the process of replacing momentjs with dayjs. To start, I included the necessary dependencies: "dayjs":"1.10.7" Next, I imported dayjs like this: import { Dayjs } from 'dayjs'; To retrieve the start of the ...

javascriptreactjsdayjs

Include the session variable as an argument in the onload() function call

I've encountered a problem while trying to send the session variable $_SESSION["post-code"] as a parameter in the following code snippet... <body onload="getLocation('<?php echo $_SESSION['post-code'];?>')"> Within my ...

javascriptphpsession

Display the div if the input field is left blank

Is there a way to display the div element with id="showDiv" only if the input field with id="textfield" is empty? <form action=""> <fieldset> <input type="text" id="textfield" value=""> </fieldset> </form> <div id="sh ...

javascripthtmlinputshow

Unable to execute application due to invalid element type

I'm just diving into learning React Native, and as I attempt to launch my app, an error message pops up: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Verif ...

javascriptreactjsreact-native