“使用 Three.js 的 WebGL 小实验。立体房间模型。”
HTML：
<canvas class="webgl"></canvas><div id="loader"><h1>Loading</h1></div><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r124/three.min.js"></script><script src="https://unpkg.com/three@0.126.0/examples/js/loaders/GLTFLoader.js"></script><script src="https://unpkg.com/three@0.126.0/examples/js/controls/OrbitControls.js"></script>
*,*::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: #FAEDCD;}
JAVASCRIPT：
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 cameraconst camera = new THREE.PerspectiveCamera(10, sizes.width / sizes.height, 0.1, 100)camera.position.x = 8camera.position.y = 4camera.position.z = 15scene.add(camera)//Controlsconst controls = new THREE.OrbitControls(camera, canvas)controls.enableDamping = truecontrols.enableZoom = truecontrols.enablePan = truecontrols.minDistance = 21controls.maxDistance = 50controls.minPolarAngle = Math.PI / 5controls.maxPolarAngle = Math.PI / 2// Rendererconst renderer = new THREE.WebGLRenderer({canvas: canvas,antialias: true,alpha: true})renderer.setSize(sizes.width, sizes.height)renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))renderer.outputEncoding = THREE.sRGBEncoding// Materialsconst bakedTexture = textureLoader.load('https://rawcdn.githack.com/ricardoolivaalonso/ThreeJS-Room13/47b05e2db4e49eec33d63729e920894a906cb693/static/baked.jpg')bakedTexture.flipY = falsebakedTexture.encoding = THREE.sRGBEncodingconst bakedMaterial = new THREE.MeshBasicMaterial({ map: bakedTexture })//Loaderconst loader = new THREE.GLTFLoader()loader.load('https://rawcdn.githack.com/ricardoolivaalonso/ThreeJS-Room13/47b05e2db4e49eec33d63729e920894a906cb693/static/model.glb',(gltf) => {const model = gltf.scenemodel.traverse( child => child.material = bakedMaterial )scene.add(model)scene.position.set(0,.2,0)loading.style.display = 'none'},( xhr ) => {console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' )})window.addEventListener('resize', () =>{sizes.width = window.innerWidthsizes.height = window.innerHeightcamera.aspect = sizes.width / sizes.heightcamera.updateProjectionMatrix()renderer.setSize(sizes.width, sizes.height)renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))})// Animationvar minPan = new THREE.Vector3( -2, -.5, -2 )var maxPan = new THREE.Vector3( 2, .5, 2 )const tick = () => {controls.update()controls.target.clamp( minPan, maxPan )renderer.render(scene, camera)window.requestAnimationFrame(tick)}tick()
源码：
https://codepen.io/ricardoolivaalonso/pen/poYEpwP
体验：
https://codepen.io/ricardoolivaalonso/full/poYEpwP
