Utilizing MeshPhongMaterial in THREE.js for Particle Material with Size Adjustment

My goal is to create particles that exhibit the characteristics of a Phong material, which means they react to light. I have been using the "createMultiMaterialObject" method to achieve this, and it has worked well for the most part. However, I have encountered an issue where the particle size is being ignored, resulting in strange triangle shapes instead of the intended effect. Here is the code I have been using:

var ringGeometry = new THREE.TorusGeometry( rad, ringSize, 1, 200, Math.PI * 2);
materials = [
p2paterial = new THREE.MeshPhongMaterial({shading: THREE.SmoothShading, blending:     THREE.AdditiveBlending, transparent: true, color: ringColour, ambient: 0x000000, specular:     0xffffff, shininess: 1, vertexColors: false  } ),
pmaterial = new THREE.ParticleBasicMaterial( { size: 1, transparent: true,     vertexColors: true  } )
        ];
singleRing = new THREE.SceneUtils.createMultiMaterialObject(ringGeometry, materials);

I'm seeking guidance on how to adjust the particle size to be 1 each to achieve the desired effect. I believe it's just a matter of tweaking an option, and I'm close to reaching my goal.

javascriptthree.jswebgl

Answer №1

Consider using this code snippet:

let torusGeometry = new THREE.TorusGeometry(radius, ringSize, 1, 200, Math.PI * 2);

let phongMaterial = new THREE.MeshPhongMaterial({
    shading: THREE.SmoothShading,
    blending: THREE.AdditiveBlending,
    transparent: true,
    color: ringColour,
    ambient: 0x000000,
    specular: 0xffffff,
    shininess: 1,
    vertexColors: false
});
let mesh = new THREE.Mesh(torusGeometry, phongMaterial);
scene.add(mesh);

let particleMaterial = new THREE.ParticleBasicMaterial({
    size: 1, 
    transparent: true, 
    vertexColors: true
});
let particles = new THREE.ParticleSystem(torusGeometry, particleMaterial);
scene.add(particles);

Answer №2

Although I haven't had much experience with three.js, I decided to play around with your fiddle and made some adjustments to the RadialSegments value in the TorusGeometry declaration. This resulted in a display that resembled particles...

var geometry = new THREE.TorusGeometry( 10, 10, .5, 200, Math.PI * 2);

http://jsfiddle.net/sJZeH/

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

Utilizing Node.js to Retrieve a POST Request JSON and Modify its Format

Received an incoming Post request in JSON format like this: [{"username":"ali","hair_color":"brown","height":1.2},{"username":"marc","hair_color":"blue","height":1.4},{"username":"zehua","hair_color":"black","height":1.8}] Need to transform it into the f ...

javascriptnode.js

What is the best way to combine two JSON objects within the same array based on their IDs located in another array?

I am dealing with a large JSON array that contains multiple objects and arrays. I need to combine two types of objects together. For example, numbers 1-10 represent "Froms" and numbers 11-20 represent "Tos". I want to merge Froms and Tos, displaying them ...

javascriptangularjsjsonionic-frameworkangular

Exploring the different pages in React js

I am currently working on implementing a button in React Js that, when clicked, should navigate to another screen. However, I keep encountering an error: TypeError: Cannot read property 'push' of undefined. I have tried various solutions but noth ...

javascriptreactjsreact-router-dom

Is there a way to enable my progressBar to be draggable so that when clicked, it adjusts to a new currentTime position

I am trying to create a seekable audio progress bar in React, but I am facing issues with the seek function not working as intended. Below is my main play buttons file where all the code related to the progress bar is located. import React, { Component } ...

javascriptnode.jsreactjsprogress-barhtml5-audio

Capture Your Scene with Three.js

I am facing an issue where I need to capture a screenshot of a website. I have tried using html2canvas and it is working fine. However, the problem arises because I am using both THREE.WebGLRenderer and THREE.CSS3DRenderer (for HTML in webGL). The screen ...

javascriptthree.jsscreenshothtmlhtml2canvas

Angular's focus function poses certain challenges that need to be addressed

I am seeking assistance as a new programmer facing a beginner's challenge. I have two inputs and I would like to enter a series of numbers in the first input (DO) and have them automatically populate in the second input (communal code). Inputs: http ...

javascriptangularinputfocus

The formatter/render function in Angular Directive fails to refresh

Recently, I created a straightforward directive that converts minutes into a range slider while also displaying hours and minutes alongside. However, I encountered an issue where although moving the range slider updates the scope triggering Watch and Pars ...

javascriptangularjsangularjs-directive

My strategies for addressing caching problems in my ReactJS site

Currently tackling ReactJS projects on a website with the URL . Things seem to be running smoothly, until my SEO-savvy friend pointed out an issue with caches. He advised me to visit this cache URL: , where Google should display the main page but instead s ...

javascriptreactjscachingseo

Three.js - Move objects around with ease (XZ plane)

I am a beginner with three.js and I have been working with the example from to enable dragging and dropping objects. However, I am facing an issue where I want the objects to only move along the XZ plane and not the Y axis. I am unsure of how to restrict ...

three.js2d

How to dynamically set Bootstrap navbar item as active based on current filename?

Currently, as I construct my website using the bootstrap framework, I am facing a minor challenge. I want to activate a menu item based on the filename by utilizing an if statement. For instance, when the filename is "about," the "about" tab should be act ...

javascripthtml

Enhance your MongoDB with the power of JQuery and ExpressJS combined with the magic

I've successfully implemented a delete function using type: 'DELETE', and now I'm attempting to create an UPDATE function. However, I'm unsure if I'm approaching this correctly. Here's the code I've written so far: ...

javascriptajaxmongodbexpresspost

The NodeJS and Python-Shell .run function fails to display the standard output

I am currently working with NodeJS and a Python script. To retrieve results from my Python script, I have been using Python-Shell which you can find detailed documentation for at: github.com/extrabacon/python-shell Typically, to get prints from the scrip ...

javascriptpythonnode.jsshell

mongodb cannot locate the schema method within the nested container

Trying to access a method of a schema stored inside a mixed container has presented a challenge. The scenario is as follows: var CaseSchema = mongoose.Schema({ caseContent : {}, object : {type:String, default : "null"}, collision : {type : Boo ...

javascriptnode.jsmongodbmongoose

Working with repeated fields in Google protobuf in JavaScript

Consider this scenario: you have a google protobuf message called Customer with a repeated field as shown below. message Customer { repeated int32 items = 1; } What is the procedure for setting the repeated items field in javascript? ...

javascriptarraysprotocol-buffersproto

What is the reason for my result showing as Object { } rather than MyObj { }?

When utilizing the web development tools console, if a browser object is typed, it will return as "console." > console Console { } > console.log(console) undefined > Console { } This behavior applies to all browser objects. However, when I try ...

javascript

"Trouble arises when event listener fails to function following an append operation

Recently, I delved into the world of HTML/CSS and jQuery in an attempt to create a simple web game. Below is a snippet of my HTML code: function playGame() { var theLine = "<div id = \"line\">"; for (var i = 0; i < 9; ...

javascriptjqueryhtml

Utilize the split functionality only when the character you want to split by is found in

Consider the following situation: I have 6 string variables that contain special characters. I stored these 6 strings in an array like this: arr=[str1,str2,str3...); arr=escape(arr); due to the presence of special characters in some string variables. ...

javascriptjquery

Route functions cannot be hoisted in the Express framework

Can someone shed light on why my Express routes aren't hoisted? I keep encountering this error: throw new TypeError('Router.use() requires middleware functions'); The error is not present in the following file: var express = requir ...

javascriptnode.jsexpressnodemon

Display the names of files depending on the selection made in the drop-down menu

In order to utilize a value from a select box for a PHP function later on the page, I am seeking assistance. Within my index.php file, there is a standard select drop down containing folder names as values and options. After selecting a folder, I aim to e ...

javascriptphpjqueryhtmlajax

Some images fail to load on Ember in the production environment

I am facing an issue with my Ember-cli 1.13 application where all images are loading correctly except those in a specific component. The component is named "list-item" and is defined as follows: {{list-item url="list-url" name="List Name" price="240"}} I ...

javascriptherokuember.js