Question

我是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

我想在烟雾中使用一些东西聚光灯，或者如果你不想要阴影并在smoketexture中将颜色改为白色，则使用MeshBasicMaterial DEMO

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

这是因为MeshLambertMaterial对照明没有反应   光，你看不到它的颜色，你看它黑了！ MeshPhongMaterial也是如此。

MeshBasicMaterial不会对灯光做出反应，但会有一个恒定的颜色

Source from SO answer

Answer 2

第45行：

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

在以下位置使用十六进制值：

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

将颜色值更改为品红色：

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

如您所见，您也可以编辑不透明度值

如何更改threejs画布上的烟雾颜色

2 个答案: