three实现三维3D小面包店效果代码
代码语言:html
所属分类:三维
代码描述:three实现三维3D小面包店效果代码,可360度拖动旋转缩放。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *::after, *::before { margin: 0; padding: 0; box-sizing: border-box; outline: none; font-family: monospace; } body { overflow: hidden; background-color: #d2cfc8; cursor: grab; } .webgl, #loader { position: fixed; top: 0; left: 0; } #loader { display: grid; place-content: center; width: 100%; height: 100%; background-color: #d2cfc8; } </style> </head> <body > <canvas class="webgl"></canvas> <div id="loader"> <h1>Loading</h1> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.126.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/GLTFLoader.128.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.126.js"></script> <script > const loading = document.querySelector('#loader'); const canvas = document.querySelector('.webgl'); const scene = new THREE.Scene(); const textureLoader = new THREE.TextureLoader(); const sizes = { width: window.innerWidth, height: window.innerHeight }; // Base camera const camera = new THREE.PerspectiveCamera(10, sizes.width / sizes.height, 0.1, 100); camera.position.x = 28; camera.position.y = 6; camera.position.z = 25; scene.add(camera); //Controls const controls = new THREE.OrbitControls(camera, canvas); controls.enableDamping = true; controls.enableZoom = true; controls.enablePan = true; controls.minDistance = 30; controls.maxDistance = 80; controls.minPolarAngle = Math.PI / 5; controls.maxPolarAngle = Math.PI / 2; // Renderer const renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true, alpha: true }); renderer.setSize(sizes.wi.........完整代码请登录后点击上方下载按钮下载查看
网友评论0