如何利用Three.js實現(xiàn)web端顯示點云數(shù)據(jù)

更新時間：2023年11月15日 11:14:34 作者：Chord?.

這篇文章主要給大家介紹了關(guān)于如何利用Three.js實現(xiàn)web端顯示點云數(shù)據(jù)的相關(guān)資料,最近在項目中遇到需求,需要在web端顯示點云數(shù)據(jù),將我的實現(xiàn)步驟介紹在這里供大家參考,需要的朋友可以參考下

第一步，創(chuàng)建html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
            /* 隱藏body窗口區(qū)域滾動條 */
		</style>
	</head>
	<body>
		    <script src="./static/three.js"></script>//引入three及相關(guān)插件
            <script src="./static/OrbitControls.js"></script>//軌道控制器，用于調(diào)整視角
		<script>
			// Our Javascript will go here.
		</script>
	</body>
</html>

第二步，從npm安裝three

npm install three

導(dǎo)入整個 three.js核心庫

import * as THREE from 'three';

或是使用cdn或者在官網(wǎng)下載three.js文件用標(biāo)簽引入

第三步，配置websocket連接

        ws = new WebSocket('ws://192.168.3.12:9900/api/ws/')//這里換成自己的數(shù)據(jù)發(fā)送地址
        ws.onopen = () => {//連接成功的回調(diào)
            console.log('連接服務(wù)器成功了...')
            ws.send(
                'Hello backend'
            )
        }
        ws.onclose = () => {//連接失敗的回調(diào)
            console.log('連接服務(wù)器失敗')
        }
        ws.onmessage = (msg) => {//收到消息的回調(diào)，在這里處理數(shù)據(jù)
            pointcloud = JSON.parse(msg.data)
        }

第四步，配置場景、相機(jī)、渲染器、光源

var scene = new THREE.Scene();//創(chuàng)建場景

         //環(huán)境光
        var ambient = new THREE.AmbientLight(0x444444);
        scene.add(ambient);//向場景中添加環(huán)境光
        /**
         * 相機(jī)設(shè)置
         */
        var width = window.innerWidth; //窗口寬度
        var height = window.innerHeight; //窗口高度
        var k = width / height; //窗口寬高比
        var s = 80; //三維場景顯示范圍控制系數(shù)，系數(shù)越大，顯示的范圍越大
        //創(chuàng)建相機(jī)對象
        var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 100);
        camera.position.set(0, -15, 7); //設(shè)置相機(jī)位置
        // var position1 = new THREE.Vector3(0, 25, 0)
        camera.lookAt(lookatbox.position); //設(shè)置相機(jī)方向(指向的場景對象)
        /**
         * 創(chuàng)建渲染器對象
         */
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height);//設(shè)置渲染區(qū)域尺寸
        renderer.setClearColor(0x000000, 1); //設(shè)置背景顏色
        document.body.appendChild(renderer.domElement); //body元素中插入canvas對象
        //執(zhí)行渲染操作   指定場景、相機(jī)作為參數(shù)
        function render() {
            renderer.render(scene, camera);//執(zhí)行渲染操作

        }
        render();

向場景中添加模型，需要調(diào)用scene.add()

以上相關(guān)設(shè)置根據(jù)自己的需要進(jìn)行調(diào)試

第五步，初始化點云

            var material = new THREE.PointsMaterial({
            color: 0xffffff,//模型顏色
            size: 0.05//模型大小
            });//配置模型的材質(zhì)對象        
            function initpoint() {
            geometry = new THREE.BufferGeometry();//創(chuàng)建圖形對象
            var vertices = new Float32Array();//創(chuàng)建圖形的頂點對象
            attribue = new THREE.BufferAttribute(vertices, 3);//創(chuàng)建屬性對象
            var points = new THREE.Points(geometry, material);//將上述對象配置到點模型對象上
            scene.add(points);
            };
            initpoint();

第六步，點云的更新

           var DrawPoint = function (arr1) {
             attribue = new THREE.BufferAttribute(new Float32Array(arr1), 3);
             geometry.attributes.position = attribue;
           };
           setInterval(() = > {
              DrawPoint(pointcloud);//這里的pointcloud是onmessage接口處傳出來的數(shù)據(jù)
              render();
           },30)

Float32Array()接收值為一維數(shù)組，傳入的點云數(shù)據(jù)應(yīng)處理成以[x1,y1,z1,x2,y2,z2……]順序的數(shù)組

如有需要，可以添加坐標(biāo)和網(wǎng)格輔助

        var axisHelper = new THREE.AxisHelper(10);
        scene.add(axisHelper);//添加坐標(biāo)指示器
        var controls = new THREE.OrbitControls(camera, renderer.domElement);//創(chuàng)建控件對象
        controls.addEventListener('change', render);//監(jiān)聽鼠標(biāo)、鍵盤事件

這樣就初步實現(xiàn)了點云數(shù)據(jù)的實時顯示

這里還根據(jù)點的強(qiáng)度顯示了不同的顏色

總結(jié)

到此這篇關(guān)于如何利用Three.js實現(xiàn)web端顯示點云數(shù)據(jù)的文章就介紹到這了,更多相關(guān)Three.js實現(xiàn)web端顯示點云內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

js導(dǎo)出txt示例代碼
很多新手朋友們都不知道js怎么導(dǎo)出txt，下面有個不錯的示例，大家可以參考下
2014-01-01
JavaScript中的幾種繼承方法示例
這篇文章主要給大家介紹了關(guān)于JavaScript中的幾種繼承方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-12-12
bootstrap警告框示例代碼分享
這篇文章主要為大家詳細(xì)介紹了bootstrap警告框示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-05-05
JavaScript 組件之旅（四）：測試 JavaScript 組件
本期，我們要討論的話題是 JavaScript 的測試，以檢查組件的狀態(tài)和工作方式是否符合預(yù)期，還會介紹一個可以方便編寫測試用例的測試方法。這里說的測試當(dāng)然是使用自動化的測試手段，這是軟件質(zhì)量保證(QA)的重要環(huán)節(jié)。
2009-10-10
javascript阻止瀏覽器后退事件防止誤操作清空表單
由于誤操作比較多，有時沒有選中文本框，然后不小心按了退格之后，剛剛辛苦填好的表單就什么也后退的沒有了，針對這個問題，本文給出了詳細(xì)的解決方法，需要朋友不要錯過
2013-11-11
js+canvas實現(xiàn)圖片格式webp/png/jpeg在線轉(zhuǎn)換
這篇文章主要介紹了js+canvas實現(xiàn)圖片格式webp/png/jpeg在線轉(zhuǎn)換,需要的朋友可以參考下
2020-08-08
這篇文章主要介紹了JavaScript 作用域,結(jié)合實例形式分析了JavaScript函數(shù)作用域相關(guān)概念、原理及操作注意事項,需要的朋友可以參考下
2019-10-10