Проблемы с Three.Points; непрозрачность, размер и вращение - PullRequest
Новая
       62

Проблемы с Three.Points; непрозрачность, размер и вращение

0 голосов
/ 05 января 2019

Да, еще вопрос по поводу Three.points. Некоторое время у меня были проблемы, пытаясь выяснить, как настроить непрозрачность, размер и вращение на некоторое время. Я взял перерыв, чтобы работать над другими областями моего кода, и я вернулся к нему.

Моя проблема сейчас в том, что после моего предыдущего вопроса об этом я немного продвинулся в попытке заставить его работать, но я столкнулся с проблемой выдвижения точек, потому что я незнаком с этим методом или заставляет частицы происходить.

Это тупая версия моего кода, так что, надеюсь, это поможет; 

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);

, который не имеет никаких проблем, но ограничивает функциональность только позиционированием и т. Д. Вероятно, есть несколько других проблем, которые я вызываю, о которых я на самом деле не знаю, но как мне поступить с этим или исправить текущие проблемы, которые у меня возникают?

(Часть 2 этого поста: .points непрозрачность / размер в течение трех. Js )

1 Ответ

0 голосов
/ 05 января 2019

Просто пример использования 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>
...