三维监控系统模型

最新推荐文章于 2023-07-20 17:10:45 发布
最新推荐文章于 2023-07-20 17:10:45 发布
阅读量611 收藏 2
点赞数
分类专栏： html 三维 文章标签： javascript html5 前端 3d
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qianbo042311/article/details/123411288
版权
三维 同时被 2 个专栏收录
16 篇文章 0 订阅
订阅专栏
html
11 篇文章 0 订阅
订阅专栏

1、使用babylonjs

babylonjs本身是一个非常好的web三维引擎，比起threejs来说有更好的用户UI效果，看一个效果图，本身是从例子里修出来的，数据始终正向对准客户
在这里插入图片描述

2、创建过程

创建一个secene，同时创建一个相机,灯光等等

var createScene = function (engine) {
           var scene = new BABYLON.Scene(engine);
           var light = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(0, -0.5, 1.0), scene);
           var camera = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(20, 30, -100), scene);

           camera.attachControl(canvas, true);

           var playgroundSize = 100;
           // Background
           var background = BABYLON.Mesh.CreatePlane("background", playgroundSize, scene, false);
           background.material = new BABYLON.StandardMaterial("background", scene);
           background.scaling.y = 0.5;
           background.position.z = playgroundSize / 2 - 0.5;
           background.position.y = playgroundSize / 4;
           background.receiveShadows = true;
           var backgroundTexture = new BABYLON.DynamicTexture("dynamic texture", 512, scene, true);
           background.material.diffuseTexture = backgroundTexture;
           background.material.specularColor = new BABYLON.Color3(0, 0, 0);
           background.material.backFaceCulling = false;
    //省略........
}

创建一个mesh

  var ground01 = BABYLON.Mesh.CreateGround("温度12", 34, 60, 1, scene, false);

创建ws websocket 取获取数据

 var ws = new WebSocket("ws://127.0.0.1:9090");
 		ws.onmessage = function (msg) {
        //接收数据使用，给标签赋值       
};

创建

  $(document).ready(function () {
            //engine.displayLoadingUI();
            //赋予该场景于变量
            scene = createScene();

            //在引擎中循环运行这个场景
            engine.runRenderLoop(function () {
                scene.render();
            });

            scene.beforeRender = function () {

            };

            window.addEventListener('resize', function () {
                engine.resize();
            });
            engine.hideLoadingUI();
        });

重点

重点在于创建UI，增加label

// Adding labels
            var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");


            var addLabel = function (lights) {
                for (var i = 0; i < lights.length; i++) {
                    var light = lights[i];

                    var rect1 = new BABYLON.GUI.Rectangle();
                    rect1.width = "120px";
                    rect1.height = "40px";
                    rect1.color = "white";
                    rect1.fontSize = 12;
                    rect1.thickness = 2;
                    rect1.background = "Black";
                    rect1.linkOffsetY = -50;
                    advancedTexture.addControl(rect1);
                    rect1.linkWithMesh(light);

                    var label = new BABYLON.GUI.TextBlock();
                    label.text = light.name;
                    label.textWrapping = true;
                    rect1.addControl(label);
                }
            }

            addLabel([ground01, ground02, ground03, ground04, ground11, ground12, ground13, ground14]);

code

html code 在下面，复制可以使用

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
    <title>监控</title>
    <!-- link to the last version of babylon -->
    <!--<script src="~/Scripts/babylon.js"></script>
    <script src="~/Scripts/babylon.gui.min.js"></script>*@-->



    <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
    <script src="https://preview.babylonjs.com/cannon.js"></script>
    <script src="https://preview.babylonjs.com/Oimo.js"></script>
    <script src="https://preview.babylonjs.com/gltf_validator.js"></script>
    <script src="https://preview.babylonjs.com/earcut.min.js"></script>
    <script src="https://preview.babylonjs.com/babylon.js"></script>
    <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
    <script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
    <script src="https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
    <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.js"></script>
    <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
    <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

    <style>
        html, body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>
