快捷導(dǎo)航

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

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

這篇文章主要給大家介紹了關(guān)于如何利用Three.js實(shí)現(xiàn)web端顯示點(diǎn)云數(shù)據(jù)的相關(guān)資料,最近在項(xiàng)目中遇到需求,需要在web端顯示點(diǎn)云數(shù)據(jù),將我的實(shí)現(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)試

第五步，初始化點(diǎn)云

            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)建圖形的頂點(diǎn)對象
            attribue = new THREE.BufferAttribute(vertices, 3);//創(chuàng)建屬性對象
            var points = new THREE.Points(geometry, material);//將上述對象配置到點(diǎn)模型對象上
            scene.add(points);
            };
            initpoint();

第六步，點(diǎn)云的更新

           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ù)組，傳入的點(diǎn)云數(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)、鍵盤事件

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

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

總結(jié)

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