-
渊海2018-03-20 00:00
- 43
- 0
1.设计要求在轮播图中使用rgbShift效果，谷歌搜索找到three的例子于是进行改造后使用。单张图片使用没问题。但是放在轮播中就只有第一张图片显示出来的。
2.我们来看看代码
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- s1 -->
<div class="swiper-slide s1">
<div class="top">
<img class="slide-bj" src="images/slide/bj.jpg">
<div class="people whpa" id="swiperOne"></div>
<div class="zhe whpa"></div>
<div class="meng whpa"></div>
<div class="lang">
<img src="images/lang.png">
</div>
<div class="page-2-head">
<img src="images/head/head-1.png">
</div>
<div class="believe">
<img src="images/slide/believe-1.png">
</div>
</div>
<div class="text-box">
<div class="title">
<span class="name">轮播1</span>
<span class="country"><span> - </span>轮播1</span>
</div>
<div class="type">（轮播1）</div>
<div class="culture">轮播1</div>
</div>
</div>
<!-- s2 -->
<div class="swiper-slide s2">
<div class="top">
<img class="slide-bj" src="images/slide/bj.jpg">
<div class="people whpa" id="swiperTwo"></div>
<div class="zhe whpa"></div>
<div class="meng whpa"></div>
<div class="lang">
<img src="images/lang.png">
</div>
<div class="page-2-head">
<img src="images/head/head-2.png">
</div>
<div class="believe">
<img src="images/slide/believe-2.png">
</div>
</div>
<div class="text-box">
<div class="title">
<span class="name">轮播2</span>
<span class="country"><span> - </span>轮播2</span>
</div>
<div class="type">（轮播2）</div>
<div class="culture">轮播2</div>
</div>
</div>
<!-- s3 -->
<div class="swiper-slide s3">
<div class="top">
<img class="slide-bj" src="images/slide/bj.jpg">
<div class="people whpa" id="swiperThree"></div>
<div class="zhe whpa"></div>
<div class="meng whpa"></div>
<div class="lang">
<img src="images/lang.png">
</div>
<div class="page-2-head">
<img src="images/head/head-3.png">
</div>
<div class="believe">
<img src="images/slide/believe-3.png">
</div>
</div>
<div class="text-box">
<div class="title">
<span class="name">轮播3</span>
<span class="country"><span> - </span>轮播3</span>
</div>
<div class="type">（轮播3）</div>
<div class="culture">轮播3</div>
</div>
</div>
<!-- s4 -->
<div class="swiper-slide s4">
<div class="top">
<img class="slide-bj" src="images/slide/bj.jpg">
<div class="people whpa" id="swiperFour"></div>
<div class="zhe whpa"></div>
<div class="meng whpa"></div>
<div class="lang">
<img src="images/lang.png">
</div>
<div class="page-2-head">
<img src="images/head/head-4.png">
</div>
<div class="believe">
<img src="images/slide/believe-4.png">
</div>
</div>
<div class="text-box">
<div class="title">
<span class="name">轮播4</span>
<span class="country"><span> - </span>轮播4</span>
</div>
<div class="type">（轮播4）</div>
<div class="culture">轮播4</div>
</div>
</div>
<!-- s5 -->
<div class="swiper-slide s5">
<div class="top">
<img class="slide-bj" src="images/slide/bj.jpg">
<div class="people whpa" id="swiperFive"></div>
<div class="zhe whpa"></div>
<div class="meng whpa"></div>
<div class="lang">
<img src="images/lang.png">
</div>
<div class="page-2-head">
<img src="images/head/head-5.png">
</div>
<div class="believe">
<img src="images/slide/believe-5.png">
</div>
</div>
<div class="text-box">
<div class="title">
<span class="name">轮播5</span>
<span class="country"><span> - </span>轮播5</span>
</div>
<div class="type">（轮播5）</div>
<div class="culture">轮播5</div>
</div>
</div>
</div>
</div>var domID1 = "swiperOne";
var imgSrc1 = "images/slide/people-1.jpg";
var $swiper = $('.page-2 .center .swiper-container .swiper-wrapper .swiper-slide.s1 .top');
var swiperW = $swiper.width();
var swiperH = $swiper.height();
var scene1 = new THREE.Scene();
var camera1 = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000); // 角度 近平面 远平面 横纵比
var webGLRenderer1 = new THREE.WebGLRenderer();
webGLRenderer1.setSize(swiperW, swiperH);
webGLRenderer1.shadowMapEnabled = true;
camera1.position.x = 0;
camera1.position.y = 0;
camera1.position.z = 90;
camera1.lookAt(new THREE.Vector3(0, 0, 0));
var spotLight1 = new THREE.SpotLight(0xffffff);
spotLight1.castShadow = false; // 投影
var ambiLight1 = new THREE.AmbientLight(0xffffff);
scene1.add(ambiLight1);
scene1.add(spotLight1);
var geometry1 = new THREE.PlaneGeometry(50,78); //矩形平面
var texture1 = THREE.ImageUtils.loadTexture(imgSrc1); //加载纹理贴图
var material1=new THREE.MeshLambertMaterial({ //贴图通过材质添加给几何体
map:texture1, //给纹理属性map赋值
side:THREE.DoubleSide //两面可见
}); //材质对象
var mesh1 = new THREE.Mesh(geometry1,material1); //纹理贴图网格模型对象
scene1.add(mesh1); //网格模型添加到场景中
document.getElementById(domID1).appendChild(webGLRenderer1.domElement);
var rgbShift1 = new THREE.ShaderPass(THREE.RGBShiftShader);
var rgbAmount1 = 0.01;
var angle1 = 0;
var countUp1 = true;
setInterval(function(){
if ( countUp1 ) {
angle1 += 0.1;
rgbShift1.uniforms.angle.value = angle1;
} else {
angle1 -= 0.1;
rgbShift1.uniforms.angle.value = angle1;
}
if ( countUp1 && angle1 > 3 ) {
countUp1 = false;
} else if ( !countUp1 && angle1 <= 0 ) {
countUp1 = true;
}
},100);
rgbShift1.uniforms.amount.value = rgbAmount1;
rgbShift1.enabled = true;
var renderPass1 = new THREE.RenderPass(scene1, camera1);
var effectCopy1 = new THREE.ShaderPass(THREE.CopyShader);
effectCopy1.renderToScreen = true;
var composer1 = new THREE.EffectComposer(webGLRenderer1);
composer1.addPass(renderPass1);
composer1.addPass(rgbShift1);
composer1.addPass(effectCopy1);
render1();
function render1() {
requestAnimationFrame(render1);
composer1.render();
}我在每个轮播项中需要rgbShift效果的div加了个ID，写了5份js，每份的区别就是var后面的序号1-5。但是只有第一个能实现效果。
请问这个问题应该怎么解决？我是新手之前重来没接触过webGl，还请各位大神多多指点。
经过问题排查是最后的重新绘制出现了问题
render1();
function render1() {
requestAnimationFrame(render1);
composer1.render();
}就是这段代码，哪位大神能解释一下。
0
打赏
收藏
点击回答
网站公告
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部