生成具有3种相同颜色的阴影的粒子

Question

您好我已经在互联网上搜索过但我还没有找到任何东西，我正在尝试以颗粒形式制作1个地球，混合了3种颜色的粉红色，深粉色和白色等于该图像下来

我需要颜色看起来像这张照片，正常的粉红色，深粉红色和白色

问题是我的Globe留下了1种单色而不是像图像一样的varios，所有的帮助都很感激，谢谢大家一次

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / 
window.innerHeight, 1, 1000);

camera.position.z = 10;
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer({
antialias: true
});

renderer.setClearColor(0x2675AD);

renderer.setSize(window.innerWidth, window.innerHeight);

var globe = document.getElementById('globe')

globe.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var geom = new THREE.SphereBufferGeometry(5, 320, 160);
var colors = [];
var color = new THREE.Color();

var q = 0xC83C84;


for (let i = 0; i < geom.attributes.position.count; i++) {

color.set(Math.random() * q);

color.toArray(colors, i * 3);
}

geom.addAttribute('color', new THREE.BufferAttribute(new 
Float32Array(colors), 3));

var loader = new THREE.TextureLoader();
loader.setCrossOrigin('');
var texture = loader.load('../img/equirectangle_projection.png');
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(1, 1);
var disk = loader.load('../img/circleround.png');

var points = new THREE.Points(geom, new THREE.ShaderMaterial({
vertexColors: THREE.VertexColors,
uniforms: {
visibility: {
  value: texture
},
shift: {
  value: 0
},
shape: {
  value: disk
},
size: {
  value: 0.125
},
scale: {
  value: window.innerHeight / 2
}
},
  vertexShader: `

  uniform float scale;
  uniform float size;

  varying vec2 vUv;
  varying vec3 vColor;

  void main() {

    vUv = uv;
    vColor = color;
    vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
    gl_PointSize = size * ( scale / length( mvPosition.xyz ) );
    gl_Position = projectionMatrix * mvPosition;

    }
    `,
  fragmentShader: `
  uniform sampler2D visibility;
  uniform float shift;
  uniform sampler2D shape;

  varying vec2 vUv;
  varying vec3 vColor;


  void main() {

    vec2 uv = vUv;
    uv.x += shift;
    vec4 v = texture2D(visibility, uv);
    if (length(v.rgb) > 1.0) discard;

    gl_FragColor = vec4( vColor, 1.0 );
    vec4 shapeData = texture2D( shape, gl_PointCoord );
    if (shapeData.a < 0.5) discard;
    gl_FragColor = gl_FragColor * shapeData;

    }
   `,
    transparent: true
    }));
    scene.add(points);

    var blackGlobe = new THREE.Mesh(geom, new 
    THREE.MeshBasicMaterial({
     color: 0x2675AD
     }));
     blackGlobe.scale.setScalar(0.99);
     points.add(blackGlobe);

     var clock = new THREE.Clock();
     var time = 0;

     render();

     function render() {
     requestAnimationFrame(render);
     time += clock.getDelta();

     points.rotation.y  += 0.0009

     renderer.render(scene, camera);

}

Answer 1

您可以使用颜色值数组并随机选择这些值：

var q = ["white", "pink", 0xb2497d, "gray"];
for (let i = 0; i < geom.attributes.position.count; i++) {
  color.set(q[THREE.Math.randInt(0,3)]);
  color.toArray(colors, i * 3);
}

＆＃13;

＆＃13;

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(1.25, 7, 7);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setClearColor(0x080808);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var geom = new THREE.SphereBufferGeometry(5, 120, 60);
var colors = [];
var color = new THREE.Color();
var q = ["white", "pink", 0xb2497d, "gray"];
for (let i = 0; i < geom.attributes.position.count; i++) {
  color.set(q[THREE.Math.randInt(0,3)]);
  color.toArray(colors, i * 3);
}
geom.addAttribute('color', new THREE.BufferAttribute(new Float32Array(colors), 3));

var loader = new THREE.TextureLoader();
loader.setCrossOrigin('');
var texture = loader.load('http://learningthreejs.com/data/2013-09-16-how-to-make-the-earth-in-webgl/demo/bower_components/threex.planets/images/earthspec1k.jpg');
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(1, 1);
var disk = loader.load('https://threejs.org/examples/textures/sprites/circle.png');

var points = new THREE.Points(geom, new THREE.ShaderMaterial({
  vertexColors: THREE.VertexColors,
  uniforms: {
    visibility: {
      value: texture
    },
    shift: {
      value: 0
    },
    shape: {
      value: disk
    },
    size: {
      value: 0.125
    },
    scale: {
      value: window.innerHeight / 2
    }
  },
  vertexShader: `
  				
      uniform float scale;
      uniform float size;
      
      varying vec2 vUv;
      varying vec3 vColor;
      
      void main() {
      
        vUv = uv;
        vColor = color;
        vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
        gl_PointSize = size * ( scale / length( mvPosition.xyz ) );
        gl_Position = projectionMatrix * mvPosition;

      }
  `,
  fragmentShader: `
      uniform sampler2D visibility;
      uniform float shift;
      uniform sampler2D shape;
      
      varying vec2 vUv;
      varying vec3 vColor;
      

      void main() {
      	
        vec2 uv = vUv;
        uv.x += shift;
        vec4 v = texture2D(visibility, uv);
        if (length(v.rgb) > 1.0) discard;

        gl_FragColor = vec4( vColor, 1.0 );
        vec4 shapeData = texture2D( shape, gl_PointCoord );
        if (shapeData.a < 0.5) discard;
        gl_FragColor = gl_FragColor * shapeData;
		
      }
  `,
  transparent: true
}));
scene.add(points);

var blackGlobe = new THREE.Mesh(geom, new THREE.MeshBasicMaterial({
  color: 0x000000
}));
blackGlobe.scale.setScalar(0.99);
points.add(blackGlobe);

var clock = new THREE.Clock();
var time = 0;

render();

function render() {
  requestAnimationFrame(render);
  time += clock.getDelta();
  points.material.uniforms.shift.value = time * 0.1;
  renderer.render(scene, camera);
}

＆＃13;

body {
  overflow: hidden;
  margin: 0;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

＆＃13;

＆＃13;

＆＃13;