</head>
<body>
    <canvas id="renderCanvas"></canvas>
    
    <script>

        var image = new Image();
        function init() {
            canvas = document.createElement('canvas');
            content = canvas.getContext('2d');

            canvas.width = 320;
            canvas.height = 180;
            content.scale(1, -1);
            content.translate(0, -180);
            document.body.appendChild(canvas);
        }
        //init();
        var ws = new WebSocket("ws://127.0.0.1:9090");
       


        var i = 0;
        var text = "我是这里的";
        var createScene = function (engine) {
            var scene = new BABYLON.Scene(engine);
            var light = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(0, -0.5, 1.0), scene);
            var camera = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(20, 30, -100), scene);

            camera.attachControl(canvas, true);

            var playgroundSize = 100;
            // Background
            var background = BABYLON.Mesh.CreatePlane("background", playgroundSize, scene, false);
            background.material = new BABYLON.StandardMaterial("background", scene);
            background.scaling.y = 0.5;
            background.position.z = playgroundSize / 2 - 0.5;
            background.position.y = playgroundSize / 4;
            background.receiveShadows = true;
            var backgroundTexture = new BABYLON.DynamicTexture("dynamic texture", 512, scene, true);
            background.material.diffuseTexture = backgroundTexture;
            background.material.specularColor = new BABYLON.Color3(0, 0, 0);
            background.material.backFaceCulling = false;

           
           
            backgroundTexture.drawText(text, null, 80, "bold 50px Segoe UI", "white", "#555555");
            //else
              //  backgroundTexture.drawText("啊啊等我我", null, 80, "bold 50px Segoe UI", "white", "#555555");

            backgroundTexture.drawText("- 测试 -", null, 250, "35px Segoe UI", "white", null);


            


            // Ground
            var ground01 = BABYLON.Mesh.CreateGround("温度12", 34, 60, 1, scene, false);
            var ground02 = BABYLON.Mesh.CreateGround("湿度12", 24, 60, 1, scene, false);
            var ground03 = BABYLON.Mesh.CreateGround("量 22", 34, 34, 1, scene, false);
            var ground04 = BABYLON.Mesh.CreateGround("温度23", 24, 60, 1, scene, false);

            var ground11 = BABYLON.Mesh.CreateGround("温度 23", 24, 60, 1, scene, false);
            var ground12 = BABYLON.Mesh.CreateGround("温度 24", 24, 60, 1, scene, false);
            var ground13 = BABYLON.Mesh.CreateGround("屋内温度", 24, 60, 1, scene, false);
            var ground14 = BABYLON.Mesh.CreateGround("湿度 12", 24, 60, 1, scene, false);

            var groundMaterial = new BABYLON.StandardMaterial("ground", scene);
            groundMaterial.diffuseTexture = new BABYLON.Texture("b2.jpg", scene);
            groundMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
            groundMaterial.emissiveColor = new BABYLON.Color3(0.2, 0.2, 0.2);

            ws.onmessage = function (msg) {
                image.onload = function () {
                    //content.clearRect(0, 0,canvas.width, canvas.height);
                    //content.drawImage(image, 0, 0, canvas.width, canvas.height);
                    groundMaterial.diffuseTexture = new BABYLON.Texture(image, scene);
                    i++;
                    window.URL.revokeObjectURL(image.src)
                }
                image.src = URL.createObjectURL(msg.data);
            };


            ground01.material = groundMaterial;
            ground01.receiveShadows = true;
            ground01.position.x = -30;
            ground02.material = groundMaterial;
            ground02.receiveShadows = true;
            ground02.position.x = 0;
            ground03.material = groundMaterial;
            ground03.receiveShadows = true;
            ground03.position.x = 30;
            ground04.material = groundMaterial;
            ground04.receiveShadows = true;
            ground04.position.x = 60;

            ground11.material = groundMaterial;
            ground11.receiveShadows = true;
            ground11.position.z = 100;
            ground11.position.x = -30;
            ground12.material = groundMaterial;
            ground12.receiveShadows = true;
            ground12.position.z = 100;
            ground13.material = groundMaterial;
            ground13.receiveShadows = true;
            ground13.position.z = 100;
            ground13.position.x = 30;
            ground14.material = groundMaterial;
            ground14.receiveShadows = true;
            ground14.position.z = 100;
            ground14.position.x = 60;


            // --------- SPOTS -------------
            var light00 = new BABYLON.SpotLight("*spot00", new BABYLON.Vector3(-30, 20, -10), new BABYLON.Vector3(0, -1, 0.3), 1.2, 24, scene);
            var light01 = new BABYLON.SpotLight("*spot01", new BABYLON.Vector3(0, 20, -10), new BABYLON.Vector3(0, -1, 0.3), 1.2, 24, scene);
            var light02 = new BABYLON.SpotLight("*spot02", new BABYLON.Vector3(30, 20, -10), new BABYLON.Vector3(0, -1, 0.3), 1.2, 24, scene);
            var light03 = new BABYLON.SpotLight("*spot03", new BABYLON.Vector3(60, 20, -10), new BABYLON.Vector3(0, -1, 0.3), 1.2, 24, scene);

            // Boxes
            var box00 = BABYLON.Mesh.CreateBox("*box00", 5, scene, false);
            box00.position = new BABYLON.Vector3(-30, 5, 0);
            var box01 = BABYLON.Mesh.CreateBox("*box01", 5, scene, false);
            box01.position = new BABYLON.Vector3(0, 5, 0);
            var box02 = BABYLON.Mesh.CreateBox("*box02", 5, scene, false);
            box02.position = new BABYLON.Vector3(30, 5, 0);
            var box03 = BABYLON.Mesh.CreateBox("*box03", 5, scene, false);
            box03.position = new BABYLON.Vector3(60, 5, 0);

            var boxMaterial = new BABYLON.StandardMaterial("mat", scene);
            boxMaterial.diffuseColor = new BABYLON.Color3(1.0, 0, 0);
            boxMaterial.specularColor = new BABYLON.Color3(0.5, 0, 0);
            box00.material = boxMaterial;
            box01.material = boxMaterial;
            box02.material = boxMaterial;
            box03.material = boxMaterial;

            // Inclusions
            light00.includedOnlyMeshes.push(box00);
            light00.includedOnlyMeshes.push(ground01);

            light01.includedOnlyMeshes.push(box01);
            light01.includedOnlyMeshes.push(ground02);

            light02.includedOnlyMeshes.push(box02);
            light02.includedOnlyMeshes.push(ground03);

            light03.includedOnlyMeshes.push(box03);
            light03.includedOnlyMeshes.push(ground04);

            // Shadows
            var shadowGenerator00 = new BABYLON.ShadowGenerator(512, light00);
            shadowGenerator00.getShadowMap().renderList.push(box00);

            var shadowGenerator01 = new BABYLON.ShadowGenerator(512, light01);
            shadowGenerator01.getShadowMap().renderList.push(box01);
            shadowGenerator01.usePoissonSampling = true;

            var shadowGenerator02 = new BABYLON.ShadowGenerator(512, light02);
            shadowGenerator02.getShadowMap().renderList.push(box02);
            shadowGenerator02.useExponentialShadowMap = true;

            var shadowGenerator03 = new BABYLON.ShadowGenerator(512, light03);
            shadowGenerator03.getShadowMap().renderList.push(box03);
            shadowGenerator03.useBlurExponentialShadowMap = true;
            shadowGenerator03.blurBoxOffset = 2.0;

            // --------- DIRECTIONALS -------------
            var light04 = new BABYLON.DirectionalLight("*dir00", new BABYLON.Vector3(0, -0.6, 0.3), scene);
            var light05 = new BABYLON.DirectionalLight("*dir01", new BABYLON.Vector3(0, -0.6, 0.3), scene);
            var light06 = new BABYLON.DirectionalLight("*dir02", new BABYLON.Vector3(0, -0.6, 0.3), scene);
            var light07 = new BABYLON.DirectionalLight("*dir03", new BABYLON.Vector3(0, -0.6, 0.3), scene);
            light04.position = new BABYLON.Vector3(-30, 50, 60);
            light05.position = new BABYLON.Vector3(0, 50, 60);
            light06.position = new BABYLON.Vector3(30, 50, 60);
            light07.position = new BABYLON.Vector3(60, 50, 60);

            // Boxes
            var box04 = BABYLON.Mesh.CreateBox("*box04", 5, scene, false);
            box04.position = new BABYLON.Vector3(-30, 5, 100);
            var box05 = BABYLON.Mesh.CreateBox("*box05", 5, scene, false);
            box05.position = new BABYLON.Vector3(0, 5, 100);
            var box06 = BABYLON.Mesh.CreateBox("*box06", 5, scene, false);
            box06.position = new BABYLON.Vector3(30, 5, 100);
            var box07 = BABYLON.Mesh.CreateBox("*box07", 5, scene, false);
            box07.position = new BABYLON.Vector3(60, 5, 100);

            box04.material = boxMaterial;
            box05.material = boxMaterial;
            box06.material = boxMaterial;
            box07.material = boxMaterial;

            // Inclusions
            light04.includedOnlyMeshes.push(box04);
            light04.includedOnlyMeshes.push(ground11);

            light05.includedOnlyMeshes.push(box05);
            light05.includedOnlyMeshes.push(ground12);

            light06.includedOnlyMeshes.push(box06);
            light06.includedOnlyMeshes.push(ground13);

            light07.includedOnlyMeshes.push(box07);
            light07.includedOnlyMeshes.push(ground14);

            // Shadows
            var shadowGenerator04 = new BABYLON.ShadowGenerator(512, light04);
            shadowGenerator04.getShadowMap().renderList.push(box04);

            var shadowGenerator05 = new BABYLON.ShadowGenerator(512, light05);
            shadowGenerator05.getShadowMap().renderList.push(box05);
            shadowGenerator05.usePoissonSampling = true;

            var shadowGenerator06 = new BABYLON.ShadowGenerator(512, light06);
            shadowGenerator06.getShadowMap().renderList.push(box06);
            shadowGenerator06.useExponentialShadowMap = true;

            var shadowGenerator07 = new BABYLON.ShadowGenerator(512, light07);
            shadowGenerator07.getShadowMap().renderList.push(box07);
            shadowGenerator07.useBlurExponentialShadowMap = true;

            // Animations
            scene.registerBeforeRender(function () {

                //i++;
                if (i == 50) {
                    backgroundTexture.drawText("啊啊等我我", null, 80, "bold 50px Segoe UI", "white", "#555555");
                }
                //backgroundTexture.diffuseTexture
                console.log("now i is " + i);
                box00.rotation.x += 0.01;
                box00.rotation.z += 0.02;

                box01.rotation.x += 0.01;
                box01.rotation.z += 0.02;

                box02.rotation.x += 0.01;
                box02.rotation.z += 0.02;

                box03.rotation.x += 0.01;
                box03.rotation.z += 0.02;

                box04.rotation.x += 0.01;
                box04.rotation.z += 0.02;

                box05.rotation.x += 0.01;
                box05.rotation.z += 0.02;

                box06.rotation.x += 0.01;
                box06.rotation.z += 0.02;

                box07.rotation.x += 0.01;
                box07.rotation.z += 0.02;
            });

            // Adding labels
            var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");


            var addLabel = function (lights) {
                for (var i = 0; i < lights.length; i++) {
                    var light = lights[i];

                    var rect1 = new BABYLON.GUI.Rectangle();
                    rect1.width = "120px";
                    rect1.height = "40px";
                    rect1.color = "white";
                    rect1.fontSize = 12;
                    rect1.thickness = 2;
                    rect1.background = "Black";
                    rect1.linkOffsetY = -50;
                    advancedTexture.addControl(rect1);
                    rect1.linkWithMesh(light);

                    var label = new BABYLON.GUI.TextBlock();
                    label.text = light.name;
                    label.textWrapping = true;
                    rect1.addControl(label);
                }
            }

            addLabel([ground01, ground02, ground03, ground04, ground11, ground12, ground13, ground14]);


            return scene;
        };

        var canvas = document.getElementById('renderCanvas');

        var engine = new BABYLON.Engine(canvas, true);

        $(document).ready(function () {
            //engine.displayLoadingUI();
            //赋予该场景于变量
            scene = createScene();

            //在引擎中循环运行这个场景
            engine.runRenderLoop(function () {
                scene.render();
            });

            scene.beforeRender = function () {

            };

            window.addEventListener('resize', function () {
                engine.resize();
            });
            engine.hideLoadingUI();
        });
    </script>
