欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：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)步驟介紹在這里供大家參考,需要的朋友可以參考下

需要了解html、js、websocket的基本使用，建議瀏覽three.js文檔中場(chǎng)景、渲染器、光源、相機(jī)以點(diǎn)模型、Buffergeometry的相關(guān)知識(shí)

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
            /* 隱藏body窗口區(qū)域滾動(dòng)條 */
		</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)入整個(gè) three.js核心庫(kù)

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)
        }

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

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

        }
        render();

向場(chǎng)景中添加模型，需要調(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ì)對(duì)象        
            function initpoint() {
            geometry = new THREE.BufferGeometry();//創(chuàng)建圖形對(duì)象
            var vertices = new Float32Array();//創(chuàng)建圖形的頂點(diǎn)對(duì)象
            attribue = new THREE.BufferAttribute(vertices, 3);//創(chuàng)建屬性對(duì)象
            var points = new THREE.Points(geometry, material);//將上述對(duì)象配置到點(diǎn)模型對(duì)象上
            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接口處傳出來(lái)的數(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)建控件對(duì)象
        controls.addEventListener('change', render);//監(jiān)聽(tīng)鼠標(biāo)、鍵盤(pán)事件

這樣就初步實(shí)現(xiàn)了點(diǎn)云數(shù)據(jù)的實(shí)時(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • JS實(shí)現(xiàn)仿中關(guān)村論壇評(píng)分后彈出提示效果的方法

    JS實(shí)現(xiàn)仿中關(guān)村論壇評(píng)分后彈出提示效果的方法

    這篇文章主要介紹了JS實(shí)現(xiàn)仿中關(guān)村論壇評(píng)分后彈出提示效果的方法,實(shí)例分析了javascript彈出特效的css與提示框的具體實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-02-02
  • ajax請(qǐng)求get與post的區(qū)別總結(jié)

    ajax請(qǐng)求get與post的區(qū)別總結(jié)

    本篇文章是對(duì)ajax請(qǐng)求get與post的區(qū)別進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
    2013-11-11
  • 微信小程序獲取驗(yàn)證碼60秒倒計(jì)時(shí)功能

    微信小程序獲取驗(yàn)證碼60秒倒計(jì)時(shí)功能

    這篇文章主要介紹了微信小程序獲取驗(yàn)證碼60秒倒計(jì)時(shí)模板,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2023-04-04

    • 最新評(píng)論