three实现三维简洁办公室效果代码
代码语言:html
所属分类:三维
代码描述:three实现三维简洁办公室效果代码,包含电脑、办公桌、地板、绿植、壁画、柜子、椅子等元素。
下面为部分代码预览,完整代码请点击下载或在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; } body { overflow: hidden; background-color: #383B50; cursor: grab; } .webgl { position: fixed; top: 0; left: 0; } </style> </head> <body> <canvas class="webgl"></canvas> <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 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(30, sizes.width / sizes.height, 0.1, 100); camera.position.x = 18; camera.position.y = 10; camera.position.z = 20; scene.add(camera); // Controls const controls = new THREE.OrbitControls(camera, canvas); controls.enableDamping = true; controls.enableZoom = true; controls.enablePan = false; controls.minDistance = 10; controls.maxDistance = 20; controls.minPolarAngle = Math.PI / 4; controls.maxPolarAngle = Ma.........完整代码请登录后点击上方下载按钮下载查看
网友评论0