</body>
</html>

<script>
qianbo_insist
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
threejs + mapboxgl 实现炫酷动态立体墙效果
jiegiser博客
10-04 3237
前言 今天实现一个三维电子围栏效果；本例子是基于前面文章搭建的私库进行开发。 在三维渲染中，有可能会遇到需要在地图上展示一个围栏效果，来展示一个区域的与众不同，或者；在预警方面常用到电子围栏来进行监控人员；本文也是借鉴 maptalks 中的立体墙的效果来实现的。 之前在 Cesium 也实现过类似的效果，可以查看这个视频 接下来我们实现一个动态立体墙的效果； 围栏图层开发 新建一个RippleWall 图层，代码如下： import { BufferGeometry, Clock, Color, Do
threex.dynamictexture:处理动态生成纹理的three.js助手
06-02
三.动态纹理 Threex.dynamictexture 是一个。 它提供了一种处理动态生成纹理的简单方法。 灵感来自优秀的 ，它获得了 。 它主要用于在纹理中写入文本。 假设你有一个角色会说些什么，你可能想把它放在一个纹理中并在你的角色上方显示。 Threex.dynamictexture 会让你很容易。 显示不告诉 []：它显示了这个功能，以及那个编码的功能。 [ ]：它显示了.drawTextCooked函数 [ ]：它显示了.drawImage函数 截图 如何安装 您可以手动或使用安装它。 对于手动版本，首先包含带有通常的threex.dynamictexture.js < script src =' threex.dynamictexture.js ' > </ script > 或者使用键入以下内容来安装软件包。 bower install threex.dyn
Three.js——材质与纹理
qq_32054169的博客
07-20 56
【代码】Three.js——材质与纹理。
THREEJS中的SAOShader阴影计算
wskongdesheng的专栏
04-23 372
SAO（Scalable Ambient Obscurance）：可扩展环境光遮蔽是一种改进的环境光遮蔽技术，它在保持性能的同时，生成更精确和连续的阴影效果。SAO 采用一种基于深度缓冲区的近似算法，可以在不同的场景和分辨率下保持高质量的阴影效果。然而，SAO 相对于 SSAO 更复杂，可能需要更多的计算资源。
threejs实现简单全景看房demo
晨曦的博客
06-20 3656
threejs实现简单全景看房demo
使用webgl(three.js)搭建一个3D智慧园区、3D建筑，3D消防模拟，web版3D,bim管理系统——第四课
w844916072的专栏
02-08 7486
序：这段时间忙于奔波，好久没有更新了，今天更新一下，继续上节课的完善讲解，算是对前段时间的一个总结吧。披星戴月的时光也算有点应用效果了。 　　对于webgl(three.js)性能这一块我在上节课《使用webgl(three.js)搭建一个3D建筑，3D消防模拟——第三课》已经给了详细的说明比较与解决方案 　　下节课讲解了炫酷科技版本的解决方案 　　技术交流邮箱[email protected]...
qt右下角弹框提示_Qt编写安防视频监控系统28-摄像机点位
weixin_39574720的博客
12-11 139
## 一、前言摄像机点位的功能主要是在图片地图和在线离线地图上设置对应摄像机的位置，然后双击可以实时预览对应摄像机的视频，在图片地图上拖动摄像机图标到对应位置，系统会自动保存位置信息，在网页地图上的摄像机位置，需要异步更新，比如先从右侧选择需要更新位置的摄像机，然后在地图上鼠标按下，会自动传回当前位置的经纬度信息，然后单击更新设备位置按钮即可，会自动js异步更新执行代码，更新完成以后会自动同步到另...
Three.js - 纹理(Texture)（七）
小小的前端
04-25 2105
纹理 简单理解纹理就是一张图片，它是由像素点组成。 在three.js一般都是使用在材质上，和配置颜色一样。颜色是材质表面所有的像素都是同一个颜色，纹理是根据配置信息在材质表面显示纹理（贴图）不同位置的像素点。 创建纹理 // 立体几何 const boxWidth = 4 const boxHeight = 4 const boxDepth = 4 const geometry = new THREE.BoxGeometry(boxWidth
threeJS如何实现智慧楼宇管理平台
知屋安砖
06-28 4939
智慧楼宇管理平台示例描述与操作指南示例效果展示应用场景实现步骤第一步 初始化设置功能第二步 初始化查看设备信息功能第三步 初始化重点区域监控功能第四步 初始化热力分布功能相关接口相关示例 示例描述与操作指南 点击示例内各个功能，可以查看到建筑中的监控图像，了解各个楼层的热力分布，同时可查看各层建筑的构件详情，楼层剖切，也可观察楼层中各系统的占比，更快速的处理建筑中突发情况，实现智慧楼宇的意义。 示例效果展示 应用场景 智慧楼宇管理平台管理系统是智能建筑的主要组成部分之一。 智能建筑通过楼宇自动化系统实现建
煤矿压风设备三维可视化实时监控预警系统的实现
05-08
煤矿压风设备三维可视化实时监控及预警系统运用三维可视化虚拟仿真技术与PLC控制技术相结合对现场设备进行实时三维监控的半实物仿真系统。采煤现场各种设备的实时数据通过传感器采集后传输给PLC系统,PLC系统通过专用...
三维组态监控软件、三维可视化系统
05-28
三维可视化的监控平台，可以根据客户需求进行定制化的开发，一次开发N次通用
矿井三维通风动态仿真模拟系统在耿村煤矿的应用
06-25
利用建立的矿井三维通风动态仿真模拟系统,在已建立的风网模型上对耿村煤矿未来5年的通风系统规划方案和现阶段西区改造优化方案进行了模拟分析,检验方案实施效果,并对方案设计中的不足进行了完善。通过系统的灾害辅助...
监控安防模型
07-18
监控安防模型，对于CAD制图很方便，里面积攒了很多平时能应用到的模型。
基于LabView2018的起重机械臂三维模型的运动控制
06-16
但复杂与零散，我在网络上和示例里连续找了2个礼拜的资料，通过对网上一些大神们给出的范例进行分析与学习，实践编程调试3D模型控制程序，成功实现了“基于LabView2018的起重机械臂三维模型的运动控制”，文件夹里...
三维组态软件
01-25
三维组态动态监测软件即能高效获取硬件监测的数据业务和虚拟现实数据，并能对各监测点区的数据进行分析和汇总，并按照监测点和三维场景模型的整合。该软件以生产监测监控为主线，以三维场景作为载体。  3D组态软件...
如何使用Three.js创建网络摄像头音频可视化器
culiao9310的博客
09-29 694
three.js摄像头朝向View demo 查看演示Download Source 下载源In this tutorial you’ll learn how to create an interesting looking audio visualizer that also takes input from the web camera. The res...
threejs模型加载进度监控
yunduanzhijie的博客
07-13 2496
模型加载进度： const manager = new THREE.LoadingManager(); manager.onProgress = function ( item, loaded, total ) { console.log( item, loaded, total ); }; const loader = new OBJLoader( manager ); loader.load( 'models/obj/tree.obj', function
【ThreeJS】场景后处理增加圆形暗角效果
Ning+
09-29 1279
1.Shader脚本 var DarkMaskShader = { uniforms: { "tDiffuse": { value: null }, "maskColor": { value: new THREE.Color(0x000000) }, "maskAlpha": { value: 1.0 }, "markRadius": { ...
three.js—纹理贴图texture的使用
Hcl12138的博客
06-25 6132
three.js—纹理贴图texture的使用
二维激光测距yi 三维模型
最新发布
08-03
二维激光测距是通过测量光的传播时间来计算物体与测距器之间的距离的技术手段，而三维模型则是指基于一定的测量数据构建出具有立体感和丰富细节的模型。 二维激光测距是一种二维测量方法，主要用于测量物体到激光...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qianbo_insist

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值