Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import * as THREE from "three"
- /* import GUI from "lil-gui" */
- import Stats from "three/examples/jsm/libs/stats.module"
- import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
- import "../src/style.css"
- // Global variables
- let camera, scene, renderer, geom, colors, color, q, loader, texture, disk, points, blackGlobe, controls
- // Window half size
- let windowHalfX = window.innerWidth / 2
- let windowHalfY = window.innerHeight / 2
- // Time based on animate instead of Machine performance
- let clock = new THREE.Clock()
- let time = 0
- // Instanciate GUI
- /* const gui = new GUI() */
- // Stats panel for performance monitoring
- const stats = Stats()
- document.body.appendChild(stats.dom)
- init()
- animate()
- /* createPanel() */
- function init() {
- camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 5000)
- camera.position.z = 10
- camera.far = 100
- scene = new THREE.Scene()
- // Geometry
- geom = new THREE.SphereGeometry(5, 180, 90)
- colors = []
- color = new THREE.Color()
- q = ["rgb(78, 209, 228)", "rgb(252, 103, 56)", "rgb(74, 123, 164)", "rgb(157, 206, 97)", "rgb(157, 206, 97)"]
- for (let i = 0; i < geom.attributes.position.count; i++) {
- color.set(q[THREE.Math.randInt(0, q.length - 1)])
- color.toArray(colors, i * 3)
- }
- geom.setAttribute("color", new THREE.BufferAttribute(new Float32Array(colors), 3))
- // Material + Loader
- loader = new THREE.TextureLoader()
- loader.setCrossOrigin("")
- texture = loader.load("https://1.bp.blogspot.com/-596lbFumbyA/Ukb1cHw21_I/AAAAAAAAK-U/KArMZAjbvyU/s1600/water_4k.png")
- texture.wrapS = THREE.RepeatWrapping
- texture.wrapT = THREE.RepeatWrapping
- texture.repeat.set(1, 1)
- disk = loader.load("https://threejs.org/examples/textures/sprites/circle.png")
- // Shader
- points = new THREE.Points(
- geom,
- new THREE.ShaderMaterial({
- vertexColors: THREE.VertexColors,
- uniforms: {
- visibility: {
- value: texture,
- },
- shift: {
- value: 0,
- },
- shape: {
- value: disk,
- },
- size: {
- value: 0.2,
- },
- 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 )) * (0.3 + sin(uv.y * 3.1415926) * 0.6 );
- 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.0625) discard;
- }
- `,
- transparent: false,
- })
- )
- scene.add(points)
- // Scene Renderer and Events
- renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
- renderer.setPixelRatio(window.devicePixelRatio)
- renderer.setSize(window.innerWidth, window.innerHeight)
- renderer.setClearColor(0x252025)
- document.body.appendChild(renderer.domElement)
- document.body.style.touchAction = "none"
- window.addEventListener("resize", onWindowResize)
- controls = new OrbitControls(camera, renderer.domElement)
- }
- // Mobile window resize
- function onWindowResize() {
- windowHalfX = window.innerWidth / 2
- windowHalfY = window.innerHeight / 2
- camera.aspect = window.innerWidth / window.innerHeight
- camera.updateProjectionMatrix()
- renderer.setSize(window.innerWidth, window.innerHeight)
- }
- // Animate function with RAF (Request Animation Frame)
- function animate() {
- requestAnimationFrame(animate)
- stats.update()
- render()
- }
- // Render update function based on Date.now()
- function render() {
- /* scene.rotation.x += 0.0005
- scene.rotation.y += 0.0005
- scene.rotation.z += 0.0005 */
- camera.lookAt(scene.position)
- time += clock.getDelta()
- /* points.material.uniforms.shift.value = -time * 0.1 */
- renderer.render(scene, camera)
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement