three.js光效扫描

所需的js文件，可以再该网站取得

https://www.wellyyss.cn/ysThree/main/app.html

相较于原文，简化了一些shader，方便初学者理解

smoothstep函数的功能可以再shadertoy上进行测试

<script src="../../plugins/ys/ys.min.js"></script>
<script src="../../plugins/threeLibrary/three.min.js"></script>
<script src="../../plugins/threeLibrary/js/controls/OrbitControls.js"></script>
<script src="../../plugins/createJs/tween.min.js"></script>
<script src="../../plugins/threeLibrary/js/libs/stats.min.js"></script>
<script src="../../plugins/ysThree/ysThree-1.0.1.js"></script><script>const el = document.getElementById('box')const app = new YsThree(el,{gridHelper:true,//网格参考线axes:true,//坐标辅助clearColor:'#000'//画布颜色})const camera = app.cameraconst renderer = app.rendererconst scene = app.sceneconst controls = app.initOrbitControls()const clock = new THREE.Clock()//add lightconst directionalLight = new THREE.DirectionalLight( '#fff' )directionalLight.position.set( 30, 30, 30 ).normalize()scene.add( directionalLight )const ambientLight = new THREE.AmbientLight('#fff',0.3) // obj 唯一 idscene.add(ambientLight)/*  **** **** ****   ****/app.initStatus(Stats)var vertexShader=['varying vec3 vColor;','varying vec3   vVertexNormal;',"varying vec2 vUv;",'varying float v_pz; ','void main(){','   v_pz = position.y; ',   //获取顶点位置的y'    vVertexNormal   = normal;', //顶点法向量---内置  http://www.yanhuangxueyuan.com/threejs/docs/index.html#api/zh/renderers/webgl/WebGLProgram'   vColor = color;',  //顶点颜色'    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);',//顶点位置'}'].join('\n')var fragmentShader= ['uniform float   boxH;',        //立方体高度，uniform传入'varying vec3  vVertexNormal;',  //顶点法向量，由顶点着色器传入--插值'varying vec3 vColor;',       //顶点颜色，由顶点着色器传入--插值"varying vec2 vUv;",         //纹理坐标，顶点着色器传入'varying float v_pz; ',      //y的值，顶点着色器传入'float plot ( float pct){',//pct是box的高度，v_pz是y的值'return  smoothstep( pct-8.0, pct, v_pz) -',  //（smoothstep(edge1,edge2,x)）smoothstep函数定义从0到1之间由edge1和edge2上下边界，x为输入值，返回插值'smoothstep( pct, pct+0.02, v_pz);',   //不在0-1范围内的数会被归一化到0和1内，越界会被设为0/1'}','void main(){','float f1 = plot(boxH);',    //以当前盒子的高度（光效），和y的值计算出颜色'vec4 b1 = mix(vec4(1.0,1.0,1.0,1.0),vec4(f1,f1,f1,1.0),0.8);','gl_FragColor = mix(vec4(vColor,1.0),b1,f1);',//混合两种颜色'gl_FragColor = vec4(gl_FragColor.r,gl_FragColor.g,gl_FragColor.b,0.9);',//重新设置片元颜色'}'].join('\n')const  ShaderBar = {uniforms: {boxH: { value: -10.0 },},vertexShader: vertexShader,fragmentShader: fragmentShader}const material = new THREE.ShaderMaterial({uniforms: ShaderBar.uniforms,vertexShader: ShaderBar.vertexShader,fragmentShader: ShaderBar.fragmentShader,vertexColors: ShaderBar,  //暂时未理解该处作用});material.needsUpdate = truefunction addCube() {for (let i = 0 ;i<100;i++){const h =  Math.random()*6 + 5const  cubeGeo = new THREE.BoxBufferGeometry(1, h, 1);cubeGeo.setAttribute('color', new THREE.BufferAttribute(new Float32Array(24 * 3), 3)); // setAttribute 以前是.addAttribute// 相当于在 shader中创建了 attribute vec4 positionconst colors1 = cubeGeo.attributes.color;for (let i = 0; i < 24; i+=2) {let r = Math.random()*0.8,g=Math.random()*0.7,b=Math.random()*0.5;colors1.setXYZ(i, r, g, b);colors1.setXYZ(i+1,r, g, b);}const k = 2;colors1.setXYZ(k * 4 + 0, .0, 1.0, 1.0);colors1.setXYZ(k * 4 + 1, .0, 1.0, 1.0);colors1.setXYZ(k * 4 + 2, .0, 1.0, 1.0);colors1.setXYZ(k * 4 + 3, .0, 1.0, 1.0);const cube = new THREE.Mesh( cubeGeo,material)cube.position.set(Math.random()*100 - 50,h / 2,Math.random()*100 - 50)scene.add(cube)}}addCube()/*  **** **** ****   ****/function render() {controls.update(clock.getDelta())renderer.render( scene,camera)TWEEN.update()app.staus.update()ShaderBar.uniforms.boxH.value =  ShaderBar.uniforms.boxH.value + 0.1if( ShaderBar.uniforms.boxH.value > 30){ShaderBar.uniforms.boxH.value =  -10.0}requestAnimationFrame(render)}render()
</script>

three.js光效扫描相关推荐

Three.js拉伸扫描成型ExtrudeGeometry
拉伸扫描成型ExtrudeGeometry 本文是Three.js电子书的7.8节构造函数ExtrudeGeometry()和ShapeGeometry一样是利用Shape对象生成几何体对象,区别在 ...
js实现扫描付款码获取数据
使用FNScanner的工具,具体如下 ~function (W) { var FNScanner = false; W.FNScanner = function (callBack) { if (! ...
js通过扫描枪快速扫码录入的功能实现(区分手动输入和扫码枪录入)-pc
扫码录入实践实践背景需要解决的问题代码实现最终代码结语实践背景在近期工作过程中接手了一个让我有些棘手的需求,需求如下: 输入框内支持扫码录入商品,且支持连续扫码录入. 相同输入框中支持手 ...
js和html5实现扫描条形码
最近项目有个功能,需要实现扫描条形码,最开始想到的是利用html5,发现html5有个getUserMedia属性,可以调用手机的摄像头,但是有个问题,网页中的摄像无法拉大光圈,焦距不好控制,近距离无 ...
js 条码枪扫描_使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
下面通过实例代码给大家介绍js扫码枪扫描条形码的实现方法,具体代码如下所示: var keycode = ""; var lastTime=null,nextTime; var l ...
Node.js 入门到干活，10 个优质项目就够了！
Node.js 在很多大公司都有不错的实践,比如:淘宝.天猫 Web 版,很多页面都是在 Node 服务器上渲染的.还有各种脚手架.前端打包发布工具.构建生态的小工具,也基本都是 Node.js 编写 ...
JS高级——变量提升
JS执行过程 1.首先是预解析:预解析过程最重要的是提升,在JavaScript代码在预解析阶段,会对以var声明的变量名,和function开头的语句块,进行提升操作 2.执行操作全局中解析和执行 ...
llqrcode.js识别二维码，解析二维码信息
llqrcode.js具有扫描二维码功能,用来进行从图片中识别二维码,可解析二维码的信息. 直接上代码 <!DOCTYPE html> <html> <head>& ...
nodejs之二维码扫描-实现兑换码自动核销
nodejs二维码扫描-实现兑换码自动核销背景实现概述开发环境相关依赖微信网页授权第一步:用户同意授权,获取code 第二步:通过code换取网页授权access_token 第三步:拉取 ...

three.js光效扫描

three.js光效扫描相关推荐

最新文章

热门文章