html, body {
  margin:0;
  overflow:hidden
}
        var clock = new THREE.Clock();
            var scene = new THREE.Scene();
			var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

			var renderer = new THREE.WebGLRenderer();
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );
            renderer.setClearColor(0x606060);
            
            var loader = new THREE.GLTFLoader();
				loader.load( 'https://raw.githubusercontent.com/VascaM/ontwikkelstap7/master/snowmen/snowmen.gltf', function ( gltf ) {
                    
                    var model = gltf.scene;
                    scene.add(model);
                    mixer = new THREE.AnimationMixer(model);
                    mixer.clipAction(gltf.animations[0]).play();
                    gltf.scene.position.set(0, -1, 0);
                    },  
                );
            
	       document.addEventListener( 'mousedown', onDocumentMouseDown, false );

            function onDocumentMouseDown( event ) 
            {
                console.log("Click.");
                render();
            }

            function render() {
            requestAnimationFrame(render);
            var delta = clock.getDelta();
            if (mixer != null) {
                mixer.update(delta);
            };
            renderer.render(scene, camera);
            }
            
             //PLANE
            var geometry = new THREE.PlaneGeometry( 4, 4, 4 );
            var material = new THREE.MeshPhongMaterial({color:0x474fff, side: THREE.DoubleSide} );
            var plane = new THREE.Mesh( geometry, material );
            plane.rotation.x = - Math.PI / 2;
            plane.position.set(0, -0.9, 0);
            scene.add( plane );
            
            //LIGHT
            var ambientLight = new THREE.AmbientLight(0xffffff, 0.7);
            scene.add(ambientLight);
            light = new THREE.PointLight(0xffffff, 0.8, 18);
            light.position.set(0,2,4);
            light.castShadow = true;
            light.shadow.camera.near = 0.1;
            light.shadow.camera.far = 25;
            scene.add(light);

			camera.position.z = 5;
            camera.position.set( 0, 0, 5 );
            
            var controls = new THREE.OrbitControls( camera );
            controls.update();

			var animate = function () {
				requestAnimationFrame( animate );
				renderer.render( scene, camera );
			};

			animate();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/264161/OrbitControls.js
  3. https://cdn.rawgit.com/mrdoob/three.js/r92/examples/js/loaders/GLTFLoader.js