Issue in Three.js BufferGeometry: Render count or primcount is 0 if no index is provided

Is it possible to create a BufferGeometry without setting the indices and still have the geometry rendered correctly? I followed the instructions here, but when I try, I receive a warning stating "Render count or primcount is 0" and the geometry doesn't show up. What could be causing this issue?

Below is the code snippet that reproduces the problem:

var buffGeometry = new THREE.BufferGeometry();
buffGeometry.attributes =
{
    position:
    {
        itemSize: 3, array: new Float32Array([10, 0, 0, 0, 10, 0, 0, 0, 0, 0, 10, 0, 10, 0, 0, 10, 10, 0]),
        numItems: 18    
    }
};

indexArray = new Uint32Array([0, 1, 2, 3, 4, 5]);

< !--it works adding the index array with the following line-- >
// buffGeometry.setIndex(new THREE.BufferAttribute(indexArray, 1));

material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );       
var mesh = new THREE.Mesh(buffGeometry, material);    
scene.add(mesh);

Using three.js r77

(Here is the complete sample)

javascriptthree.js

Answer №1

Check out the documentation provided here:

To clarify, it is recommended not to directly set the attribute property. Instead, you should create a THREE.BufferAttribute and then add it to the geometry by using 

.addAttribute('position', bufferAttribute)

UPDATE: Uncertain about how setIndex functions - does it display any content or avoid crashing?

Answer №2

When I encountered the warning message while using the code snippet below, everything seemed to be functioning correctly: 

  const curveMesh = new THREE.Mesh()
  let curve

  allCoords.forEach(coords => {
    curve = new Curve(coords, material, step)
    curveMesh.add(curve.mesh)
    curveMesh.add(curve.meshOrigin)
    curveMesh.add(curve.meshDestination)
  })

  rootMesh.add(curveMesh)

However, after making a simple switch as shown below, the warning disappeared: 

[.WebGL-0x7fe61b026400]RENDER WARNING: Render count or primcount is 0.

// please notice here is now Group!
  const curveMesh = new THREE.Group()
  let curve

  allCoords.forEach(coords => {
    curve = new Curve(coords, material, step)
    curveMesh.add(curve.mesh)
    curveMesh.add(curve.meshOrigin)
    curveMesh.add(curve.meshDestination)
  })

  rootMesh.add(curveMesh)

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

The shiny conditional panel fails to evaluate upon initialization

When utilizing conditional panels to dynamically build up my Shiny app, I've noticed that the condition the panel is based on is not initially evaluated. The panel remains visible by default and only becomes hidden after certain actions are taken. Thi ...

javascriptrshiny

Node JS Request Params 500 Error

When generating the URI, everything appears to be in order and the list data is displayed on the page. However, when sending the request in the request method, a 500 error occurs instead of the body being returned. Here is the URI: http://yufluyuinnepal.c ...

javascriptnode.jsecmascript-6

Issue with passing AngularJS controller variable to child directive

I'm struggling with getting my $scope.title inside my directive, even though I've read that directives can inherit objects and variables from their parent scopes. I have a controller with a child directive, but for some reason it's not worki ...

javascriptangularjsangularjs-directiveangularjs-scope

When attempting to clear a specific word or character, the entire text is cleared instead

Currently, I am utilizing fabric js along with reactjs to incorporate text onto the canvas. While the text is successfully added, I encountered an issue when attempting to clear specific characters or selected words, resulting in the whole text being cle ...

javascriptreactjsfabricjs

Achieving Ajax Request Activation through Button Click in Bootstrap

I am currently working on a modal form using Bootstrap that allows users to customize a specific item before adding it to the cart. My issue is that the "Add to Cart" button does not trigger the Ajax request as intended. I have followed a modified version ...

javascriptphpjqueryajaxtwitter-bootstrap

Having trouble transforming my JSON file into a JavaScript object

