模拟楼宇扫光效果(three.js实战12)

最新推荐文章于 2024-09-17 20:30:37 发布
最新推荐文章于 2024-09-17 20:30:37 发布
阅读量3.2k 收藏 26
点赞数 11
分类专栏： three.js实战 文章标签： ShaderMaterial three.js 三维web 三维可视化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qw8704149/article/details/119620151
版权

1. demo效果

2. 实现要点

2.1 创建shader材质

这一步中主要是为了实现楼宇从下到上的扫光，而定制的着色器材质，在着色器材质中书写顶点着色器和片元着色器，具体如下

    let buildingSweepingLightShader = {
      uniforms: {
        "boxH": {
          type: "f",
          value: -10.0
        }
      },
      vertexShader: `
      varying vec3 vColor;
      varying float v_pz;
      void main(){
        v_pz = position.y;
        vColor = color;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
      }
    `,
      fragmentShader: `
      uniform float boxH;
      varying vec3 vColor;
      varying float v_pz;
      float plot(float pct){
        return smoothstep(pct-8.0,pct,v_pz) - smoothstep(pct,pct+0.02,v_pz);
      }
      void main(){
        float f1 = plot(boxH);
        vec4 b1 = mix(vec4(0.9,0.2,1.0,0.1),vec4(f1,f1,f1,1.0),0.1);

        gl_FragColor = mix(vec4(vColor,1.0),b1,f1);
        gl_FragColor = vec4(vec3(gl_FragColor),0.9);

      }
    `
    };

    const material = new THREE.ShaderMaterial({
      uniforms: buildingSweepingLightShader.uniforms,
      vertexShader: buildingSweepingLightShader.vertexShader,
      fragmentShader: buildingSweepingLightShader.fragmentShader,
      vertexColors: buildingSweepingLightShader
    })
    material.needsUpdate = true

2.2 创建模拟楼宇Mesh

这里主要使用上一步创建的着色器材质和使用BoxBufferGeometry创建的几何体创建Mesh对象，并随机生成高度模拟楼宇

        function initModel() {
      //创建60个立方体模拟楼宇
      for (let i = 0; i < 60; i++) {
        const height = Math.random() * 10 + 2
        const width = 3
        const cubeGeom = new THREE.BoxBufferGeometry(width, height, width)
        cubeGeom.setAttribute('color', new THREE.BufferAttribute(new Float32Array(24 * 3), 3))
        const colors = cubeGeom.attributes.color
        let r = Math.random() * 0.2,
          g = Math.random() * 0.1,
          b = Math.random() * 0.8
        //设置立方体六个面24个顶点的颜色  
        for (let i = 0; i < 24; i++) {
          colors.setXYZ(i, r, g, 0.6)
        }
        //重置立方体顶部四边形的四个顶点的颜色
        const k = 2
        colors.setXYZ(k * 4 + 0, .0, g, 1.0)
        colors.setXYZ(k * 4 + 1, .0, g, 1.0)
        colors.setXYZ(k * 4 + 2, .0, g, 1.0)
        colors.setXYZ(k * 4 + 3, .0, g, 1.0)
        const cube = new THREE.Mesh(cubeGeom, material)
        cube.position.set(Math.random() * 100 - 50, height / 2, Math.random() * 100 - 50)
        scene.add(cube)

        //绘制边框线
        const lineGeom = new THREE.EdgesGeometry(cubeGeom)
        const lineMaterial = new THREE.LineBasicMaterial({
          color: 0x018BF5,
          linewidth: 1,
          linecap: 'round',
          linejoin: 'round'
        })
        const line = new THREE.LineSegments(lineGeom, lineMaterial)
        line.scale.copy(cube.scale)
        line.rotation.copy(cube.rotation)
        line.position.copy(cube.position)
        scene.add(line)
      }
    }

2.3 render中更新uniform变量

这一步主要是通过着色器材质中的uniform变量boxH向着色器中传值楼宇中扫光的高度，具体如下

