three实现360全景戈壁滩反射玻璃球效果代码
代码语言:html
所属分类:三维
代码描述:three实现360全景戈壁滩反射玻璃球效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html lang="en"> <head> <meta charset="UTF-8"> <style> html, body { margin: 0; padding: 0; overflow: hidden; } </style> </head> <body> <script type="module"> import * as THREE from 'https://unpkg.com/three@0.126.1/build/three.module.js'; import { OrbitControls } from 'https://unpkg.com/three@0.126.1/examples/jsm/controls/OrbitControls.js'; import Stats from 'https://unpkg.com/three@0.126.1/examples/jsm/libs/stats.module.js'; let scene, camera, renderer, sizes, controls, cubeCamera, sphereMaterial, sphereMesh, sphereGroup; function init() { const stats = new Stats(); stats.showPanel(0); document.body.appendChild(stats.dom); sizes = { width: window.innerWidth, height: window.innerHeight, get aspect() { return this.width / this.height; }, get pixelRatio() { return Math.min(window.devicePixelRatio, 2); } }; scene = new THREE.Scene(); /** * Textures */ const urls = [ '//repo.bfw.wiki/bfwrepo/icon/605f0abc8f7c8.png', '//repo.bfw.wiki/bfwrepo/icon/605f0a9d7dced.png', '//repo.bfw.wiki/bfwrepo/icon/605f0a7f25d6f.png', '//repo.bfw.wiki/bfwrepo/icon/605f0a57ce0c6.png', '//repo.bfw.wiki/bfwrepo/icon/605f0a33e9437.png', '//repo.bfw.wiki/bfwrepo/icon/605f0a10312c7.png']; const cubeTextureLoader = new THREE.CubeTextureLoader(); const background = cubeTextureLoader.load(urls); scene.background = background; /** * Cameras */ camera = new THREE.PerspectiveCamera(65, sizes.aspect, 1, 500); camera.position.z = 6; scene.add(camera); sphereGroup = new THREE.Group(); const cubeRenderTarget = new THREE.WebGLCubeRenderTarget(512, { format: THREE.RGBFormat, generateMipmaps: true, minFilter: THREE.LinearMipmapLinearFilter }); cubeCamera = new THREE.CubeCamera(1, 100, cubeRenderTarget); sphereGroup.add(cubeCamera); /** * Sphere */ const sphereGeometry = new THREE.SphereBufferGeometry(2, 500, 500); sphereMaterial = new THREE.ShaderM.........完整代码请登录后点击上方下载按钮下载查看
网友评论0