Untitled

<!doctype html>
<html lang="en">
<head>
    <title>Repeating Textures (Three.js)</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link rel=stylesheet href="css/base.css"/>
</head>
<body>

<script src="js/Three.js"></script>
<script src="js/Detector.js"></script>
<script src="js/Stats.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/THREEx.KeyboardState.js"></script>
<script src="js/THREEx.FullScreen.js"></script>
<script src="js/THREEx.WindowResize.js"></script>

<!-- jQuery code to display an information button and box when clicked. -->
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js"></script>
<link rel=stylesheet href="css/jquery-ui.css" />
<link rel=stylesheet href="css/info.css"/>
<script src="js/info.js"></script>
<div id="infoButton"></div>
<div id="infoBox" title="Demo Information">
This three.js demo is part of a collection at
<a href="http://stemkoski.github.io/Three.js/">http://stemkoski.github.io/Three.js/</a>
</div>
<!-- ------------------------------------------------------------ -->

<div id="ThreeJS" style="position: absolute; left:0px; top:0px"></div>
<script>


// MAIN

// standard global variables
var container, scene, camera, renderer, controls, stats;
var keyboard = new THREEx.KeyboardState();
var clock = new THREE.Clock();
// custom global variables
var lamp;
var targetList = [];
var cube;
var crate;
var projector, mouse = { x: 0, y: 0 }, INTERSECTED;

var animOffset       = 0,   // starting frame of animation
    walking         = false,
    duration        = 1000, // milliseconds to complete animation
    keyframes       = 20,   // total number of animation frames
    interpolation   = duration / keyframes, // milliseconds per frame
    lastKeyframe    = 0,    // previous keyframe
    currentKeyframe = 0;
init();
animate();

