1 Replies - 2465 Views - Last Post: 27 February 2013 - 09:12 PM

#1 Ecaz  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 26-February 13

How to tilt canvas on mouseover (image inside canvas)

Posted 26 February 2013 - 11:04 PM

Hey!

I'm a complete newbie when it comes to Javascript and canvases and stuff but I have this image (1920x1080) and what I want to do is when someone hovers over the image it tilts.

So if I move my mouse to the top of my image then it would look like the bottom of the image was coming out towards me and the top was going into the document. And if I move the mouse to the right the left side comes out a bit and the right side goes into the document.

Like this, http://www.simplevie...tiltviewer/app/ just more subtle and not in Flash.

I have no idea where to start or even how to start, I'm just diving into the more advanced section of Javascript right now so any help/advice would be greatly appreciated.

Is This A Good Question/Topic? 0
  • +

Replies To: How to tilt canvas on mouseover (image inside canvas)

#2 Ecaz  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 26-February 13

Re: How to tilt canvas on mouseover (image inside canvas)

Posted 27 February 2013 - 09:12 PM

This has been solved using Three.js.
    var camera, scene, renderer;
    var mouseX = 0, mouseY = 0;

    var windowHalfX = window.innerWidth / 2;
    var windowHalfY = window.innerHeight / 2;

    init();
    animate();

    function init() {
        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
        camera.position.z = 500;

        scene = new THREE.Scene();

        container = document.createElement( 'div' );
        document.body.appendChild( container );

        var planeTexture = new THREE.Texture();
        var loader = new THREE.ImageLoader();

        loader.addEventListener("load", function(event) {
            planeTexture.image = event.content;
            planeTexture.needsUpdate = true;
        });

        loader.load("text2.jpg");

        var geometry = new THREE.PlaneGeometry(window.innerWidth, window.innerHeight, 300, 3, 3, 3);
        var material = new THREE.MeshBasicMaterial({ map: planeTexture, overdraw: true });

        renderer = new THREE.CanvasRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);

        var plane = new THREE.Mesh(geometry, material);
        scene.add(plane);
        container.appendChild( renderer.domElement );

        document.addEventListener( 'mousemove', onDocumentMouseMove, false );

    }

    function onDocumentMouseMove( event ) {

        mouseX = ( event.clientX - windowHalfX );
        mouseY = ( event.clientY - windowHalfY );

    }

    function animate() {

        requestAnimationFrame( animate );

        render();

    }

    function render() {
        camera.position.x += ( mouseX - camera.position.x ) * 0.05;
        camera.position.y += ( - mouseY - camera.position.y ) * 0.05;

        camera.lookAt( scene.position );

        renderer.render( scene, camera );
    }


Was This Post Helpful? 0
  • +
  • -

Page 1 of 1