I have a JSON file with the following structure: { "branding": { "body": { "header_text_color": "#224466", "body_text_color": "##224466", "background_color": &quo ...

javascriptjson

Troubleshooting Problem with JQuery Paginate Plugin Alignment

I have implemented jquery ui 1.10.4 on a web application to paginate and display a specific number of items from an ArrayList on a webpage. However, I am facing an issue where the pagination buttons do not adjust their position when the size of the list ch ...

javajavascriptjqueryhtmlpagination

Trouble with jQuery click event on dynamically generated elements

I have a jQuery function that iterates through each element inside a specified div (#container) and triggers a JavaScript alert whenever a span is clicked. Everything functions correctly when the spans are static. However, when I include code like this: ...

javascriptjqueryhtml

What is the reason behind Angular's refusal to automatically bind data when an object is cloned from another object?

Check out this simple jsfiddle I made to demonstrate my question: fiddle Here is the HTML code snippet: <div ng-controller="MyCtrl"> <div ng-repeat="p in products"> <span ng-click="overwrite(p)">{{ p.id }}: {{ p.name }}& ...

javascriptangularjs

Adjust the dimensions of the bootstrap dropdown to match the dimensions of its textbox

The second textbox features a bootstrap dropdown with extensive content that is overflowing and extending to other textboxes below it. I am looking for a way to resize the dropdown to fit the size of its corresponding textbox. UPDATE: I want the dropdown ...

javascripthtmlcssbootstrap-5

How to retrieve multiple values from a single select dropdown form field using React

In my React Material form, I have a select dropdown that displays options from an array of objects. Each option shows the name field, which is set as the value attribute (cpuParent.name). However, I also need to access the wattage field (cpuParent.wattage) ...

javascriptreactjsmaterial-ui

Tips for combining all filtered items into a single state variable

I have an array of objects containing user data stored in a state variable and a table where these users are displayed. There is a search field where users can type names to search through the list. My question is, when a user types a name, I want to sea ...

javascriptreactjs

Create a parent dropdown class that contains two separate bootstrap dropdowns nested within it

I am encountering an issue with my dropdown menus. I have 2 dropdown menu items under the same parent dropdown class. However, when I click on dropdown action 1, it displays the body of dropdown menu 2 items instead. <!DOCTYPE html> <html> < ...

javascriptjquerytwitter-bootstrapdrop-down-menu

Utilize the keyof operator on a nullable property

Is there a way to utilize keyof in defining function parameters based on an optional field within an Object, while also including a default value? interface test { example?: { choice1: string, choice2: string } } function sample(param: keyof ...

javascripttypescript

django leaflet - dynamically adjusting controls on HTML page with the click of a button

Presently, I am utilizing django-leaflet along with leaflet-draw controls. My goal is to make the draw controls accessible (and add them to the map) based on a specific event, such as toggling a button. Below is a basic jQuery structure that I currently h ...

javascriptjqueryhtmldjangoleaflet

Format for displaying node exceptions

In the world of Node.js, failing to catch a thrown exception results in a default display that looks like this: C:\tptp-parser\index.js:19 throw e ^ SyntaxError: Unknown language (33:7) at err (C:\tptp-parser\index ...

javascriptnode.jsexception

Filtering data from an Ajax request in Angular using a filter function with JSON

Hi everyone, I recently started learning AngularJS and created a basic item list with search functionality and pagination. Everything was working smoothly, so I decided to move my list outside the controller and store it as a JSON file. Here's what ...

javascriptajaxjsonangularjs

Eliminating specific classes targeted by a jQuery attribute selector within the outcome of another jQuery attribute selector

I am facing a simple issue where I need to target all classes that end with a specific string on elements within a class ending with another specific string, and then remove those targeted classes. While the following code is close to what I want, it does ...

javascriptjquery

Seeking assistance with sending variables to a dialog in Angular 2

Currently facing an issue where I need to pass the URL id from the previous page visited by a user to a service that can be referenced in a dialog. issuer.service.ts import { Injectable, EventEmitter } from '@angular/core'; import { Observabl ...

javascripthtmlangular

Using ReactJS to dynamically append tags and content to react-dom and then refresh

As a newcomer to reactJS, I am currently working on building a react app presentation using spectacle. The unique aspect of this project is that the content and number of slides for the presentation are dynamic and fetched from a server. These slides come ...

javascriptreactjsspectacle