Mouse click

by zeemeeuw1994

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

JavaScript

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

            var renderer = new THREE.WebGLRenderer( {antialias:true });
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild ( renderer.domElement ); 
            controls = new THREE.OrbitControls( camera, renderer.domElement );

            // ondergrond maken
            var geometry = new THREE.PlaneGeometry( 7, 7 );
            var material = new THREE.MeshPhongMaterial( {color: 0x919191, side: THREE.DoubleSide, wireframe: false} );
            var plane = new THREE.Mesh( geometry, material );
            new THREE.ShadowMaterial({ 
                color: 0xff0000, transparent: false
            });
            plane.position.set( 0, -0.5001, 0 );
            plane.receiveShadow = true;     // ontvangt schaduw van de mesh
            plane.rotation.set( Math.PI / 2, 0, 0 );
            plane.shadowColor = 0xffffff;
            scene.add( plane );
            
            // licht toevoegen
            var ambient = new THREE.AmbientLight( 0xffffff, 0.2 );
            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 );

            // create the shape
            var geometry = new THREE.SphereGeometry ( 0.5, 32, 32 );
            var material = new THREE.MeshPhongMaterial ( {color: 0xFFFFFF, wireframe: false} );
            var cube = new THREE.Mesh( geometry, material );
            scene.add ( cube );
            cube.castShadow = true;
            

            camera.position.z = 5;

            // game logic
            document.addEventListener("keydown", onDocumentKeyDown, false);
            function...