如何将“粒子传奇JS”滑块中的每个图像链接到特定页面

时间:2019-11-22 12:17:46

标签: javascript canvas three.js html5-canvas particles

我正在使用粒子传奇JS在图像周围创建粒子效果。 这些图像使用JSON渲染,并且位于滑块中。如何为滑块中的每个图像提供指向特定页面的链接?

http://blakecarroll.github.io/particle-saga/ https://github.com/blakecarroll/particle-saga

除了three.js和particlesaga.js,这是我正在使用的代码:

<script type="text/javascript">

   var targets = [{
     type: ParticleSaga.ModelTarget,
     url: '/wp-content/themes/iot/dist/images/models/helmet.json',
     options: {
       color: {
         r: 0,
         g: 0,
         b: 0
       },
       scale: 60,
       size: 3,
       respondsToMouse: true
     }
   },{
     type: ParticleSaga.ModelTarget,
     url: '/wp-content/themes/iot/dist/images/models/gryphon.json',
     options: {
       color: {
         r: 0,
         g: 0,
         b: 0
       },
       size: 3,
       scale: 60,
       respondsToMouse: true,
       initialMatrices: [
         new THREE.Matrix4().makeTranslation(0, -2, 0),
         new THREE.Matrix4().makeRotationY(Math.PI / 2)
       ]
     }
   }];

   function setupDemoUI() {
     var next = document.getElementsByClassName('next')[0];
     var prev = document.getElementsByClassName('prev')[0];
     next.addEventListener('click', scene.nextTarget);
     prev.addEventListener('click', scene.prevTarget);
     document.body.addEventListener('keydown', onKeydown);
   }

   function onKeydown(e) {
     switch (e.keyCode) {
       case 37:
         scene.prevTarget();
         break;
       case 39:
         scene.nextTarget();
         break;
     }
   }

   // The scene's context element
   var saga = document.getElementById('saga');

   var scene = new ParticleSaga.Scene(saga, targets, {
     numParticles: 40000,
     sort: ParticleSaga.VertexSort.leftToRight
   });
   scene.load(function () {
     setupDemoUI();
     scene.setTarget(0);
     scene.startSlideshow();
   });

 </script>

0 个答案:

没有答案