-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfrub.html
4 lines (3 loc) · 3.71 KB
/
frub.html
1
2
3
4
<!DOCTYPE html><html><head>
<link rel="icon" type="image/x-icon" href="favicon-pop.ico">
<meta charset="utf-8"><title>frub</title><style>body{margin:0;overflow:hidden}#container{width:100%;height:100vh}canvas{display:block}</style><style>html{background-color:black}</style><meta name="viewport" content="width=device-width, initial-scale=1"></head><body><div id="container"></div><script type="importmap">{"imports":{"three":"https://threejs.org/build/three.module.js"}}</script><script type="module">import*as THREE from 'https://threejs.org/build/three.module.js';import{EffectComposer}from 'https://threejs.org/examples/jsm/postprocessing/EffectComposer.js';import{RenderPass}from 'https://threejs.org/examples/jsm/postprocessing/RenderPass.js';import{UnrealBloomPass}from 'https://threejs.org/examples/jsm/postprocessing/UnrealBloomPass.js';import{SMAAPass}from 'https://threejs.org/examples/jsm/postprocessing/SMAAPass.js';import{FontLoader}from 'https://threejs.org/examples/jsm/loaders/FontLoader.js';import{TextGeometry}from 'https://threejs.org/examples/jsm/geometries/TextGeometry.js';import{OrbitControls}from 'https://threejs.org/examples/jsm/controls/OrbitControls.js';const CANVAS_WIDTH=window.innerWidth;const CANVAS_HEIGHT=window.innerHeight;var textureLoader=new THREE.TextureLoader();var texture=textureLoader.load('https://a3d.joladev2.com/webgl-env-map/assets/env.jpg');texture.mapping=THREE.EquirectangularReflectionMapping;var scene=new THREE.Scene();var camera=new THREE.PerspectiveCamera(75,1,0.1,1000);var container=document.getElementById('container');var renderer=new THREE.WebGLRenderer();container.appendChild(renderer.domElement);renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(CANVAS_WIDTH,CANVAS_HEIGHT);container.appendChild(renderer.domElement);var loader=new FontLoader();loader.load('https://cdn.discordapp.com/attachments/887521357548638249/1232962301628252231/GT_America_Trial_Exp_Bd_Regular_3.json?ex=662b5d20&is=662a0ba0&hm=4af0e25333ebc6c34ac286b1e833c4559eec47aa21bd4392e4efe500230729e2&',function(font){var textGeometry=new TextGeometry('frub',{font:font,size:2,depth:0.3,curveSegments:128,bevelEnabled:!0,bevelThickness:0.09,bevelSize:0.02,bevelSegments:3});textGeometry.computeBoundingBox();textGeometry.center();var material=new THREE.MeshPhysicalMaterial({color:0x404040,metalness:1,roughness:0,clearcoat:0,clearcoatRoughness:0.05,transmission:0.1,ior:2,reflectivity:2,envMap:texture,emissive:0xffffff,emissiveIntensity:0.05,});var textMesh=new THREE.Mesh(textGeometry,material);scene.add(textMesh);camera.position.z=5;var light=new THREE.PointLight(0xffffff,1,100);light.position.set(0,0,50);scene.add(light);var composer=new EffectComposer(renderer);composer.setSize(CANVAS_WIDTH,CANVAS_HEIGHT);var renderPass=new RenderPass(scene,camera);composer.addPass(renderPass);var smaaPass=new SMAAPass(CANVAS_WIDTH,CANVAS_HEIGHT);composer.addPass(smaaPass);var bloomStrength=8;var bloomRadius=1.2;var bloomThreshold=0.3;var bloomThresholdAlpha=1;var bloomIntensity=2.0;var bloomPass=new UnrealBloomPass(new THREE.Vector2(window.innerWidth,window.innerHeight),bloomStrength,bloomRadius,bloomThreshold,bloomThresholdAlpha,bloomIntensity);composer.addPass(bloomPass);var time=0;var amplitude=0.1;var controls=new OrbitControls(camera,renderer.domElement);function onWindowResize(){var width=container.clientWidth;var height=container.clientHeight;renderer.setSize(width,height);camera.aspect=width/height;camera.updateProjectionMatrix();composer.setSize(width,height)}onWindowResize();function animate(){requestAnimationFrame(animate);textMesh.rotation.x=Math.sin(time)*amplitude;textMesh.rotation.y=Math.cos(time)*amplitude;time+=0.001;composer.render()}animate();window.addEventListener('resize',onWindowResize)});</script></body></html>