Exploring Particles with three.js

Could you please help me understand why there are no particles visible in this code snippet? I followed a tutorial and it all seems correct.

(function() {

var camera, scene, renderer;

init();
animate();

function init() {

    scene = new THREE.Scene();
    var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
    var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
    camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
    scene.add(camera);
    camera.position.set(2,2,10);
    camera.lookAt(scene.position);
    console.log(scene.position);

    var geometry = new THREE.CubeGeometry(1,1,1);
    var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
    var cube = new THREE.Mesh( geometry, material );
    scene.add( cube );

    var pGeometry = new THREE.Geometry();
    for (var p = 0; p < 2000; p++) {
        var particle = new THREE.Vector3(Math.random() * 50 - 25, Math.random() * 50 - 25, Math.random() * 50 - 25);
        pGeometry.vertices.push(particle);
    }
    var pMaterial = new THREE.ParticleBasicMaterial({ color: 0xfff, size: 1 });
    var pSystem = new THREE.ParticleSystem(pGeometry, pMaterial);
    scene.add(pSystem);

    renderer = new THREE.CanvasRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);

}

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);

}

})();

Link to the fiddle

Answer №1

CanvasRenderer does not have compatibility with ParticleSystem. It is recommended to utilize WebGLRenderer instead.

If you must use CanvasRenderer, refer to for guidance on utilizing Sprites instead.

Currently using three.js r.64

Answer №2

Just a quick heads up, at the moment IE11's WebGL implementation has an issue with rendering points accurately. This affects particles in Three.js shaders, making them appear as very tiny squares or even invisible if you're not careful ;)

I've heard that the upcoming updates for IE will address this issue and finally allow users to adjust point sizes and use bitmaps with them.

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

"Array.Find function encounters issues when unable to locate a specific string within the Array

Currently, I am utilizing an array.find function to search for the BreakdownPalletID when the itemScan value matches a SKU in the array. However, if there is no match found, my application throws a 'Cannot read property breakdownPalletID of undefined& ...

Discover the ultimate solution to disable JSHint error in the amazing Webstorm

I am encountering an error with my test files. The error message states: I see an expression instead of an assignment or function call. This error is being generated by the Chai library asserts. Is there a way to disable this warning in Webstorm? It high ...

Maintain the proportion of the browser window when reducing its size

<html> <head> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <img src="spacer--1200x800.png" width="1200" height="800" /> </body> </html> This section contains CSS ...

ng-click not functioning correctly within templateUrl directive

Apologies if this appears to be a silly question, but I am new to Angular. I am facing an issue with an ng-click event that was functioning correctly until I moved the code into a directive. I suspect it has something to do with the scope, but I'm una ...

What is the most effective way to inform the user when the nodeJS server can be accessed through socketIO?

I have developed a web app that indicates to the user when the server is online for data submission. Although the current code functions properly for single-user interaction, I am facing an issue where one user's connection or disconnection directly i ...

Validating dropdown lists with Jquery

Custom Dropdownlist: <div class="col-md-2"> <div class="form-group"> <label for="field-3" class="control-label">Priority</label> <select id="lstpriority" class="custom-selectpicker" data-live-search="true" da ...

What causes a Module Error to occur in my AngularJS application when I attempt to include multiple routes?

When there is a single .when() route in my app.js, the testApp module loads successfully and the site functions as expected. However, if I add additional routes (such as about and contact) using .when(), the module fails to load. Here is the error message ...

In order to comply with JSX syntax rules in Gatsby.js, it is necessary to enclose adjacent elements

I want to apologize beforehand for the code quality. Every time I attempt to insert my HTML code into the Gatsby.js project on the index.js page, I encounter this error: ERROR in ./src/components/section3.js Module build failed (from ./node_modules/gatsb ...

Formik's handleChange function is causing an error stating "TypeError: null is not an object (evaluating '_a.type')" specifically when used in conjunction with the onChange event in DateInput

When using the handleChange function from Formik with the DateInput component in "semantic-ui-calendar-react", I encountered an error upon selecting a date. https://i.stack.imgur.com/l56hP.jpg shows the console output related to the error. AddWishlistFor ...

JavaScript/AJAX Functionality Only Operates Correctly During Debugging

I am currently facing an issue with dynamically populating a website. The code works perfectly when I step through it, but it fails to work as intended on page load. Here is the relevant code snippet: <body onload="populate_all(string)";> function ...

Unable to get jQuery waypoints to function on local server

Currently, I am working with jQuery. I downloaded an example shortcut for infinite scroll from jQuery Waypoints and tried to use it. However, when the page reaches the end, the web console displays the following error: XMLHttpRequest cannot load file:// ...

Wait until the user submits the form before activating Angular validations, and do not display any validation messages if the user deletes text from a text box

I am looking to implement angular validations that are only triggered after the user clicks on submit. I want the validations to remain hidden if the user removes text from a textbox after submitting it. Here is what I need: - Validations should not be dis ...

Generating a new object from a TypeScript class using JavaScript

Currently, I am facing an issue while attempting to call a JavaScript class from TypeScript as the compiler (VS) seems to be having some trouble. The particular class in question is InfoBox, but unfortunately, I have not been able to locate a TypeScript d ...

Determining the query count in a MongoDB collection using Node.js

Exploring the world of MongoDb, I have embarked on a project to create a small phonebook application. This application allows users to add and remove entries with a name and phone number. While I have successfully implemented the functionality to add and d ...

Exploring depths of data with AngularJS: multiple levels of drilling

I am new to AngularJs and facing a challenge with a complex JSON structure that I need to use for an auto complete feature. I want to create an auto complete for only the child elements within the structure, without displaying the parent categories. Acce ...

Achieving a Subset Using Functional Programming

Looking for suggestions on implementing a function that takes an array A containing n elements and a number k as input. The function should return an array consisting of all subsets of size k from A, with each subset represented as an array. Please define ...

Using Typescript to collapse the Bootstrap navbar through programming

I've managed to make Bootstrap's navbar collapse successfully using the data-toggle and data-target attributes on each li element. If you're interested, here is a SO answer that explains a way to achieve this without modifying every single ...

The issue with mocking collections using JSON files in Backbone is that it is not properly triggering the success callbacks in

For my project, I am exploring the use of .json files to mock GET requests in a backbone collection. Here is an example of my sample file: [ { "id": '11111', "name": "Abdominal Discomfort", "favori ...

Updating an Element in an Array with Mongoose

Is there a more efficient way to update an existing element in an array without fetching the database multiple times? If you have any suggestions, I would greatly appreciate it. Thank you! const updateStock = async (symbol, webApiData) => { try { ...

External JavaScript functions remain hidden from the HTML page

Having issues with JavaScript functions. I created functions in a separate file named index.js, but when I use them in index.html like "onclick = function()", the file doesn't recognize the function. <!doctype html> <html lang="{{ app()-> ...