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

最新推荐文章于 2024-12-23 10:44:35 发布
最新推荐文章于 2024-12-23 10:44:35 发布
阅读量3.3k 收藏 27
点赞数 12
分类专栏： 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 2041
智慧城市、酷炫动效,threejs、webgl、shader、3D、光墙效果。使用shader实现楼宇扫描效果
基于vue3，three.js,3D智慧园区
11-09
**Three.js**: Three.js是一个强大的JavaScript库，用于在Web浏览器中创建和展示3D对象。它简化了WebGL的使用，提供了一个面向对象的接口，用于创建场景、几何体、材质、光源等。在“3D智慧园区”项目中，Three.js被...
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); } `,
three.js实现模型扫光效果
yunbabac的博客
01-08 909
【代码】three.js实现模型扫光效果。
three.js混合白色模型的智慧城市扫光效果
12-23 426
three.js混合白色模型的智慧城市扫光效果。
可视化-three.js 城市 波浪特效 城市 扫光 掠过效果
stonerao
10-31 9334
![](https://img-blog.csdnimg.cn/20191031161557879.gif 使用Obj 模型 + shader 实线 模型以及代码 加载 obj 格式文件加载到 scene中； 使用 ShaderMaterial 材质 var Shader = { vertexShader: ` varying vec3 vp; void ...
three.js通过自定义着色器实现智慧城市扫光效果
嘿嘿，大部分都是前端三维开发的时候遇到的问题，顺手解决了，如果你也遇到了和我一样的问题，希望我的文章可以帮到你
12-06 2561
在three.js中通过自定义着色器ShaderMaterial实现智慧城市扫光效果
three.js实战-shader实现antv L7城市扫光效果
weixin_46773434的博客
10-24 3521
上图我们可以看到一个个的光波从城市中心像远处扩散，光波略过的高楼与地面会呈现高亮的状态，并且根据光波的宽度(大圈的半径 - 小圈的半径)高亮还呈现出渐变的状态。在WebGL编程指南-27 逐片元处理点光源光照效果我们知道，点光源照射在物体上的明暗效果，是通过该片元到顶点距离跟顶点法线来决定的，那我们可以借此思路来实现，大致思路是一个不断变大的圆，这个圆分大圆与小圆，在大圆与小圆之间的片元呈高光效果我们借助three.js官网提供的一个例子画出城市，在此例子基础上实现扫光效果 2. 给大楼添加纹理贴图 3.
Three.js实战项目-智慧楼宇
qq_39503511的博客
11-12 5163
如有不明白的可以加QQ：2781128388先看看视频效果Three.js 建筑可视化监控分别具备楼层展示，楼层热力度分析，扩散波特效，无人机飞行，飞行路径点规划，扩散波特效，多场景下钻，多文本渲染，路径动画。
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 来创建智慧城市的虚拟表示，并介绍与之相关的技术知识点...
基于threejs实现室内模型的动态装载源码(智慧楼宇).zip
11-20
1,智慧楼宇楼层设施动态装载 2,基于threejs分步加载减少初始化压力。
Vue +Three.js 智慧园区前端3D场景
09-07
本项目利用 Three.js 和 Vue 构建了一个前端 3D 场景，通过 Three.js 实现逼真的 3D 渲染，用于展示智慧园区的监测设备，如：电力监测、水力监测等。 项目运行： cnpm install 安装所有依赖 npm run serve 启动项目
three.js光效扫描
A873054267的博客
06-14 3890
<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="../.....
常用的three.js 智慧城市扫光shader
06-27 206
代码案例预览：https://z2586300277.github.io/three-editor/dist/#/codeMirror?
超详细——手把手教你用threejs实现一个酷炫的模型发光扫描效果（二）
qq27229639的博客
06-07 4242
上篇文章搭建了一个基本的3d场景，本篇则主要完成模型效果的开发，包括：模型外边缘线框，扫描线框，通过这两步实现整个项目的核心效果。
three.js 后处理-自定义shader 扫光效果
A873054267的博客
06-29 1606
先上效果吧 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 1501
three.js通过自定义后期处理实现智慧城市扫光效果
threejs实现场景扫光【光柱场景扫射】
新一代猿人的博客
10-20 3269
1.创建ShaderPass对象 let SweepingLightShader = { uniforms: { “tDiffuse”: {type: “t”, value: 0.0}, “time”:{type: “f”, value: 1.0} }, vertexShader:varying vec2 vUv; varying vec3 iPosition; void main(){ vUv = uv; iPosition = position; gl_Position = projectionMatr
ollama环境变量如何设置
最新发布
02-08
### 如何配置 Ollama 环境变量 #### 在 macOS 中配置 Ollama 环境变量 当 Ollama 作为 macOS 应用程序运行时，应使用 `launchctl` 来设置环境变量。具体操作如下： ```bash launchctl setenv OLLAMA_KEEP_ALIVE "value" ``` 此命令会将指定的值赋给 `OLLAMA_KEEP_ALIVE` 这一环境变量[^1]。 #### Windows 上配置 Ollama 环境变量 对于 Windows 用户来说，在系统属性中可以完成这一工作；也可以通过 PowerShell 或者命令提示符来临时设定这些参数。为了更改模型保持加载的时间长度，则需调整名为 `OLLAMA_KEEP_ALIVE` 的环境变量。关于该变量的具体数值代表的是秒数，即想要让模型持续处于内存中的时间长短[^2]。 另外，如果希望永久保存所作改动，建议按照以下路径进行设置：控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 环境变量... 此外还可以直接编辑注册表实现相同效果，不过这种方式风险较大，除非非常熟悉此项操作否则不推荐尝试[^3]。 #### 设置特定于 Ollama 的其他重要环境变量 除了上述提到用于维持模型在线状态的关键项之外，还有几个常用的可自定义选项可以帮助更好地管理和优化 Ollama 的性能表现: - **修改默认下载目录**: 如果不想把所有文件都放在默认位置 (`%LOCALAPPDATA%\Programs\Ollama`) ，那么就可以创建一个新的字符串类型的用户级别或系统级别的环境变量叫 `OLLAMA_MODELS` 并指向期望的目标地址。 - **改变监听接口**: 若要使服务能够接受来自外部网络连接请求而非仅限本地访问的话，就需要新增另一个名称叫做 `OLLAMA_HOST` 的全局变量并将它的值设为 `0.0.0.0`. 最后记得重启应用程序以便新加入的信息生效.
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值