Question

是的，另一个关于三点的问题。我已经有一段时间了，现在试图找出如何调整不透明度，大小和旋转度的问题。我休息了一段时间来处理我的代码的其他方面，我又回到了上面。

我的问题是，在我对它的先前问题提出疑问之后，我在尝试使其工作方面取得了一些进展，但是由于我不熟悉此方法，因此遇到了提出问题的问题或使粒子发生。

这是我的代码的精简版，因此希望可以理解这一点；

var dirs = [], parts = [], container = document.createElement('div');
  document.body.appendChild( container );
  var renderer, camera, scene
var cameramode, composer  
var particleSystem = [], particleCount = 15;
for (var i = 0; i < particleCount; ++ i) {
  var pgeometry = new THREE.Geometry();
  var pMaterial = new THREE.PointsMaterial({
    map: new THREE.TextureLoader().load("x.png"),
    blending: THREE.screenBlending,
    size: 60, depthTest: true,
    transparent: true, opacity: 1,
    depthTest: false, sizeAttenuation: true
  });
}

init();
animate();
update(); 

function init() {
 for (var p = 0; p < particleCount; p++) {
  pX = Math.floor(Math.random()*2) == 1 ? 1 : -1,
  pY = Math.floor(Math.random()*2) == 1 ? 1 : -1,
  pZ = Math.floor(Math.random()*2) == 1 ? 1 : -1;
  var particle = new THREE.Vector3(pX, pY, pZ);
 }
 particle.velocity = new THREE.Vector3(0, 0, 0);
 geometry.vertices.push(particle);
 var points = new THREE.Points(geometry, pMaterial);
 scene.add(points);
 particleSystem.push(points);
}

function animate(){
  requestAnimationFrame( animate );
  controls.update(), composer.render();
  update(), render();
};

function update() {
  requestAnimationFrame( animate );

  while (pCount--) {
    var points   = particleSystem[i];

    if (particle.x < -150) {
      particle.z = (Math.floor(Math.random()*2) == 1 ? 1 : -1)* 20;
      particle.x = (Math.floor(Math.random()*2) == 1 ? 1 : -1)* 20;
      particle.velocity.x = 0, particle.velocity.y = 0, particle.velocity.z = 0};
    if (particle.z < -150) {
      particle.z = (Math.floor(Math.random()*2) == 1 ? 1 : -1)* 20;
      particle.x = (Math.floor(Math.random()*2) == 1 ? 1 : -1)* 20;
      particle.velocity.x = 0, particle.velocity.y = 0, particle.velocity.z = 0 };
    if (particle.y < -150) {
      particle.z = (Math.floor(Math.random()*2) == 1 ? 1 : -1)* 20;
      particle.x = (Math.floor(Math.random()*2) == 1 ? 1 : -1)* 20;
      particle.velocity.x = 0, particle.velocity.y = 0, particle.velocity.z = 0 };

    if (pCount%2 == 0){
      if (particle.x < 0){
        particle.velocity.x -= (Math.floor(Math.random()*2))*0.002;
        particle.velocity.y -= (Math.floor(Math.random()*2))*0.0001;
        particle.velocity.z -= (Math.sin(Math.random()*2))*0.001 };
      if (particle.x > 0){
        particle.velocity.x += (Math.floor(Math.random()*2))*0.002;
        particle.velocity.y += (Math.floor(Math.random()*2))*0.00001;
        particle.velocity.z -= (Math.random(Math.random()*2))*0.005 };
    } else {
      if (particle.x < 0){
        particle.velocity.z += (Math.floor(Math.random()*2))*0.002;
        particle.velocity.y += (Math.floor(Math.random()*2))*0.0001;
        particle.velocity.x -= (Math.random(Math.random()*2))*0.001 };
      if (particle.x > 0){
        particle.velocity.z -= (Math.floor(Math.random()*2))*0.002;
        particle.velocity.y -= (Math.floor(Math.random()*2))*0.00001;
        particle.velocity.x += (Math.random(Math.random()*2))*0.005 }};

    if (pCount%3 == 0){
      if (particle.velocity.z > 0){
        particle.velocity.y -= (Math.floor(Math.random()*2))*0.0001;
        particle.velocity.x -= (Math.random(Math.random()*2))*0.005 };
      if (particle.velocity.z < 0){
        particle.velocity.y += (Math.floor(Math.random()*2))*0.00001;
        particle.velocity.x -= (Math.random(Math.random()*2))*0.005 / 2}};
    if (pCount%5 == 0){
      if (particle.velocity.z > 0){
        particle.velocity.y -= (Math.floor(Math.random()*2))*0.0001;
        particle.velocity.z += (Math.random(Math.random()*2))*0.005 };
      if (particle.velocity.z < 0){
        particle.velocity.y += (Math.floor(Math.random()*2))*0.00001;
        particle.velocity.z += (Math.random(Math.random()*2))*0.005 }};
    if (pCount%7 == 0){
      if (particle.velocity.z > 0){
        particle.velocity.y -= (Math.floor(Math.random()*2))*0.0001;
        particle.velocity.x -= (Math.random(Math.random()*2))*0.005};
      if (particle.velocity.z < 0){
        particle.velocity.y += (Math.floor(Math.random()*2))*0.00001;
        particle.velocity.x -= (Math.random(Math.random()*2))*0.005 / 2}};
  }

  particleSystem.geometry.verticesNeedUpdate = true;
  particleSystem.rotation.y += (Math.random()*0.001)
} //animate end

