devbox
羊村懒王
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

three.js流动线_threejs流动线

作者：羊村懒王 | 2024-05-05 01:21:15

赞

踩

threejs流动线

效果：

先看最基本的

  1.  function initThree(el, options) {
  2.         options = options || {}
  3.         const t = this
  4.         appInstance  = this
  5.         const width = el.offsetWidth
  6.         const height = el.offsetHeight
  7.         const asp = width / height
  8.  
  9.         // scene
  10.         const scene = new THREE.Scene()
  11.  
  12.         // camera
  13.         let camera
  14.         if (options.camera) {
  15.             camera = options.camera
  16.         } else {
  17.             camera = new THREE.PerspectiveCamera(45, asp, 1, 100000)
  18.             window.addEventListener('resize', function() {
  19.                 camera.aspect = el.offsetWidth / el.offsetHeight
  20.                 renderer.setSize(el.offsetWidth, el.offsetHeight) // 重新获取
  21.                 camera.updateProjectionMatrix()
  22.                 renderer.render(scene, camera)
  23.             }, false)
  24.         }
  25.         camera.position.set(30, 30, 30)
  26.  
  27.         // renderer
  28.         const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
  29.         renderer.setPixelRatio(window.devicePixelRatio)
  30.         renderer.setSize(width, height)
  31.         el.append(renderer.domElement)
  32.         renderer.setClearColor(options.clearColor || '#000')
  33.  
  34.         // 辅助
  35.         if (options.axes) scene.add(new THREE.AxesHelper(10))// 坐标轴辅助红x 绿y 蓝z
  36.         if (options.gridHelper) scene.add(new THREE.GridHelper(100, 100))// 网格参考线
  37.  
  38.         //按序渲染
  39.         renderer.sortObjects = options.sortObjects
  40.  
  41.         // to the instance
  42.         t.renderer = renderer
  43.         t.scene = scene
  44.         t.camera = camera
  45.         t.el = el
  46.     }
  47.  
  48.     const el = document.getElementById('box')
  49.  
  50.     const app = new initThree(el,{
  51.         // gridHelper:true,//网格参考线
  52.         // axes:true,//坐标辅助
  53.         clearColor:'#000'//画布颜色
  54.     })
  55.     const camera = app.camera
  56.     const renderer = app.renderer
  57.     const scene = app.scene
  58.     function initControls(scene,camera,renderer) {
  59.         const controls = new THREE.OrbitControls( camera, renderer.domElement );
  60.         // 如果使用animate方法时，将此函数删除
  61.         controls.addEventListener( 'change', ()=>{
  62.             renderer.render( scene, camera );
  63.         });
  64.         // // 使动画循环使用时阻尼或自转 意思是否有惯性
  65.         // controls.enableDamping = true;
  66.         // //动态阻尼系数 就是鼠标拖拽旋转灵敏度
  67.         // //controls.dampingFactor = 0.25;
  68.         // //是否可以缩放
  69.         // controls.enableZoom = true;
  70.         // //是否自动旋转
  71.         // controls.autoRotate = true;
  72.         // controls.autoRotateSpeed = 0.5;
  73.         // //设置相机距离原点的最远距离
  74.         // controls.minDistance  = 1;
  75.         // //设置相机距离原点的最远距离
  76.         // controls.maxDistance  = 200;
  77.         // //是否开启右键拖拽
  78.         //controls.enablePan = true;
  79.         return controls
  80.     }
  81.     var controls = initControls(scene,camera,renderer)
  82.     const clock = new THREE.Clock()
  83.  
  84.     //add light
  85.     const directionalLight = new THREE.DirectionalLight( '#fff' )
  86.     directionalLight.position.set( 30, 30, 30 ).normalize()
  87.     scene.add( directionalLight )
  88.     const ambientLight = new THREE.AmbientLight('#fff',0.3) // obj 唯一 id
  89.     scene.add(ambientLight)
  90.    const pointList1 = [
  91.         [20,5,10],
  92.         [10,5,-9],
  93.         [10,5,20],
  94.         [-40,5,-40]
  95.     ]
  96.     let line1
  97.     textureLoader.load( '../../images/ysThree/green_line.png', function (texture1) {
  98.         const material1 = new MeshLineMaterial({
  99.             color: "green",
  100.             map: texture1,
  101.             useMap: true,
  102.             lineWidth: 4,
  103.             resolution: resolution,
  104.             dashArray: 0.8,  // 破折号之间的长度和间距。(0 -无破折号)
  105.             dashRatio: 0.5, // 定义可见和不可见之间的比率(0 -更可见，1 -更不可见)。
  106.             dashOffset: 0,
  107.             transparent: true,
  108.             sizeAttenuation: 1, //使线宽不变，不管距离(1个单位是屏幕上的1px)(0 -衰减，1 -不衰减)
  109.             side: THREE.FrontSide,
  110.             depthTest: true,
  111.             blending: THREE.AdditiveBlending,
  112.             near: camera.near,
  113.             far: camera.far,
  114.         })
  115.         const l = []
  116.         pointList1.forEach(e => l.push(new THREE.Vector3(e[0], e[1], e[2])))
  117.         let curve = new THREE.CatmullRomCurve3(l) // 曲线路径
  118.         const geo = new THREE.Geometry()
  119.         geo.vertices = curve.getPoints( 50)
  120.         console.log(geo)
  121.         const meshLine = new MeshLine()
  122.         meshLine.setGeometry(geo)
  123.         console.log(meshLine.geometry)
  124.         line1=new THREE.Mesh(meshLine.geometry, material1)
  125.         scene.add(line1)
  126.     })
  127.  
  128.    function render() {
  129.         controls.update(clock.getDelta())
  130.         renderer.render( scene,camera)
  131.         requestAnimationFrame(render)
  132.         //
  133.         if(line1){
  134.             line1.material.uniforms.dashOffset.value -= 0.01
  135.         }
  136.  
  137.     }
  138.     render()

