Dãy Ngân Hà 3d

[tintuc]

Hôm Nay Thất Tình Nên Làm Hiệu Ứng dãy ngân hà 3d Cho mn xem , mn chỉ Việc Nhấn nút Xem Ở Dưới Là Đc Nếu hình to quá sài đt thì dùng 2 ngón tay thu nhở nó lại còn trên mt chỉ việc click chuột vô để thu nhỏ nó lại

Kết Bạn zalo Trò Truyện Với Mình lúc rảnh =)) : Nhấn Vào Đây

Khung nhập mã cần thử

<iframe src="https://www.nhaccuatui.com/mh/background/xFre2rAcLCTk" width="1" height="1" frameborder="0" allowfullscreen allow="autoplay"></iframe>
<script async src="https://ga.jspm.io/npm:es-module-shims@1.4.3/dist/es-module-shims.js" crossorigin="anonymous"></script>
<script type='importmap-shim'>
  {
    "imports": {
      "three": "https://unpkg.com/three@0.146.0/build/three.module.js",
      "three/": "https://unpkg.com/three@0.146.0/"
    }
  }
</script>
<script defer type='module-shim'>
  import * as THREE from "three";
  import {OrbitControls} from "three/examples/jsm/controls/OrbitControls.js";
  import { GPUComputationRenderer } from 'three/examples/jsm/misc/GPUComputationRenderer.js';
  
  class GPGPU extends GPUComputationRenderer{
    constructor(w, h, renderer){
      super(w, h, renderer);
      function fillPositionalTextures(){
        
      }
    }
  }

let scene = new THREE.Scene();
  scene.background = new THREE.Color(0x160016);
  let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
  camera.position.set(0, 4, 21);
  let renderer = new THREE.WebGLRenderer();
  renderer.setSize(innerWidth, innerHeight);
  //document.body.appendChild(renderer.domElement);

let controls = new OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true;
  controls.enablePan = false;

let gu = {
    time: {value: 0}
  }

let sizes = [];
  let shift = [];
  let pushShift = () => {
    shift.push(
      Math.random() * Math.PI, 
      Math.random() * Math.PI * 2, 
      (Math.random() * 0.9 + 0.1) * Math.PI * 0.1,
      Math.random() * 0.9 + 0.1
    );
  }
  let pts = new Array(25000).fill().map(p => {
    sizes.push(Math.random() * 1.5 + 0.5);
    pushShift();
    return new THREE.Vector3().randomDirection().multiplyScalar(Math.random() * 0.5 + 9.5);
  })
  for(let i = 0; i < 50000; i++){
    let r = 10, R = 40;
    let rand = Math.pow(Math.random(), 1.5);
    let radius = Math.sqrt(R * R * rand + (1 - rand) * r * r);
    pts.push(new THREE.Vector3().setFromCylindricalCoords(radius, Math.random() * 2 * Math.PI, (Math.random() - 0.5) * 2 ));
    sizes.push(Math.random() * 1.5 + 0.5);
    pushShift();
  }

let g = new THREE.BufferGeometry().setFromPoints(pts);
  g.setAttribute("sizes", new THREE.Float32BufferAttribute(sizes, 1));
  g.setAttribute("shift", new THREE.Float32BufferAttribute(shift, 4));
  let m = new THREE.PointsMaterial({
    size: 0.1,
    transparent: true,
    blending: THREE.AdditiveBlending,
    onBeforeCompile: shader => {
      shader.uniforms.time = gu.time;
      shader.vertexShader = `
        uniform float time;
        attribute float sizes;
        attribute vec4 shift;
        varying vec3 vColor;
        ${shader.vertexShader}
      `.replace(
        `gl_PointSize = size;`,
        `gl_PointSize = size * sizes;`
      ).replace(
        `#include <color_vertex>`,
        `#include <color_vertex>
          float d = length(abs(position) / vec3(40., 10., 40));
          d = clamp(d, 0., 1.);
          vColor = mix(vec3(227., 155., 0.), vec3(100., 50., 255.), d) / 255.;
        `
      ).replace(
        `#include <begin_vertex>`,
        `#include <begin_vertex>
          float t = time;
          float moveT = mod(shift.x + shift.z * t, PI2);
          float moveS = mod(shift.y + shift.z * t, PI2);
          transformed += vec3(cos(moveS) * sin(moveT), cos(moveT), sin(moveS) * sin(moveT)) * shift.a;
        `
      );
      console.log(shader.vertexShader);
      shader.fragmentShader = `
        varying vec3 vColor;
        ${shader.fragmentShader}
      `.replace(
        `#include <clipping_planes_fragment>`,
        `#include <clipping_planes_fragment>
          float d = length(gl_PointCoord.xy - 0.5);
          if (d > 0.5) discard;
        `
      ).replace(
        `vec4 diffuseColor = vec4( diffuse, opacity );`,
        `vec4 diffuseColor = vec4( vColor, smoothstep(0.5, 0.2, d) * 0.5 + 0.5 );`
      );
      console.log(shader.fragmentShader);
    }
  });
  let p = new THREE.Points(g, m);
  p.rotation.order = "ZYX";
  p.rotation.z = 0.2;
  scene.add(p)

let clock = new THREE.Clock();

renderer.setAnimationLoop(() => {
    controls.update();
    let t = clock.getElapsedTime() * 0.5;
    gu.time.value = t * Math.PI;
    p.rotation.y = t * 0.05;
    renderer.render(scene, camera);
  });

window.addEventListener("resize", event => {
    camera.aspect = innerWidth / innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(innerWidth, innerHeight);
  })
  dispatchEvent(new Event('resize'))
  document.body.prepend(renderer.domElement)
</script>

Nhấn Vố Đây Để Xem

[/tintuc]

Xem thêm acc