// FUNCTIONS
function init()
{
    // SCENE
    scene = new THREE.Scene();
    // CAMERA
    var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
    var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
    camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
    scene.add(camera);
    camera.position.set(0,150,400);
    camera.lookAt(scene.position);
    // RENDERER
    if ( Detector.webgl )
        renderer = new THREE.WebGLRenderer( {antialias:true} );
    else
        renderer = new THREE.CanvasRenderer();
    renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
    container = document.getElementById( 'ThreeJS' );
    container.appendChild( renderer.domElement );
    // EVENTS
    THREEx.WindowResize(renderer, camera);
    THREEx.FullScreen.bindKey({ charCode : 'm'.charCodeAt(0) });
    // CONTROLS
    controls = new THREE.OrbitControls( camera, renderer.domElement );
    // STATS
    stats = new Stats();
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.bottom = '0px';
    stats.domElement.style.zIndex = 100;
    container.appendChild( stats.domElement );
    // LIGHT
    var light = new THREE.PointLight(0xffffff);
    light.position.set(0,150,100);
    scene.add(light);
    // FLOOR
    var floorTexture = new THREE.ImageUtils.loadTexture( 'images/checkerboard.jpg' ); // floor teksturos
    floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
    // THREE.MirrorWrapping
    // THREE.ClampToEdgeWrapping
    // THREE.ClampToBoderWrapping
    // THREE.MirroredRepeatWrapping
    floorTexture.repeat.set( 5, 5 );
    var floorMaterial = new THREE.MeshBasicMaterial( { map: floorTexture, side: THREE.DoubleSide } );
    var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10);
    var floor = new THREE.Mesh(floorGeometry, floorMaterial);
    floor.position.y = -0.5;
    floor.rotation.x = Math.PI / 2;
    scene.add(floor);
    // SKYBOX/FOG
    var skyBoxGeometry = new THREE.CubeGeometry( 10000, 10000, 10000 );
    var skyBoxMaterial = new THREE.MeshBasicMaterial( { color: 0x9999ff, side: THREE.BackSide } );
    var skyBox = new THREE.Mesh( skyBoxGeometry, skyBoxMaterial );
     scene.add(skyBox);
    scene.fog = new THREE.FogExp2( 0x9999ff, 0.00025 );

    ////////////
    // CUSTOM OBJEKTAI//
    ////////////

    // LEMPA
    //   Note: a standard flat rectangular image will look distorted,
    //   a "spherical projection" image will look "normal".

    var jsonLoader = new THREE.JSONLoader();
    jsonLoader.load( "models/lamp_animated.js", addModelToScene ); // lempos padejimas
    //jsonLoader.load( "models/lamp_animated.js", addModelToScene );
    // addModelToScene function is called back after model has loaded

    var ambientLight = new THREE.AmbientLight(0x111111);
    scene.add(ambientLight);


    // radius, segmentsWidth, segmentsHeight
    var sphereGeom =  new THREE.SphereGeometry( 40, 32, 16 );

    var light2 = new THREE.AmbientLight(0x444444);
    scene.add(light2);


        // Using wireframe materials to illustrate shape details.
    var darkMaterial = new THREE.MeshBasicMaterial( { color: 0xaa0000 } );
    var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } );
    var multiMaterial = [ darkMaterial, wireframeMaterial ];


    // cube
    var shape = THREE.SceneUtils.createMultiMaterialObject(
        new THREE.CubeGeometry(50, 50, 50, 5, 5, 5),
        multiMaterial );
    shape.position.set(-200, 175, 0);
    scene.add( shape );


    // pyramid - truncated
    var shape = THREE.SceneUtils.createMultiMaterialObject(
        // radiusAtTop, radiusAtBottom, height, segmentsAroundRadius, segmentsAlongHeight,
        new THREE.CylinderGeometry( 15, 30, 100, 6, 4 ),
        multiMaterial );
    shape.position.set(-200, 100, 0);
    scene.add( shape );

   	// cube
	var shape = THREE.SceneUtils.createMultiMaterialObject(
		new THREE.CubeGeometry(50, 50, 50, 2, 2, 2),
		multiMaterial );
	shape.position.set(-200, 50, 0);
	scene.add( shape );

	// cone
	var shape = THREE.SceneUtils.createMultiMaterialObject(
		// radiusAtTop, radiusAtBottom, height, segmentsAroundRadius, segmentsAlongHeight,
		new THREE.CylinderGeometry( 0, 30, 70, 20, 4 ),
		multiMaterial );
	shape.position.set(-142, 110, 0);
	scene.add( shape );
    shape.rotation.set(100, 50, 11)
   	// cone
	var shape = THREE.SceneUtils.createMultiMaterialObject(
		// radiusAtTop, radiusAtBottom, height, segmentsAroundRadius, segmentsAlongHeight,
		new THREE.CylinderGeometry( 0, 30, 70, 20, 4 ),
		multiMaterial );
	shape.position.set(-200, 235, 0);
	scene.add( shape );
    // Cubes
    //   Note: when using a single image, it will appear on each of the faces.

    var cubeGeometry = new THREE.CubeGeometry( 85, 85, 85 );

    var crateTexture = new THREE.ImageUtils.loadTexture( 'images/crate.gif' ); // teksturos dezes
    var crateMaterial = new THREE.MeshBasicMaterial( { map: crateTexture } );
    crate = new THREE.Mesh( cubeGeometry.clone(), crateMaterial );
    crate.position.set(-100, 40, 300);
    scene.add( crate );


     var faceColorMaterial = new THREE.MeshBasicMaterial(
    { color: 0xffffff, vertexColors: THREE.FaceColors } );

    var cubeGeometry = new THREE.CubeGeometry( 100, 100, 100 );
    for ( var i = 0; i < cubeGeometry.faces.length; i++ )
    {
        face = cubeGeometry.faces[ i ];
        face.color.setRGB( 0, 0, 0.9 * Math.random() + 0.3 );
    }
    var cube = new THREE.Mesh( cubeGeometry, faceColorMaterial );
    cube.position.set(70, 50, 300);
    scene.add(cube);

    targetList.push(cube);

        // initialize object to perform world/screen calculations
    projector = new THREE.Projector();

    // when the mouse moves, call the given function
    document.addEventListener( 'mousedown', onDocumentMouseDown, false );


    }

    function addModelToScene( geometry, materials )
{
    // for preparing animation
    for (var i = 0; i < materials.length; i++)
        materials[i].morphTargets = true;

    var material = new THREE.MeshFaceMaterial( materials );
    lamp = new THREE.Mesh( geometry, material );
    lamp.scale.set(10,10,10);
    lamp.position.set(150,5,300);
    scene.add( lamp );
}

    function onDocumentMouseDown( event )
{
    // the following line would stop any other event handler from firing
    // (such as the mouse's TrackballControls)
    // event.preventDefault();
console.log("Click.");

    // update the mouse variable PELES KOORDINATES UPDEITINA
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

    // find intersections

    // create a Ray with origin at the mouse position
    //   and direction into the scene (camera direction)
    var vector = new THREE.Vector3( mouse.x, mouse.y, 1 );
    projector.unprojectVector( vector, camera );
    var ray = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );

    // create an array containing all objects in the scene with which the ray intersects
    var intersects = ray.intersectObjects( targetList );

    // if there is one (or more) intersections
    if ( intersects.length > 0 )
    {
        console.log("Hit @ " + toString( intersects[0].point ) );
        // change the color of the closest face.
        intersects[ 0 ].face.color.setRGB( 0.8 * Math.random() + 0.2, 0, 0 );
        intersects[ 0 ].object.geometry.colorsNeedUpdate = true;
    }
    // update sprite position
    //crate.position.set( event.clientX, event.clientY, 0 );
}

    function toString(v) { return "[ " + v.x + ", " + v.y + ", " + v.z + " ]"; }