buildingSweepingLightShader.uniforms.boxH.value += 0.1
if (buildingSweepingLightShader.uniforms.boxH.value > 10) {
    buildingSweepingLightShader.uniforms.boxH.value = -10
}

3. demo代码

<!DOCTYPE html>

<html>

<head>
  <title>Example 12 - buildingSweepingLight</title>
  <script type="text/javascript" src="../three/build/three.js"></script>
  <script type="text/javascript" src="../three/examples/js/controls/OrbitControls.js"></script>
  <script type="text/javascript" src="../three/examples/js/libs/stats.min.js"></script>


  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
  </style>
</head>

<body>

  <div id="Stats-output"></div>
  <div id="WebGL-output"></div>

  <script type="text/javascript">
    let stats, controls;
    let camera, scene, renderer;
    let buildingSweepingLightShader = {
      uniforms: {
        "boxH": {
          type: "f",
          value: -10.0
        }
      },
      vertexShader: `
      varying vec3 vColor;
      varying float v_pz;
      void main(){
        v_pz = position.y;
        vColor = color;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
      }
    `,
      fragmentShader: `
      uniform float boxH;
      varying vec3 vColor;
      varying float v_pz;
      float plot(float pct){
        return smoothstep(pct-8.0,pct,v_pz) - smoothstep(pct,pct+0.02,v_pz);
      }
      void main(){
        float f1 = plot(boxH);
        vec4 b1 = mix(vec4(0.9,0.2,1.0,0.1),vec4(f1,f1,f1,1.0),0.1);

        gl_FragColor = mix(vec4(vColor,1.0),b1,f1);
        gl_FragColor = vec4(vec3(gl_FragColor),0.9);

      }
    `
    };

    const material = new THREE.ShaderMaterial({
      uniforms: buildingSweepingLightShader.uniforms,
      vertexShader: buildingSweepingLightShader.vertexShader,
      fragmentShader: buildingSweepingLightShader.fragmentShader,
      vertexColors: buildingSweepingLightShader
    })
    material.needsUpdate = true

    function initScene() {
      scene = new THREE.Scene();
    }

    function initCamera() {
      camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
      camera.position.set(30, 40, 80)
      camera.lookAt(new THREE.Vector3(0, 0, 0));
    }

    function initLight() {
      //添加环境光
      var ambientLight = new THREE.AmbientLight(0xffffff);
      scene.add(ambientLight);

      var spotLight = new THREE.SpotLight(0xffffff);
      spotLight.position.set(5, 10, 20);
      spotLight.castShadow = true;
      scene.add(spotLight);
    }


    function initModel() {
      //创建60个立方体模拟楼宇
      for (let i = 0; i < 60; i++) {
        const height = Math.random() * 10 + 2
        const width = 3
        const cubeGeom = new THREE.BoxBufferGeometry(width, height, width)
        cubeGeom.setAttribute('color', new THREE.BufferAttribute(new Float32Array(24 * 3), 3))
        const colors = cubeGeom.attributes.color
        let r = Math.random() * 0.2,
          g = Math.random() * 0.1,
          b = Math.random() * 0.8
        //设置立方体六个面24个顶点的颜色  
        for (let i = 0; i < 24; i++) {
          colors.setXYZ(i, r, g, 0.6)
        }
        //重置立方体顶部四边形的四个顶点的颜色
        const k = 2
        colors.setXYZ(k * 4 + 0, .0, g, 1.0)
        colors.setXYZ(k * 4 + 1, .0, g, 1.0)
        colors.setXYZ(k * 4 + 2, .0, g, 1.0)
        colors.setXYZ(k * 4 + 3, .0, g, 1.0)
        const cube = new THREE.Mesh(cubeGeom, material)
        cube.position.set(Math.random() * 100 - 50, height / 2, Math.random() * 100 - 50)
        scene.add(cube)

        //绘制边框线
        const lineGeom = new THREE.EdgesGeometry(cubeGeom)
        const lineMaterial = new THREE.LineBasicMaterial({
          color: 0x018BF5,
          linewidth: 1,
          linecap: 'round',
          linejoin: 'round'
        })
        const line = new THREE.LineSegments(lineGeom, lineMaterial)
        line.scale.copy(cube.scale)
        line.rotation.copy(cube.rotation)
        line.position.copy(cube.position)
        scene.add(line)
      }
    }

    function initRender() {

      renderer = new THREE.WebGLRenderer({
        antialias: true,
        alpha: true
      })
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.setClearColor(0x0f2d48, 1) // 设置背景颜色
      renderer.toneMapping = THREE.ACESFilmicToneMapping;
      document.getElementById("WebGL-output").appendChild(renderer.domElement);
    }

    //初始化轨道控制器
    function initControls() {
      clock = new THREE.Clock() // 创建THREE.Clock对象，用于计算上次调用经过的时间
      controls = new THREE.OrbitControls(camera, renderer.domElement)
    }

    function init() {
      initScene();
      initCamera();
      initLight();
      initRender();
      initStats();
      initControls();
      initModel();
      render();
    }

    function updateFun() {
      stats.update();
      const delta = clock.getDelta() // 获取自上次调用的时间差
      controls.update(delta) // 相机更新

      buildingSweepingLightShader.uniforms.boxH.value += 0.1
      if (buildingSweepingLightShader.uniforms.boxH.value > 10) {
        buildingSweepingLightShader.uniforms.boxH.value = -10
      }
    }

    function render() {

      updateFun()
      requestAnimationFrame(render);
      renderer.render(scene, camera);
    }

    function initStats() {
      stats = new Stats();
      stats.setMode(0); // 0: fps, 1: ms

      document.getElementById("Stats-output").appendChild(stats.domElement);
    }

    window.onload = init;
  </script>
