three实现三维玻璃多面体几何图形代码
代码语言:html
所属分类:三维
代码描述:three实现三维玻璃多面体几何图形代码
代码标签: three 三维 玻璃 多面体 几何 图形 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body { padding: 0; margin: 0; } .container { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } #canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle, #2D3436 0%, #000000 100%); } .overlay-block { width: 33%; height: 40%; max-width: 30vh; max-height: 30vw; } </style> </head> <body > <canvas id="canvas"></canvas> <div class="container"> </div> <script type="module"> import * as THREE from '//repo.bfw.wiki/bfwrepo/js/module/three/build/three.module.js'; import { OrbitControls } from '//repo.bfw.wiki/bfwrepo/js/module/three/examples/jsm/controls/OrbitControls.js'; import * as BufferGeometryUtils from '//repo.bfw.wiki/bfwrepo/js/module/three/examples/jsm/utils/BufferGeometryUtils.js'; const container = document.querySelector('.container'); const canvasEl = document.querySelector('#canvas'); let renderer,clock,texture,scenes = []; const objects = [{ geometry: new THREE.TorusKnotGeometry(.3, .2, 64, 12), mirrorSize: .09 }, { geometry: new THREE.IcosahedronGeometry(.5, 3), mirrorSize: .11 }, { geometry: new THREE.TorusGeometry(.4, .2, 10, 20).rotateX(-.4), mirrorSize: .11 }]; initScene(); window.addEventListener('resize', updateSceneSize); function initScene() { renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true, canvas: canvasEl }); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); clock = new THREE.Clock(); new THREE.TextureLoader().load( '//repo.bfw.wiki/bfwrepo/icon/63c68f9ad5e62.png', t => { texture = t; for (let i = 0; i < objects.length; i++) { scenes.push(createScene(i)); } updateSceneSize(); render(); }); } function createDiscoBall(idx) { const dummy = new THREE.Object3D(); const mirrorMaterial = new THREE.MeshMatcapMaterial({ matcap: texture }); let geometryOriginal = objects[idx].geometry; geometryOriginal.deleteAttribute('normal'); geometryOriginal.deleteAttribute('uv'); geometryOriginal = BufferGeometryUtils.mergeVertices(geometryOriginal); geometryOriginal.computeVertexNormals(); const mirrorGeometry = new THREE.PlaneGeometry(objects[idx].mirrorSize, objects[idx].mirrorSize); let instancedMirrorMesh = new THREE.InstancedMesh( mirrorGeometry, mirrorMater.........完整代码请登录后点击上方下载按钮下载查看
网友评论0