三个JS-使对象在悬停时远离鼠标倾斜?

时间:2019-07-14 21:48:39

标签: javascript html 3d pythreejs

我正在尝试使用三个js制作一个对象,使对象在鼠标悬停时远离鼠标倾斜,例如(在“ VIST”标签上的鼠标)

https://meowwolf.com/explore

我不知道它是否使用了三个js或另一个库,但是我不知道该怎么做。我在三个js.org上都找不到使用相同“倾斜”技术的示例。

到目前为止,我只是使用基本的多维数据集示例,但最终希望能够“倾斜”其他对象/粒子。

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 );

如何从一个盒子开始呢?

出于清晰度:

喵狼站点中的对象朝着鼠标所在对象的一角倾斜,并在鼠标退出时回到原始旋转状态

0 个答案:

没有答案