如何改变一个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帆布

回答

相关问题