如何改變一個threejs帆布

https://jsfiddle.net/j7myybnn/1/如何改變一個threejs帆布

我是新來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); 

      }

來源

2016-09-24 Omar

我想用一些東西聚光燈在吸菸或者使用MeshBasicMaterial如果你不想要的陰影，並改變顏色以白色smoketexture DEMO

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

這是因爲MeshLambertMaterial反應照明，所以沒有光，你不能看到它的顏色，你看到它黑！ MeshPhongMaterial也是如此。

MeshBasicMaterial不反應照明，但具有恆定的顏色

Source from SO answer

來源

2016-09-25 09:06:22 CY5

第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 t時的不透明度值也

來源

2016-09-24 17:14:19

十六進制值和不透明度當前設置如何，我認爲他們應該呈現，但還是不行......你還是搗鼓顯示黑煙 – Omar

這是我需要完成的更好的例子。 https://jsfiddle.net/j7myybnn/1/謝謝！ – Omar

不，我的鏈接顯示紫色煙霧，黑色是他們重疊的地方。比較： https://jsfiddle.net/c0un7z3r0/y66orud2/ 有： https://jsfiddle.net/c0un7z3r0/y66orud2/1/ 如果調整不透明度值會有重疊較少混合並減少黑色。 https://jsfiddle.net/c0un7z3r0/y66orud2/4/ –

如何改變一個threejs帆布

回答

相關問題