Submarine Animation

by zeemeeuw1994

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/loaders/ColladaLoader.js"></script>
<script src="https://threejs.org/examples/js/libs/stats.min.jss"></script>

CSS

body{
  overflow: hidden;
  margin: 0;
}

JavaScript

var scene = new THREE.Scene( );
            var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
            var renderer = new THREE.WebGLRenderer( {antialias: true} );
            controls = new THREE.OrbitControls( camera, renderer.domElement );

            // achtergrondkleur veranderen
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild ( renderer.domElement ); 
            //            renderer.shadowMap.enabled = true;

            // viewport update (meeschalen met schermgrootte)
            window.addEventListener( 'resize', function( )
                                    {
                var width = window.innerWidth;
                var height = window.innerHeight;
                renderer.setSize( width, height);
                camera.aspect = width / height;
                camera.updateProjectionMatrix( );
            } );

            // licht toevoegen
            var ambient = new THREE.AmbientLight( 0xffffff, 1 );
            scene.add( ambient );

            var point = new THREE.PointLight( 0xffffff, 0.8, 18 );
            point.position.set( -3, 6, -3 );
            point.castShadow = true;
            point.shadow.camera.near = 0.1;
            point.shadow.camera.far = 25;
            scene.add( point );

            // model toevoegen
            var loader = new THREE.ColladaLoader();
            loader.load( 'https://raw.githubusercontent.com/biancalooijen/car/master/subdae1.dae', function ( collada ) {

                var animations = collada.animations;
                var avatar = collada.scene;

                mixer = new THREE.AnimationMixer( avatar ); // create global mixer
                mixer.clipAction( animations[ 0 ] ).play(); // play first animation clip
                

                scene.add( avatar );

            } );

            camera.position.z = 3;

            // update scene
            var update =...