diff --git a/package-lock.json b/package-lock.json index 2e69f6990..be98b1d9b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -77,7 +77,6 @@ "remark-gfm": "^3.0.1", "sharp": "^0.32.5", "swiper": "^8.4.4", - "three": "^0.137.5", "ua-parser-js": "^1.0.2", "util": "^0.12.4", "validator": "^13.7.0", @@ -116,7 +115,6 @@ "@types/react-dom": "^17.0.11", "@types/react-highlight": "^0.12.5", "@types/segment-analytics": "0.0.34", - "@types/three": "^0.133.1", "@types/ua-parser-js": "^0.7.36", "@types/web-push": "^3.3.2", "@typescript-eslint/eslint-plugin": "^4.33.0", @@ -15585,11 +15583,6 @@ "optional": true, "peer": true }, - "node_modules/@types/three": { - "version": "0.133.1", - "dev": true, - "license": "MIT" - }, "node_modules/@types/tmp": { "version": "0.0.33", "license": "MIT" @@ -46110,10 +46103,6 @@ "real-require": "^0.1.0" } }, - "node_modules/three": { - "version": "0.137.5", - "license": "MIT" - }, "node_modules/through": { "version": "2.3.8", "license": "MIT" @@ -59692,10 +59681,6 @@ "optional": true, "peer": true }, - "@types/three": { - "version": "0.133.1", - "dev": true - }, "@types/tmp": { "version": "0.0.33" }, @@ -81118,9 +81103,6 @@ "real-require": "^0.1.0" } }, - "three": { - "version": "0.137.5" - }, "through": { "version": "2.3.8" }, diff --git a/package.json b/package.json index c41c1aec2..159f4fd2f 100644 --- a/package.json +++ b/package.json @@ -67,7 +67,6 @@ "@types/react-dom": "^17.0.11", "@types/react-highlight": "^0.12.5", "@types/segment-analytics": "0.0.34", - "@types/three": "^0.133.1", "@types/ua-parser-js": "^0.7.36", "@types/web-push": "^3.3.2", "@typescript-eslint/eslint-plugin": "^4.33.0", @@ -168,7 +167,6 @@ "remark-gfm": "^3.0.1", "sharp": "^0.32.5", "swiper": "^8.4.4", - "three": "^0.137.5", "ua-parser-js": "^1.0.2", "util": "^0.12.4", "validator": "^13.7.0", diff --git a/src/components/Hero/Custom/DAOBackground.tsx b/src/components/Hero/Custom/DAOBackground.tsx deleted file mode 100644 index bcfcdfffd..000000000 --- a/src/components/Hero/Custom/DAOBackground.tsx +++ /dev/null @@ -1,246 +0,0 @@ -import React, { RefObject, useEffect, useRef } from 'react' - -import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer' -import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass' -import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass' -import * as THREE from 'three/src/Three' - -import SingletonListener from '../../../utils/dom/SingletonListener' - -function render(ref: RefObject) { - const canvas = ref.current - if (!canvas) { - return - } - - // Three JS Template - const params = { - exposure: 1, - bloomStrength: 3, - bloomThreshold: 0.8, - bloomRadius: 0.5, - } - - const manaShape = 6 - const particleMaterials = [ - new THREE.MeshPhysicalMaterial({ - color: 0x98dcec, - side: THREE.DoubleSide, - transparent: true, - opacity: 0, - }), - new THREE.MeshPhysicalMaterial({ - color: 0xbfffff, - side: THREE.DoubleSide, - transparent: true, - opacity: 0, - }), - new THREE.MeshPhysicalMaterial({ - color: 0x04ffff, - side: THREE.DoubleSide, - transparent: true, - opacity: 0, - }), - ] - - let renderer: THREE.WebGLRenderer | null = null - try { - renderer = new THREE.WebGLRenderer({ antialias: true, canvas }) - } catch (err) { - console.error(err) - } - - if (!renderer) { - return - } - - renderer.setSize( - (canvas.parentElement as HTMLDivElement).clientWidth, - (canvas.parentElement as HTMLDivElement).clientHeight - ) - renderer.shadowMap.enabled = false - renderer.shadowMap.type = THREE.PCFSoftShadowMap - renderer.shadowMap.needsUpdate = true - - const camera = new THREE.PerspectiveCamera( - 35, - window.innerWidth / window.innerHeight, - 1, - 500 - ) - const scene = new THREE.Scene() - const cameraRange = 3 - const setcolor = 0x000000 - - scene.background = new THREE.Color(setcolor) - scene.fog = new THREE.Fog(setcolor, 2.5, 3.5) - - const renderScene = new RenderPass(scene, camera) - const bloomPass = new UnrealBloomPass( - new THREE.Vector2(window.innerWidth, window.innerHeight), - 1.5, - 0.4, - 0.85 - ) - bloomPass.threshold = params.bloomThreshold - bloomPass.strength = params.bloomStrength - bloomPass.radius = params.bloomRadius - - const composer = new EffectComposer(renderer) - composer.addPass(renderScene) - composer.addPass(bloomPass) - - //-------------------------------------------------------------- SCENE - const sceneGruop = new THREE.Object3D() - const particularGruop = new THREE.Object3D() - const modularGruop = new THREE.Object3D() - - function generateParticle(num: number, amp = 2) { - const gparticular = new THREE.CircleGeometry(0.25, manaShape) - - for (let i = 1; i < num; i++) { - const pscale = 0.02 //+ Math.abs(mathRandom(0.05)); - const particular = new THREE.Mesh( - gparticular, - particleMaterials[Math.floor(Math.random() * particleMaterials.length)] - ) - particular.position.set(mathRandom(amp), mathRandom(amp), mathRandom(amp)) - // particular.rotation.set(mathRandom(), mathRandom(), mathRandom()); - particular.scale.set(pscale, pscale, pscale) - ;(particular as any).speedValue = mathRandom(0.5) - - particularGruop.add(particular) - particularGruop.scale.x = 0.2 - particularGruop.scale.y = 0.2 - particularGruop.scale.z = 0.2 - } - } - - generateParticle(3000, 2) - sceneGruop.add(particularGruop) - scene.add(modularGruop) - scene.add(sceneGruop) - - function mathRandom(num = 1) { - const setNumber = -Math.random() * num + Math.random() * num - return setNumber - } - - //------------------------------------------------------------- CAMERA - camera.position.set(0, 0, cameraRange) - - //------------------------------------------------------------- SCENE - const ambientLight = new THREE.AmbientLight(0xffffff, 0.3) - scene.add(ambientLight) - - const light = new THREE.SpotLight(0xffffff, 1) - light.position.set(5, 5, 2) - - const lightBack = new THREE.PointLight(0x0fffff, 5) - lightBack.position.set(0, -3, -1) - - scene.add(sceneGruop) - scene.add(light) - scene.add(lightBack) - - //------------------------------------------------------------- RENDER - const position = { top: 0, left: 0 } - function animate() { - if (!ref.current) { - return - } - - // var time = performance.now() * 0.0003; - requestAnimationFrame(animate) - - const maxSize = 1.5 - let mult = maxSize - particularGruop.scale.x - if (mult > maxSize) mult = maxSize - else if (mult < 0) mult = 0 - - if (particularGruop.scale.x < maxSize) { - particularGruop.scale.x += mult * 0.014 - particularGruop.scale.y += mult * 0.014 - particularGruop.scale.z += mult * 0.014 - } - - const maxOpacity = 1 - const currentOpacity = particleMaterials[0].opacity - if (currentOpacity < maxOpacity) { - particleMaterials.forEach((material) => { - if (material.opacity < maxOpacity) { - material.opacity += mult * 0.05 - } - }) - } - - //--- - for (let i = 0, l = particularGruop.children.length; i < l; i++) { - const newObject = particularGruop.children[i] - newObject.rotation.x += (newObject as any).speedValue / 10 - newObject.rotation.y += (newObject as any).speedValue / 10 - newObject.rotation.z += (newObject as any).speedValue / 10 - // console.log(newObject.rotation); - } - - //--- - particularGruop.rotation.z += 0.0025 * position.top - particularGruop.rotation.y += 0.0025 * position.left - particularGruop.rotation.x += 0.0025 * ((position.top + position.left) / 2) - - camera.lookAt(scene.position) - composer.render() - } - - animate() - - //------------------------------------------------------------- DOM EVENTS - function onWindowResize() { - if (!ref.current || !renderer) { - return - } - - camera.aspect = ref.current.width / ref.current.height - camera.updateProjectionMatrix() - renderer.setSize( - (ref.current.parentElement as HTMLDivElement).clientWidth, - (ref.current.parentElement as HTMLDivElement).clientHeight - ) - } - - function onMouseMove(event: MouseEvent) { - if (event.target) { - const w = Math.floor((event.target as any).width / 2) - const h = Math.floor((event.target as any).height / 2) - position.top = -(event.clientY - h) / h - position.left = (event.clientX - w) / w - } - } - - const windowListener = SingletonListener.from(window) - const canvasListener = SingletonListener.from(canvas) - windowListener.addEventListener('resize', onWindowResize) - canvasListener.addEventListener('mousemove', onMouseMove) - - return () => { - windowListener.removeEventListener('resize', onWindowResize) - canvasListener.removeEventListener('mousemove', onMouseMove) - } -} - -export default function DAOBackground() { - const ref = useRef(null) - - useEffect(() => render(ref), []) - - return ( - - ) -}