How to change the smoke color on a threejs canvas

Question

https://jsfiddle.net/j7myybnn/1/

I am new to threejs and html canvases. In the fiddle you can see black smoke how can i change that to white or gray...

I tried using a png with blue smoke but it still renders black... I cant understand where the black is coming from

Thanks!

                var camera, scene, renderer,
                geometry, material, mesh;

            init();
            animate(); 

            function init() {


                clock = new THREE.Clock();

                renderer = new THREE.WebGLRenderer({alpha: true});
                renderer.setSize( window.innerWidth, window.innerHeight );

                scene = new THREE.Scene();

                camera = new THREE.PerspectiveCamera( 100, window.innerWidth / window.innerHeight, 1, 10000 );
                camera.position.z = 1000;
                // scene.add( camera );



                textGeo = new THREE.PlaneGeometry(300,300);
                THREE.ImageUtils.crossOrigin = ''; //Need this to pull in crossdomain images from AWS
                textTexture = THREE.ImageUtils.loadTexture('https://s3-us-west-2.amazonaws.com/s.cdpn.io/95637/quickText.png');
                textMaterial = new THREE.MeshLambertMaterial({color: 0xffffff, opacity: 1, map: textTexture, transparent: true, blending: THREE.AdditiveBlending})
                text = new THREE.Mesh(textGeo,textMaterial);
                text.position.z = 800;
                // scene.add(text);



                smokeTexture = THREE.ImageUtils.loadTexture('assets/img/Smoke-Element2.png');
                smokeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff, opacity: 0.8, map: smokeTexture, transparent: true});
                smokeGeo = new THREE.PlaneGeometry(300,300);
                smokeParticles = [];


                for (p = 0; p < 150; p++) {
                    var particle = new THREE.Mesh(smokeGeo,smokeMaterial);
                    particle.position.set(Math.random()*500-250,Math.random()*100-250,Math.random()*1000-100);
                    particle.rotation.z = Math.random() * 360;
                    scene.add(particle);
                    smokeParticles.push(particle);
                }

                $('.smoke').append( renderer.domElement );

            }

            function animate() {
                // note: three.js includes requestAnimationFrame shim
                delta = clock.getDelta();
                requestAnimationFrame( animate );
                evolveSmoke();
                render();
            }

            function evolveSmoke() {
                var sp = smokeParticles.length;
                while(sp--) {
                    smokeParticles[sp].rotation.z += (delta * 0.2);
                }
            }

            function render() {

                renderer.render( scene, camera );

            }

Answer 1

i guess use some thing spotlight over smoke, or use MeshBasicMaterial if u don't want shadow and change color to white in smoketexture DEMO

new THREE.MeshBasicMaterial({color: "white", opacity: 1, map: textTexture, transparent: true, blending: THREE.AdditiveBlending})

This is because MeshLambertMaterial reacts to lighting so without light, you cannot see its color and u see it black! The same goes for MeshPhongMaterial.

MeshBasicMaterial does not react to lighting but has a constant colour

Source from SO answer

Answer 2

Line 45:

https://jsfiddle.net/c0un7z3r0/y66orud2/1/

Use hex values at:

smokeMaterial = new THREE.MeshLambertMaterial({color: 0x91bcff, opacity: 0.9, map: smokeTexture, transparent: true});

change the colour value to magenta:

smokeMaterial = new THREE.MeshLambertMaterial({color: 0xff00ff, opacity: 0.9, map: smokeTexture, transparent: true});

As you can see you can edit the opacity value too