function animate()
{
    requestAnimationFrame( animate );
    render();
    update();
}

function update()
{
    if ( keyboard.pressed("left") )
        {
        crate.translateX( -20);

        }
        if ( keyboard.pressed("right") )
            crate.translateX(  20 );

        if ( keyboard.pressed("up") )
            crate.translateZ(  -20 );

        if ( keyboard.pressed("down") )
            crate.translateZ(  20 );


        if ( keyboard.pressed("W") )
            crate.translateY(  20 );

        if ( keyboard.pressed("S") )
            crate.translateY(  -20 );

        if ( keyboard.pressed("A") )
            crate.translateX(  -20 );

        if ( keyboard.pressed("D") )
            crate.translateX(  20 );


    controls.update();
    stats.update();
}

function render()
{
        if ( lamp ) // exists / is loaded
    {

        // Calculate interpolation - how long a single frame is shown for:
        // Determine the current frame (keyframe) by calculating how much
        // more time of our animation cycle remains to be played thru.

        // Alternate morph targets
        time = new Date().getTime() % duration;
        keyframe = Math.floor( time / interpolation ) + animOffset;

        // Update the frame details if the keyframe just calculated is different to the
        // current keyframe:

        if ( keyframe != currentKeyframe )
        {
            // Update the morphTargetInfluences array to progress the animation
            lamp.morphTargetInfluences[ lastKeyframe ] = 0;
            lamp.morphTargetInfluences[ currentKeyframe ] = 1;
            lamp.morphTargetInfluences[ keyframe ] = 0;

            // Track previous/last keyframe and the current keyframe:
            lastKeyframe = currentKeyframe;
            currentKeyframe = keyframe;
        }
        lamp.morphTargetInfluences[ keyframe ] =
            ( time % interpolation ) / interpolation;
        lamp.morphTargetInfluences[ lastKeyframe ] =
            1 - lamp.morphTargetInfluences[ keyframe ];
    }

    renderer.render( scene, camera );
}

</script>

</body>
</html>