function rendererConfig() { const canvas = document.createElement('canvas'); canvas.style.display = 'block'; canvas.style.margin = '0 auto'; document.body.appendChild(canvas); const renderer = new THREE.WebGL1Renderer({ canvas: canvas, antialias: true, }); renderer.physicallyCorrectLights = true; renderer.outputEncoding = THREE.sRGBEncoding; renderer.shadowMap.enabled = true; return renderer; } function loadResources() { const loader = new THREE.GLTFLoader(); loader.load('https://assets-cdn.github.com/photo.glb', (glb) => { const scene = glb.scene.toTreeView(); const renderer = rendererConfig(); scene.rotation.x = 0; scene.rotation.y = 0; scene.rotation.z = 0; renderer.setScene(scene); renderer.setsize(window.innerWidth, window.innerHeight); window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setsize(window.innerWidth, window.innerHeight); }); const controls = new THREE.OrbitControls(camera, renderer.domElement); animation(); }); } function animation() { requestAnimationFrame(animation); renderer.render(scene, camera); }