PCT - Eindproject

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/MTLLoader.js"></script>
<script src="https://threejs.org/examples/js/loaders/OBJLoader.js"></script>
<script src="https://threejs.org/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>

CSS

body{
  overflow: hidden;
  margin: 0;
}

JavaScript

var car;
            var camera;
            var sub;
            var fish;

            var clock = new THREE.Clock();

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

            // achtergrondkleur veranderen
            renderer.setClearColor( 0x6abaff, 1 );
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild ( renderer.domElement ); 

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

            // controls toevoegen
            controls = new THREE.OrbitControls( camera );

            // licht toevoegen
            var ambientLight = new THREE.AmbientLight( 0xd4d4d4, 0.3 );
            ambientLight.castShadow = true;
            //            scene.add ( ambientLight );

            var light = new THREE.HemisphereLight( 0xFFFFFF ,0x959595, 0.8 );
            light.position.set( 15, 60, 15 );
            scene.add( light );

            var helper = new THREE.HemisphereLightHelper( light, 2 );
            scene.add( helper );

            var directionalLight1 = new THREE.DirectionalLight( 0xc4c4b1 , 0.7 );
            directionalLight1.position.set( 20, 20, 20 );
            directionalLight1.castShadow = true;
            scene.add( directionalLight1 );

            var directionalLight2 = new THREE.DirectionalLight( 0xc4c4b1 , 0.7 );
            directionalLight2.position.set( 20, 20, -20 );
            directionalLight2.castShadow = true;
           ...