three实现三维卧室效果代码
代码语言:html
所属分类:三维
代码描述:three实现三维卧室效果代码,通过GLTFLoader引入三维卧室模型,结合材质贴图实现逼真的卧室效果。
下面为部分代码预览,完整代码请点击下载或在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: #949494; 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.124.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.125.js"></script> <script id="rendered-js" > 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 = 18; camera.position.y = 8; 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 = 20; controls.maxDistance = 40; controls.minPolarAngle = Math.PI .........完整代码请登录后点击上方下载按钮下载查看
网友评论0