由上文可以看到，其实核心就是基于meshline作者提供的插件来完成的。

完成代码如下：

  1. <script src="../../plugins/threeLibrary/three.min.js"></script>
  2. <script src="../../plugins/threeLibrary/js/controls/OrbitControls.js"></script>
  3. <script src="../../plugins/threeLibrary/js/lines/MeshLine.js"></script>
  4.  
  5. <script>
  6.  
  7.     function initThree(el, options) {
  8.         options = options || {}
  9.         const t = this
  10.         appInstance  = this
  11.         const width = el.offsetWidth
  12.         const height = el.offsetHeight
  13.         const asp = width / height
  14.  
  15.         // scene
  16.         const scene = new THREE.Scene()
  17.  
  18.         // camera
  19.         let camera
  20.         if (options.camera) {
  21.             camera = options.camera
  22.         } else {
  23.             camera = new THREE.PerspectiveCamera(45, asp, 1, 100000)
  24.             window.addEventListener('resize', function() {
  25.                 camera.aspect = el.offsetWidth / el.offsetHeight
  26.                 renderer.setSize(el.offsetWidth, el.offsetHeight) // 重新获取
  27.                 camera.updateProjectionMatrix()
  28.                 renderer.render(scene, camera)
  29.             }, false)
  30.         }
  31.         camera.position.set(30, 30, 30)
  32.  
  33.         // renderer
  34.         const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
  35.         renderer.setPixelRatio(window.devicePixelRatio)
  36.         renderer.setSize(width, height)
  37.         el.append(renderer.domElement)
  38.         renderer.setClearColor(options.clearColor || '#000')
  39.  
  40.         // 辅助
  41.         if (options.axes) scene.add(new THREE.AxesHelper(10))// 坐标轴辅助红x 绿y 蓝z
  42.         if (options.gridHelper) scene.add(new THREE.GridHelper(100, 100))// 网格参考线
  43.  
  44.         //按序渲染
  45.         renderer.sortObjects = options.sortObjects
  46.  
  47.         // to the instance
  48.         t.renderer = renderer
  49.         t.scene = scene
  50.         t.camera = camera
  51.         t.el = el
  52.     }
  53.  
  54.     const el = document.getElementById('box')
  55.  
  56.     const app = new initThree(el,{
  57.         // gridHelper:true,//网格参考线
  58.         // axes:true,//坐标辅助
  59.         clearColor:'#000'//画布颜色
  60.     })
  61.     const camera = app.camera
  62.     const renderer = app.renderer
  63.     const scene = app.scene
  64.     function initControls(scene,camera,renderer) {
  65.         const controls = new THREE.OrbitControls( camera, renderer.domElement );
  66.         // 如果使用animate方法时，将此函数删除
  67.         controls.addEventListener( 'change', ()=>{
  68.             renderer.render( scene, camera );
  69.         });
  70.         // // 使动画循环使用时阻尼或自转 意思是否有惯性
  71.         // controls.enableDamping = true;
  72.         // //动态阻尼系数 就是鼠标拖拽旋转灵敏度
  73.         // //controls.dampingFactor = 0.25;
  74.         // //是否可以缩放
  75.         // controls.enableZoom = true;
  76.         // //是否自动旋转
  77.         // controls.autoRotate = true;
  78.         // controls.autoRotateSpeed = 0.5;
  79.         // //设置相机距离原点的最远距离
  80.         // controls.minDistance  = 1;
  81.         // //设置相机距离原点的最远距离
  82.         // controls.maxDistance  = 200;
  83.         // //是否开启右键拖拽
  84.         //controls.enablePan = true;
  85.         return controls
  86.     }
  87.     var controls = initControls(scene,camera,renderer)
  88.     const clock = new THREE.Clock()
  89.  
  90.     //add light
  91.     const directionalLight = new THREE.DirectionalLight( '#fff' )
  92.     directionalLight.position.set( 30, 30, 30 ).normalize()
  93.     scene.add( directionalLight )
  94.     const ambientLight = new THREE.AmbientLight('#fff',0.3) // obj 唯一 id
  95.     scene.add(ambientLight)
  96.  
  97.  
  98.     camera.position.set(100,100,100)
  99.     const resolution = new THREE.Vector2( el.offsetWidth,  el.offsetHeight );
  100.     const textureLoader = new THREE.TextureLoader()
  101.  
  102.  
  103.     function getSphereHeightPoints (v0, v3, n1, n2, p0) {
  104.         // 夹角
  105.         const angle = (v0.angleTo(v3) * 180) / Math.PI / 10 // 0 ~ Math.PI
  106.         const aLen = angle * (n1 || 10)
  107.         const hLen = angle * angle * (n2 || 120)
  108.         p0 = p0 || new THREE.Vector3(0, 0, 0) // 默认以 坐标原点为参考对象
  109.         // 法线向量
  110.         const rayLine = new THREE.Ray(p0, v0.clone().add(v3.clone()).divideScalar(2))
  111.         // 顶点坐标
  112.         const vtop = rayLine.at(hLen / rayLine.at(1).distanceTo(p0))
  113.         // 计算制高点
  114.         const getLenVector = (v1, v2, len) => v1.lerp(v2, len / v1.distanceTo(v2))
  115.         // 控制点坐标
  116.         return [getLenVector(v0.clone(), vtop, aLen), getLenVector(v3.clone(), vtop, aLen)]
  117.     }
  118.  
  119.     /*  **** **** ****   ****/
  120.    function createAnimateLine (option) {
  121.         let curve
  122.         if (option.kind === 'sphere') { // 由两点之间连线成贝塞尔曲线
  123.             const sphereHeightPointsArgs = option.sphereHeightPointsArgs
  124.             const pointList = this.getSphereHeightPoints(...sphereHeightPointsArgs) // v0,v3,n1,n2,p0
  125.             curve = new THREE.CubicBezierCurve3(sphereHeightPointsArgs[0], pointList[0], pointList[1], sphereHeightPointsArgs[1])
  126.         } else { // 由多个点数组构成的曲线 通常用于道路
  127.             const l = []
  128.             option.pointList.forEach(e => l.push(new THREE.Vector3(e[0], e[1], e[2])))
  129.             curve = new THREE.CatmullRomCurve3(l) // 曲线路径
  130.         }
  131.         if (option.type === 'pipe') { // 使用管道线
  132.             // 管道体
  133.             const tubeGeometry = new THREE.TubeGeometry(curve, option.number || 50, option.radius || 1, option.radialSegments)
  134.             return new THREE.Mesh(tubeGeometry, option.material)
  135.         } else { // 使用 meshLine
  136.             if (!MeshLine || !MeshLineMaterial) console.error('you need import MeshLine & MeshLineMaterial!')
  137.             else {
  138.                 const geo = new THREE.Geometry()
  139.                 geo.vertices = curve.getPoints(option.number || 50)
  140.                 const meshLine = new MeshLine()
  141.                 meshLine.setGeometry(geo)
  142.                 return new THREE.Mesh(meshLine.geometry, option.material)
  143.             }
  144.         }
  145.     }
  146.  
  147.     const pointList1 = [
  148.         [20,5,10],
  149.         [10,5,-9],
  150.         [10,5,20],
  151.         [-40,5,-40]
  152.     ]
  153.     let line1
  154.     textureLoader.load( '../../images/ysThree/green_line.png', function (texture1) {
  155.         const material1 = new MeshLineMaterial({
  156.             color: "green",
  157.             map: texture1,
  158.             useMap: true,
  159.             lineWidth: 4,
  160.             resolution: resolution,
  161.             dashArray: 0.8,  // 破折号之间的长度和间距。(0 -无破折号)
  162.             dashRatio: 0.5, // 定义可见和不可见之间的比率(0 -更可见，1 -更不可见)。
  163.             dashOffset: 0,
  164.             transparent: true,
  165.             sizeAttenuation: 1, //使线宽不变，不管距离(1个单位是屏幕上的1px)(0 -衰减，1 -不衰减)
  166.             side: THREE.FrontSide,
  167.             depthTest: true,
  168.             blending: THREE.AdditiveBlending,
  169.             near: camera.near,
  170.             far: camera.far,
  171.         })
  172.         const l = []
  173.         pointList1.forEach(e => l.push(new THREE.Vector3(e[0], e[1], e[2])))
  174.         let curve = new THREE.CatmullRomCurve3(l) // 曲线路径
  175.         const geo = new THREE.Geometry()
  176.         geo.vertices = curve.getPoints( 50)
  177.         console.log(geo)
  178.         const meshLine = new MeshLine()
  179.         meshLine.setGeometry(geo)
  180.         console.log(meshLine.geometry)
  181.         line1=new THREE.Mesh(meshLine.geometry, material1)
  182.         scene.add(line1)
  183.     })
  184.  
  185.     /** 2：绘制普通pipeLine**/
  186.  
  187.     const pointList2 = [
  188.         [-20,5,-10],
  189.         [30,5,-15],
  190.         [10,5,20],
  191.         [40,5,40]
  192.     ]
  193.     const texture2 = textureLoader.load("../../images/ysThree/red_line.png")
  194.     texture2.wrapS = texture2.wrapT = THREE.RepeatWrapping; //每个都重复
  195.     texture2.repeat.set(1, 1)
  196.     const  material2 = new THREE.MeshBasicMaterial({map:texture2,side:THREE.BackSide,transparent:true})
  197.     texture2.needsUpdate = true
  198.     const line2 = createAnimateLine({
  199.         // kind: 'sphere',//默认不填 为普通 ; 如为sphere,则表示球面建点
  200.         type: 'pipe',//默认不填 为MeshLine ; 如为pipe,则表示管道线
  201.         pointList: pointList2,
  202.         material: material2,
  203.         number: 100
  204.     })
  205.     scene.add(line2)
  206.  
  207.     /** 1：在球面上绘制meshLine**/
  208.     const v0 =  new THREE.Vector3( -80, 10,  0 )
  209.     const v3 =  new THREE.Vector3( 80, 10,  0 )
  210.  
  211.     let line3
  212.     textureLoader.load( '../../images/ysThree/green_line.png', function (texture3) {
  213.         const material3 = new MeshLineMaterial({
  214.             color: "green",
  215.             map: texture3,
  216.             useMap: true,
  217.             lineWidth: 4,
  218.             resolution: resolution,
  219.             dashArray: 0.8,  // 破折号之间的长度和间距。(0 -无破折号)
  220.             dashRatio: 0.5, // 定义可见和不可见之间的比率(0 -更可见，1 -更不可见)。
  221.             dashOffset: 0,
  222.             transparent: true,
  223.             sizeAttenuation: 1, //使线宽不变，不管距离(1个单位是屏幕上的1px)(0 -衰减，1 -不衰减)
  224.             side: THREE.FrontSide,
  225.             depthTest: true,
  226.             blending: THREE.AdditiveBlending,
  227.             near: camera.near,
  228.             far: camera.far,
  229.         })
  230.         line3 = createAnimateLine({
  231.             kind: 'sphere',//默认不填 为普通 ; 如为sphere,则表示球面建点
  232.             // type: 'pipe',//默认不填 为MeshLine ; 如为pipe,则表示管道线
  233.             sphereHeightPointsArgs: [v0,v3],
  234.             material: material3
  235.         })
  236.         scene.add(line3)
  237.     })
  238.  
  239.     /** 1：在球面上绘制pipeLine**/
  240.  
  241.     const v0_1 =  new THREE.Vector3( -60, 10,  0 )
  242.     const v3_1 =  new THREE.Vector3( 60, 10,  0 )
  243.  
  244.     const texture4 = textureLoader.load("../../images/ysThree/red_line.png")
  245.     texture4.wrapS = texture4.wrapT = THREE.RepeatWrapping; //每个都重复
  246.     texture4.repeat.set(1, 1)
  247.     const  materia4 = new THREE.MeshBasicMaterial({map:texture4,side:THREE.BackSide,transparent:true})
  248.     texture4.needsUpdate = true
  249.     const line4 = createAnimateLine({
  250.         kind: 'sphere',//默认不填 为普通 ; 如为sphere,则表示球面建点
  251.         type: 'pipe',//默认不填 为MeshLine ; 如为pipe,则表示管道线
  252.         sphereHeightPointsArgs: [v0_1,v3_1],
  253.         material: materia4,
  254.         number: 100,
  255.         radius: 1 // 默认
  256.     })
  257.     scene.add(line4)
  258.  
  259.     /*  **** **** ****   ****/
  260.     function render() {
  261.         controls.update(clock.getDelta())
  262.         renderer.render( scene,camera)
  263.         requestAnimationFrame(render)
  264.         //
  265.         if(line1){
  266.             line1.material.uniforms.dashOffset.value -= 0.01
  267.         }
  268.  
  269.         //
  270.         texture2.offset.x -= 0.01
  271.  
  272.         //
  273.         if(line3){
  274.             line3.material.uniforms.dashOffset.value -= 0.01
  275.         }
  276.  
  277.         texture4.offset.x -= 0.01
  278.     }
  279.     render()
  280. </script>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/536716
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号