0

I’m trying to make a piece using three js where the object tilts away from the mouse on mouseover, like the locations here (mouse over the VIST tab):

https://meowwolf.com/explore

I don’t know whether this utilized three js or another library, but I don’t know how to go about it. I can’t find any examples on three js.org with the same “tilt away” technology.

So far Im just working with the basic cube example, but ultimately want to be able to "tilt" other objects/particles.

var camera, scene, renderer;
            var mesh;
            init();
            animate();
            function init() {
                camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
                camera.position.z = 400;
                scene = new THREE.Scene();
                var texture = new THREE.TextureLoader().load( 'textures/crate.gif' );
                var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
                var material = new THREE.MeshBasicMaterial( { map: texture } );
                mesh = new THREE.Mesh( geometry, material );
                scene.add( mesh );
                renderer = new THREE.WebGLRenderer( { antialias: true } );
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                document.body.appendChild( renderer.domElement );

How can I do this, starting with just a box?

FOR CLARITY:

The meow wolf site has the objects tilt toward the corner of the object where the mouse is, and lerp back to original rotation when mouse exits

blue
  • 7,175
  • 16
  • 81
  • 179
  • I am not really sure what you mean by "tilt away", do you just mean rotation? Three.js seems like it may be overkill if you just want something to "tilt". The site you link to just uses css transforms. – 2pha Jul 14 '19 at 23:07
  • @2pha no, Im using three JS for the project because it's a lot more complex than a cube. Im asking to imitate the rotate away animations of the Meow Wolf site, in three JS because I'm already using three JS – blue Jul 14 '19 at 23:10

0 Answers0