|
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); |
|
} |