three实现三维宇宙之心陨石能量罩效果代码
代码语言:html
所属分类:三维
代码描述:three实现三维宇宙之心陨石能量罩效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <style> body { margin: 0; overflow: hidden; width: 100vw; height: 100vh; background-image: url("//repo.bfw.wiki/bfwrepo/images/universe/96337246-f14d4580-1085-11eb-8793-a86d929e034d.jpg"); background-size: cover; backdrop-filter: brightness(50%); } canvas { display: block; } #canvas_container { width: 100%; height: 100vh; } button { position: absolute; bottom: 5%; left: 50%; transform: translateX(-50%); border: 1px solid white; border-radius: 5px; font-size: 0.9rem; padding: 0.5rem 0.9em; background: #000000; color: white; -webkit-font-smoothing: antialiased; font-weight: bold; cursor: pointer; transition: all .3s; } button:hover { background: #ffffff; color: #000000; } </style> </head> <body > <div id="canvas_container"></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.121.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/simplex-noise.js"></script> <script > let renderer, scene, camera, sphereBg, nucleus, stars, controls, container = document.getElementById("canvas_container"), timeout_Debounce, noise = new SimplexNoise(), cameraSpeed = 0, blobScale = 3; init(); animate(); function init() { scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.01, 1000); camera.position.set(0, 0, 230); const directionalLight = new THREE.DirectionalLight("#fff", 2); directionalLight.position.set(0, 50, -20); scene.add(directionalLight); let ambientLight = new THREE.AmbientLight("#ffffff", 1); ambientLight.position.set(0, 20, 20); scene.add(ambientLight); renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); renderer.setSize(container.clientWidth, container.clientHeight); renderer.setPixelRatio(window.devicePixelRatio); container.appendChild(renderer.domElement); //OrbitControl controls = new THREE.OrbitControls(camera, renderer.domElement); controls.autoRotate = true; controls.autoRotateSpeed = 4; controls.maxDistance = 350; controls.minDistance = 150; controls.enablePan = false; const loader = new THREE.TextureLoader(); const textureSphereBg = loader.load('//repo.bfw.wiki/bfwrepo/images/universe/bg3-je3ddz.jpg'); const texturenucleus = loader.load('//repo.bfw.wiki/bfwrepo/images/universe/Mischief_Universe_Image_19.png'); const textureStar = loader.load("//repo.bfw.wiki/bfwrepo/images/universe/p1-g3zb2a.png"); const texture1 = loader.load("//repo.bfw.wiki/bfwrepo/images/universe/p2-b3gnym.png"); const texture2 = loader.load("//repo.bfw.wiki/bfwrepo/images/universe/p3-ttfn70.png"); const texture4 = loader.load("//repo.bfw.wiki/bfwrepo/images/universe/p4-avirap.png"); /* Nucleus */ texturenucleus.anisotropy = 16; let icosahedronGeometry = new THREE.IcosahedronGeometry(30, 10); let lambertMaterial = new THREE.MeshPhongMaterial({ map: texturenucleus }); nucleus = new THREE.Mesh(icosahedronGeometry, lambertMaterial); scene.add(nucleus); /* Sphere Background */ textureSphereBg.anisotropy = 16; let geometrySphe.........完整代码请登录后点击上方下载按钮下载查看
网友评论0