</body>

</html>

点燃火柴
关注
专栏目录
three.js实现楼宇扫描效果(three.js练习)
weixin_40856652的博客
06-09 1979
智慧城市、酷炫动效,threejs、webgl、shader、3D、光墙效果。使用shader实现楼宇扫描效果
maptalks.three+threejs建筑物上下扫描效果
leo的博客
02-02 1152
maptalks.three+threejs建筑物上下扫描效果
Three.js实现3D城市扫光效果
05-17
特效 使用Obj 模型 + shader 实线 加载 obj 格式文件加载到 scene中； 使用 ShaderMaterial 材质。     var Shader = { vertexShader: ` varying vec3 vp; void main(){ vp = position; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `,
Threejs之看房案例（上）
最新发布
你华还是你华
09-17 1524
Three.js是一个基于WebGL的JavaScript3D库，它允许在网页上创建和显示3D图形。在房地产行业中，Three.js常被用于实现全景看房案例，为用户提供沉浸式的房屋浏览体验。
three.js实战-shader实现antv L7城市扫光效果
weixin_46773434的博客
10-24 3392
上图我们可以看到一个个的光波从城市中心像远处扩散，光波略过的高楼与地面会呈现高亮的状态，并且根据光波的宽度(大圈的半径 - 小圈的半径)高亮还呈现出渐变的状态。在WebGL编程指南-27 逐片元处理点光源光照效果我们知道，点光源照射在物体上的明暗效果，是通过该片元到顶点距离跟顶点法线来决定的，那我们可以借此思路来实现，大致思路是一个不断变大的圆，这个圆分大圆与小圆，在大圆与小圆之间的片元呈高光效果我们借助three.js官网提供的一个例子画出城市，在此例子基础上实现扫光效果 2. 给大楼添加纹理贴图 3.
可视化-three.js 城市 波浪特效 城市 扫光 掠过效果
stonerao
10-31 9250
![](https://img-blog.csdnimg.cn/20191031161557879.gif 使用Obj 模型 + shader 实线 模型以及代码 加载 obj 格式文件加载到 scene中； 使用 ShaderMaterial 材质 var Shader = { vertexShader: ` varying vec3 vp; void ...
Three.js实战项目-智慧楼宇
qq_39503511的博客
11-12 5009
如有不明白的可以加QQ：2781128388先看看视频效果Three.js 建筑可视化监控分别具备楼层展示，楼层热力度分析，扩散波特效，无人机飞行，飞行路径点规划，扩散波特效，多场景下钻，多文本渲染，路径动画。
three.js光效扫描
A873054267的博客
06-14 3834
<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="../.....
vue2，3+js+ts的three.js 项目，一共四个项目 ，厂房，机台，楼层显示
07-17
在本项目中，我们主要探讨的是使用Vue2和Vue3框架，JavaScript，TypeScript以及Three.js库构建的四个可视化项目，分别涉及厂房、机台、楼层的显示。这些项目展示了如何将前端技术与3D图形渲染相结合，为工业场景提供...
three.js 智慧城市模型
07-06
Three.js 是一款基于 WebGL 的 JavaScript 库，用于在浏览器中创建三维图形和动画，它在构建智慧城市模型中扮演了核心角色。本文将深入探讨如何利用 three.js 来创建智慧城市的虚拟表示，并介绍与之相关的技术知识点...
基于vue3，three.js,3D智慧园区
11-09
**Three.js**: Three.js是一个强大的JavaScript库，用于在Web浏览器中创建和展示3D对象。它简化了WebGL的使用，提供了一个面向对象的接口，用于创建场景、几何体、材质、光源等。在“3D智慧园区”项目中，Three.js被...
基于threejs实现室内模型的动态装载源码(智慧楼宇).zip
11-20
1,智慧楼宇楼层设施动态装载 2,基于threejs分步加载减少初始化压力。
threejs+shader 雷达扫描.zip
02-22
threejs+shader 雷达扫描，多种样式扫描效果
Threejs 波纹扩散，光圈扩散
09-21
threejs 光圈扩散 波纹扩散效果 像智慧城市，建筑等三维物体外围有个光圈向外扩散效果，文件请发布到ngix或者iis等其它web服务器里，然后浏览，直接打开不行！
three.js建筑灯光秀效果（模拟城市灯光秀）
weixin_40856652的博客
04-03 1450
three.js建筑灯光秀效果（模拟城市灯光秀）
three.js通过自定义着色器实现智慧城市扫光效果
嘿嘿，大部分都是前端三维开发的时候遇到的问题，顺手解决了，如果你也遇到了和我一样的问题，希望我的文章可以帮到你
12-06 2262
在three.js中通过自定义着色器ShaderMaterial实现智慧城市扫光效果
three.js实现模型扫光效果
yunbabac的博客
01-08 795
【代码】three.js实现模型扫光效果。
three.js 后处理-自定义shader 扫光效果
A873054267的博客
06-29 1585
先上效果吧 shader来源于 https://www.cnblogs.com/eco-just/p/11667713.html 源代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="ren.
three.js通过自定义后期处理实现智慧城市扫光效果
嘿嘿，大部分都是前端三维开发的时候遇到的问题，顺手解决了，如果你也遇到了和我一样的问题，希望我的文章可以帮到你
01-09 1350
three.js通过自定义后期处理实现智慧城市扫光效果
three.js 实现智慧楼宇
01-05
three.js是一个用于创建3D图形的JavaScript库，它可以在Web浏览器中实现智慧楼宇的效果。下面是一个使用three.js实现智慧楼宇的简单示例： ```javascript // 创建场景 var scene = new THREE.Scene(); // 创建相机 var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; // 创建渲染器 var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 创建楼宇模型 var geometry = new THREE.BoxGeometry(1, 1, 1); var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); var cube = new THREE.Mesh(geometry, material); scene.add(cube); // 动画循环 function animate() { requestAnimationFrame(animate); // 旋转楼宇模型 cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); } animate(); ``` 这个示例创建了一个简单的立方体楼宇模型，并通过旋转动画使其旋转起来。你可以根据自己的需求修改模型的形状、材质和动画效果，以实现更复杂的智慧楼宇效果。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值