Advertisement
Guest User

ThreeJS Code

a guest
Feb 9th, 2023
94
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 4.98 KB | Source Code | 0 0
  1. import * as THREE from "three"
  2. /* import GUI from "lil-gui" */
  3. import Stats from "three/examples/jsm/libs/stats.module"
  4. import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
  5. import "../src/style.css"
  6.  
  7. // Global variables
  8. let camera, scene, renderer, geom, colors, color, q, loader, texture, disk, points, blackGlobe, controls
  9.  
  10. // Window half size
  11. let windowHalfX = window.innerWidth / 2
  12. let windowHalfY = window.innerHeight / 2
  13.  
  14. // Time based on animate instead of Machine performance
  15. let clock = new THREE.Clock()
  16. let time = 0
  17.  
  18. // Instanciate GUI
  19. /* const gui = new GUI() */
  20.  
  21. // Stats panel for performance monitoring
  22. const stats = Stats()
  23. document.body.appendChild(stats.dom)
  24.  
  25. init()
  26. animate()
  27. /* createPanel() */
  28.  
  29. function init() {
  30.     camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 5000)
  31.     camera.position.z = 10
  32.     camera.far = 100
  33.     scene = new THREE.Scene()
  34.  
  35.     // Geometry
  36.     geom = new THREE.SphereGeometry(5, 180, 90)
  37.     colors = []
  38.     color = new THREE.Color()
  39.     q = ["rgb(78, 209, 228)", "rgb(252, 103, 56)", "rgb(74, 123, 164)", "rgb(157, 206, 97)", "rgb(157, 206, 97)"]
  40.     for (let i = 0; i < geom.attributes.position.count; i++) {
  41.         color.set(q[THREE.Math.randInt(0, q.length - 1)])
  42.         color.toArray(colors, i * 3)
  43.     }
  44.     geom.setAttribute("color", new THREE.BufferAttribute(new Float32Array(colors), 3))
  45.  
  46.     // Material + Loader
  47.     loader = new THREE.TextureLoader()
  48.     loader.setCrossOrigin("")
  49.     texture = loader.load("https://1.bp.blogspot.com/-596lbFumbyA/Ukb1cHw21_I/AAAAAAAAK-U/KArMZAjbvyU/s1600/water_4k.png")
  50.     texture.wrapS = THREE.RepeatWrapping
  51.     texture.wrapT = THREE.RepeatWrapping
  52.     texture.repeat.set(1, 1)
  53.     disk = loader.load("https://threejs.org/examples/textures/sprites/circle.png")
  54.  
  55.     // Shader
  56.     points = new THREE.Points(
  57.         geom,
  58.         new THREE.ShaderMaterial({
  59.             vertexColors: THREE.VertexColors,
  60.             uniforms: {
  61.                 visibility: {
  62.                     value: texture,
  63.                 },
  64.                 shift: {
  65.                     value: 0,
  66.                 },
  67.                 shape: {
  68.                     value: disk,
  69.                 },
  70.                 size: {
  71.                     value: 0.2,
  72.                 },
  73.                 scale: {
  74.                     value: window.innerHeight / 2,
  75.                 },
  76.             },
  77.             vertexShader: `
  78.                        
  79.             uniform float scale;
  80.             uniform float size;
  81.            
  82.             varying vec2 vUv;
  83.             varying vec3 vColor;
  84.            
  85.             void main() {
  86.            
  87.               vUv = uv;
  88.               vColor = color;
  89.               vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
  90.               gl_PointSize = size * ( scale / length( mvPosition.xyz )) * (0.3 + sin(uv.y * 3.1415926) * 0.6 );
  91.               gl_Position = projectionMatrix * mvPosition;
  92.      
  93.             }
  94.         `,
  95.             fragmentShader: `
  96.             uniform sampler2D visibility;
  97.             uniform float shift;
  98.             uniform sampler2D shape;
  99.            
  100.             varying vec2 vUv;
  101.             varying vec3 vColor;
  102.            
  103.      
  104.             void main() {
  105.                
  106.               vec2 uv = vUv;
  107.               uv.x += shift;
  108.               vec4 v = texture2D(visibility, uv);
  109.               if (length(v.rgb) > 1.0) discard;
  110.      
  111.               gl_FragColor = vec4( vColor, 1.0 );
  112.               vec4 shapeData = texture2D( shape, gl_PointCoord );
  113.               if (shapeData.a < 0.0625) discard;
  114.              
  115.             }
  116.         `,
  117.             transparent: false,
  118.         })
  119.     )
  120.     scene.add(points)
  121.  
  122.     // Scene Renderer and Events
  123.     renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
  124.     renderer.setPixelRatio(window.devicePixelRatio)
  125.     renderer.setSize(window.innerWidth, window.innerHeight)
  126.     renderer.setClearColor(0x252025)
  127.     document.body.appendChild(renderer.domElement)
  128.     document.body.style.touchAction = "none"
  129.     window.addEventListener("resize", onWindowResize)
  130.     controls = new OrbitControls(camera, renderer.domElement)
  131. }
  132.  
  133. // Mobile window resize
  134. function onWindowResize() {
  135.     windowHalfX = window.innerWidth / 2
  136.     windowHalfY = window.innerHeight / 2
  137.  
  138.     camera.aspect = window.innerWidth / window.innerHeight
  139.     camera.updateProjectionMatrix()
  140.  
  141.     renderer.setSize(window.innerWidth, window.innerHeight)
  142. }
  143.  
  144. // Animate function with RAF (Request Animation Frame)
  145. function animate() {
  146.     requestAnimationFrame(animate)
  147.  
  148.     stats.update()
  149.  
  150.     render()
  151. }
  152.  
  153. // Render update function based on Date.now()
  154. function render() {
  155.     /* scene.rotation.x += 0.0005
  156.     scene.rotation.y += 0.0005
  157.     scene.rotation.z += 0.0005 */
  158.  
  159.     camera.lookAt(scene.position)
  160.  
  161.     time += clock.getDelta()
  162.     /* points.material.uniforms.shift.value = -time * 0.1 */
  163.     renderer.render(scene, camera)
  164. }
  165.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement