three打造三维宇宙星空月球绕地球旋转效果代码
代码语言:html
所属分类:三维
代码描述:three打造三维宇宙星空月球绕地球旋转效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { margin: 0; overflow: hidden; position: relative; width: 100vw; height: 100vh; background-image: url("//repo.bfw.wiki/bfwrepo/image/5eec59613702c.png"); background-size: cover; } 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 .5s; } button:hover { background: #ffffff; color: #000000; } </style> </head> <body translate="no" > <div id="canvas_container"></div> <button id="fullscr">Go Fullscreen</button> <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r120/three.min.js'></script> <script> let renderer, camera, planet, moon, sphereBg, terrainGeometry, container = document.getElementById("canvas_container"), timeout_Debounce, frame = 0, cameraDx = 0.05, count = 0, t = 0; /* Lines values */ let lineTotal = 1000; let linesGeometry = new THREE.BufferGeometry(); linesGeometry.setAttribute("position", new THREE.BufferAttribute(new Float32Array(6 * lineTotal), 3)); linesGeometry.setAttribute("velocity", new THREE.BufferAttribute(new Float32Array(2 * lineTotal), 1)); let l_positionAttr = linesGeometry.getAttribute("position"); let l_vertex_Array = linesGeometry.getAttribute("position").array; let l_velocity_Array = linesGeometry.getAttribute("velocity").array; init(); animate(); function init() { scene = new THREE.Scene(); scene.background = new THREE.Color("#000000"); scene.fog = new THREE.Fog("#3c1e02", 0.5, 50); camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.01, 1000); camera.position.set(0, 1, 32); pointLight1 = new THREE.PointLight("#ffffff", 1, 0); pointLight1.position.set(0, 30, 30); scene.add(pointLight1); renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); renderer.setSize(container.clientWidth, container.clientHeight); renderer.setPixelRatio(window.devicePixelRatio); container.appendChild(renderer.domElement); const loader = new THREE.TextureLoader(); // Planet const texturePlanet = loader.load('//repo.bfw.wiki/bfwrepo/image/5e7e82aa76449.png'); texturePlanet.anisotropy = 16; const planetGeometry = new THREE.SphereBufferGeometry(10, 50, 50); const planetMaterial = new THREE.MeshLambertMaterial({ map: texturePlanet, fog: false }); planet = new THREE.Mesh(planetGeometry, planetMaterial); planet.position.set(0, 8, -30); scene.add(planet); //Moon const textureMoon = loader.load('//repo.bfw.wiki/bfwrepo/image/5e7e82c3555ec.png'); textureMoon.anisotropy = 16; let moonGeometry = new THREE.SphereBufferGeometry(2, 32, 32); let moonMaterial = new THREE.MeshPhongMaterial({ map: textureMoon, fog: false }); moon = new THREE.Mesh(moonGeometry, moonMaterial); moon.position.set(0, 8, 0); scene.add(moon); // Sphere Background const textureSphereBg = loader.load('//repo.bfw.wiki/bfwrepo/image/5eec59613702c.png'); textureSphereBg.anisotropy = 16; const geometrySphereBg = new THREE.SphereBufferGeometry(150, 32, 32); const materialSphereBg = new THREE.MeshBasicMaterial({ side: THREE.BackSide, map: textureSphereBg, fog: false }); sphereBg = new THREE.Mesh(geometrySphereBg, materialSphereBg); sphereBg.position.set(0, 50, 0); scene.add(sphereBg); // Terrain const textureTerrain = loader.load(); textureTerrain.rotation = THREE.MathUtils.degToRad(5); terrainGeometry = new THREE.PlaneBufferGeometry(70, 70, 20, 20); const terrainMaterial = new THREE.MeshBasicMaterial({ map: textureTerrain, fog: true }); terrain = new THREE.Mesh(terrainGeometry, terrainMaterial); terrain.rotation.x =.........完整代码请登录后点击上方下载按钮下载查看
网友评论0