我正在使用粒子传奇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>