Is it possible to add multiple voxels (cubes with different textures) to the same scene in a more efficient manner?
When I try to add more than 500 voxels, I encounter serious performance issues.
Below is the code I am currently using:
texture = createTexture(voxel.texture, color, voxelSize);
material = new THREE.MeshBasicMaterial({ map: texture });
mesh = new THREE.Mesh(new THREE.CubeGeometry(voxelSize, voxelSize, voxelSize, 1, 1, 1, material), faceMaterial);
scene.add(mesh);
To optimize performance, consolidate all the cubes into one unified geometry shape.
For a practical demonstration, refer to the following sample:
At last, I successfully merged all cubes into a single geometry.
Prior to this update, I was handling cube intersection with mouse clicks.
I attempted to resolve the issue with the following code snippet, but it did not yield the desired outcome:
Code snippet for adding geometry merge and array with all mesh:
var geometry = new THREE.Geometry();
for( var i = 0; i < voxels.length; i++ ){
var voxel = voxels[i];
color = voxel.color;
texture = textPlaneTexture(voxel.text,color,voxelSize);
material = new THREE.MeshBasicMaterial({ map: texture });
mesh = new THREE.Mesh(new THREE.CubeGeometry(voxelSize, voxelSize, voxelSize, 1, 1, 1, material));
mesh.name = voxel.name;
mesh.position.x = voxel.x * voxelSize + offset_x;
mesh.position.y = voxel.y * voxelSize + offset_y;
mesh.position.z = voxel.z * voxelSize + offset_z;
//
objects.push( mesh );
THREE.GeometryUtils.merge( geometry, mesh );
}
//Add geometry to scene
mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial() );
scene.add( mesh );
...
Double Click Mouse Event
function onDocumentMouseDoubleClick( event ) {
if (event.target instanceof HTMLCanvasElement) {
event.preventDefault();
mouse2D.x = ( event.clientX / widthChart ) * 2 - 1;
mouse2D.y = - ( (parseInt(event.clientY) - offset_mouse_y) / heightChart ) * 2 + 1;
mouse3D = projector.unprojectVector( mouse2D.clone(), camera );
ray.direction = mouse3D.subSelf( camera.position ).normalize();
var intersects = ray.intersectObjects( objects );
if ( intersects.length > 0 ) {
if ((intersects[ 0 ].object.name != 'undefined') && (intersects[ 0 ].object.name != '')) {
//Object clicked
};
};
};
};
Consider the MongoDB collection 'users' with the following document: { _id: 1, name: { first: 'John', last: 'Backus' }, birth: new Date('Dec 03, 1924'), death: new Date('Mar 1 ...
At the moment, I am utilizing the jQuery script below: $("TD.info > font").text(); when this specific HTML structure is present on a webpage: <td class="info"> <font> 3001474535 </font> </td> I had the idea to tweak t ...
Experimenting with the Three.js & Dat.gui libraries, I aim to access the values from my GUIController within my startAnimationLoop() GUIController import * as dat from 'dat.gui'; export default ({ gui, title }) => { var gui = new d ...
Looking at the JSON structure I have: { "firstArrayOfJSON": [ { "something" : "something" }, { "another" : "another" }, { "secondArrayOfJson" : [ ...
I'm attempting to develop a straightforward script that converts RGB-16 colors to RGB-8. The script is functioning properly, but I'm having trouble converting it into a function that can handle two different palettes. Whenever I try using palette ...
Here are two arrays I'm working with: arr1 = [ { "key1": "Value1" }, { "key2": "Value2" }, { "key3": "Test3" }, { ...
During my testing, I encountered an issue with buttons inside a repeater within an update panel. When adding asyncpostback triggers for the buttons using <Trigger></Trigger>, an error is generated indicating that the button could not be found. ...
I'm facing an issue while trying to Extend/Push/Merge an object using AngularJS. The problem arises when I attempt to extend the object, as it adds a new object with an Index of 0 and subsequent additions also receive the same index of 0. //Original ...
After spending hours trying to make the code work with the example provided, I find myself unable to get it functioning correctly. Is there anyone who can assist me in putting all of this together so that it runs smoothly? var result,userchoice; functio ...
What is the best way to automatically submit my form once the timer runs out and also when the refresh button is clicked? I have encountered an issue where every time I try to refresh the page, it prompts for user confirmation. If I click cancel, it stay ...
As I am working on developing a message system, I encountered an issue where the message content is not opening correctly in my template when clicking the "See" button. My intention is to implement an Ajax call that will replace the content with jQuery .te ...
In the scenario where a slider has been created and the value is being changed using a mouse, the challenge is how to utilize these values as variables in the global scope. It is important that this variable updates to the new value when the slider is ad ...
Recently I delved into game development using HTML5/CSS/JS and embarked on a small project. Check out the game here at this AWS storage link: If you open the game and press SPACE, you'll notice that the ball starts moving with occasional brief pauses ...
I want to implement a form that displays tooltips whenever a user clicks or focuses on an input field, and the tooltip should disappear when the user clicks elsewhere. While I understand the basics of using JavaScript's getElementById and click event ...
Currently, I am working on a project using create-react-app and attempting to perform unit testing on a component from office-ui-fabric-react using Jest and Enzyme. The most recent version of office-ui-fabric-react utilizes es6 syntax which is causing iss ...
I recently came across an amazing example of a server-side ColdFusion jQuery datatable on this website: Check it out here However, I am facing an issue with adding a second table in the lookup. Specifically, while the primary table lists location_id, I al ...
Documentation provided by Chai as Promised indicates the following: Note: when using promise assertions, either return the promise or notify(done) must be used. Examples from the site demonstrate this concept: return doSomethingAsync().should.eventua ...
When using *ngFor, I am facing an issue with fetching data from my component.ts to my component.html Interestingly, the same method works for one class but not for another. Let's take a look at my service class: export class FoodListService { priv ...
I'm having an issue with referencing the jQuery library in a master page. Here is how I am including it: <script type="text/javascript" src="../../Scripts/jquery-1.4.1.js"> After loading the page, I only see a blank screen. The HTML code is th ...
I'm currently working on a progress bar implementation where the progress status is determined by the submitAction method. The value for the progress bar is constantly being updated in this method. Here's my code: 1. Parent Component <templa ...