let scene = new THREE.Scene()
let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)

let renderer = new THREE.WebGLRenderer()

renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
window.addEventListener('resize', () => {
    let width = window.innerWidth
    let height = window.innerHeight
    renderer.setSize(width, height)
    camera.aspect = width / height
    camera.updateProjectionMatrix()
})


controls = new THREE.OrbitControls(camera, renderer.domElement)
let loader = new THREE.ObjectLoader()
loader.load(
    'https://www.1min30.com/objloader/Head.json',
    function(object) {
        object.position.set(0, 0, 0)
        scene.add(object)
    }
)
camera.position.x = 0
camera.position.y = 0.5
camera.position.z = -0.6


/**
 * Game logic
 */
 let update = function() {
	 camera.lookAt(0,0.3,0)
 }

 /**
  * Draw scene
  */
 let render = function() {
     renderer.render(scene, camera)
 }

 /**
  * Run game loop (update, render, repeat)
  */
 let GameLoop = function() {
    requestAnimationFrame(GameLoop)
    update()
    render()
 }

 GameLoop()

 

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js
  2. https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js
  3. https://cdn.rawgit.com/mrdoob/three.js/master/src/loaders/ObjectLoader.js