“使用 Three.js 的 WebGL 小实验。简约的3D房间。”
HTML：
<canvas class="webgl"></canvas><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;}body{overflow: hidden;background-color: #949494;cursor: grab;}.webgl{position: fixed;top: 0;left: 0;}
JAVASCRIPT：
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 = 18camera.position.y = 8camera.position.z = 20scene.add(camera)//Controlsconst controls = new THREE.OrbitControls(camera, canvas)controls.enableDamping = truecontrols.enableZoom = truecontrols.enablePan = falsecontrols.minDistance = 20controls.maxDistance = 40controls.minPolarAngle = Math.PI / 4controls.maxPolarAngle = Math.PI / 2controls.minAzimuthAngle = - Math.PI / 80controls.maxAzimuthAngle = Math.PI / 2.5// 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-Room05/ae27bdffd31dcc5cd5a919263f8f1c6874e05400/baked.jpg')bakedTexture.flipY = falsebakedTexture.encoding = THREE.sRGBEncodingconst bakedMaterial = new THREE.MeshBasicMaterial({map: bakedTexture,side: THREE.DoubleSide,})//Loaderconst loader = new THREE.GLTFLoader()loader.load('https://rawcdn.githack.com/ricardoolivaalonso/ThreeJS-Room05/ae27bdffd31dcc5cd5a919263f8f1c6874e05400/model.glb',(gltf) => {const model = gltf.scenemodel.traverse( child => child.material = bakedMaterial )scene.add(model)},( 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))})// Animationconst tick = () => {controls.update()renderer.render(scene, camera)window.requestAnimationFrame(tick)}tick()
源码：
https://codepen.io/ricardoolivaalonso/pen/KKbWGNZ
体验：
https://codepen.io/ricardoolivaalonso/full/KKbWGNZ