renderer.setAnimationLoop(() => {
  update();
  composer.render(scene, camera);
});

function render()
{
  uniforms.tAudioData.value.needsUpdate = true;
  composer.render();
}

我在解决位置，粒子，点，等方面一直遇到问题，我不确定如何进行任何调整。我当前的问题是通过这种方法解决点的位置；

for (var p = 0; p < particleCount; p++) {
  pX = Math.floor(Math.random()*2) == 1 ? 1 : -1,
  pY = Math.floor(Math.random()*2) == 1 ? 1 : -1,
  pZ = Math.floor(Math.random()*2) == 1 ? 1 : -1;
  var particle = new THREE.Vector3(pX, pY, pZ);
}
geometry.vertices.push(particle);
var points = new THREE.Points(geometry, pMaterial);
scene.add(points);
particleSystem.push(points);

没有任何问题，但功能仅限于定位，速度等。我可能还引起了一些其他问题，但我并没有真正意识到这些问题，但是我将如何去做或解决当前存在的问题？

（本文的第二部分：.points opacity / size within three.js）

Answer 1

仅是将THREE.BufferGeometry()与属性一起使用的示例，而不是THREE.Geometry()。

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 50);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var pointsDimension = 100;

var points = [];
var size = [];
var opacity = [];
var speed = [];
for (let i = 0; i < 1000; i++) {
  points.push(new THREE.Vector3(
    Math.random(),
    Math.random(),
    Math.random()
  ).multiplyScalar(pointsDimension));
  size.push(Math.random() * 5 + 5);
  opacity.push(Math.random() * Math.PI);
  speed.push(Math.random() * 10 + 10);
}

var geom = new THREE.BufferGeometry().setFromPoints(points);
geom.addAttribute("size", new THREE.BufferAttribute(new Float32Array(size), 1));
geom.addAttribute("opacity", new THREE.BufferAttribute(new Float32Array(opacity), 1));
geom.addAttribute("speed", new THREE.BufferAttribute(new Float32Array(speed), 1));
geom.center();

var mat = new THREE.ShaderMaterial({
  uniforms: {
    time: {
      value: 0
    },
    color: {
      value: new THREE.Color(0x00ffff)
    },
    texture: {
      value: new THREE.TextureLoader().load("https://threejs.org/examples/textures/sprites/snowflake2.png")
    }
  },
  vertexShader: `
    uniform float time;
    attribute float size;
    attribute float opacity;
    attribute float speed;
    varying float vOpacity;
    void main() {
      vOpacity = 1.0 - abs(sin(time + opacity));
      vec3 pos = position;
      pos.y = 50. - mod(50. - (position.y - (speed * time)), 100.);
      
      vec4 mvPosition = modelViewMatrix * vec4( pos, 1.0 );
      gl_PointSize = abs(sin(time + size)) * size * ( 300.0 / -mvPosition.z );
      gl_Position = projectionMatrix * mvPosition;
    }
  `,
  fragmentShader: `
    uniform sampler2D texture;
    uniform vec3 color;
    varying float vOpacity;
    void main() {
      gl_FragColor = vec4( color, vOpacity );
      gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord );
    }
  `,
  blending: THREE.AdditiveBlending,
  depthTest: false,
  transparent: true
});

var particles = new THREE.Points(geom, mat);
scene.add(particles);

var clock = new THREE.Clock();

renderer.setAnimationLoop(() => {
  mat.uniforms.time.value = clock.getElapsedTime();
  renderer.render(scene, camera);
})

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>

三点问题；不透明度，大小和旋转

1 个答案: