どのようthreejsキャンバスに

Question

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

を煙の色を変更するには、私はthreejsとHTMLキャンバスに新しいです。フィドルでは、あなたは私が白またはグレー...

に黒が

どこから来ている私は理解して傾ける...私は青い煙と pngを使用してみましたが、それはまだ黒レンダリングすることを変更することができますどのように黒煙を見ることができます

ありがとうございます！

   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

不透明度値T IはuがDEMO

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

smoketextureに白に影や色の変更をしたくない場合はMeshLambertMaterialが反応するので、これは煙の上にいくつかのことのスポットライトを使用するか、またはMeshBasicMaterialを使用して推測します明るくないので、 のライトがなくても、あなたはその色を見ることができず、黒く見えます！同じことがMeshPhongMaterialにも当てはまります。まだ

MeshBasicMaterialが照明に反応するが、進値と不透明度が現在私は、彼らがレンダリングする必要がありますが、それは動作しませんどのように考えるかに設定されている一定の色

Source from SO answer

Answer 2

ライン45：

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

変更マゼンタの色値：で

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

使用進値

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

あなたを見ることができるようにできますediあまりに