Javascript 在three.js中使用pointcloud创建平面网格_Javascript_Three.js

Javascript 在three.js中使用pointcloud创建平面网格

javascript three.js

Javascript 在three.js中使用pointcloud创建平面网格,javascript,three.js,Javascript,Three.js,我已经创建了点云，所有的点都在一个精确的平面上。我希望鼠标滚动时点云高亮显示并显示为矩形。为此，我认为必须首先将点云转换为网格。我已经在谷歌上搜索了好几个小时，并试图阅读e.js文档。但是找不到任何解决办法。你能帮我把这个点云转换成网格吗。多谢各位 <script> if ( WEBGL.isWebGLAvailable() === false ) { document.body.appendChild( WEBGL.get

我已经创建了点云，所有的点都在一个精确的平面上。我希望鼠标滚动时点云高亮显示并显示为矩形。为此，我认为必须首先将点云转换为网格。
我已经在谷歌上搜索了好几个小时，并试图阅读e.js文档。但是找不到任何解决办法。你能帮我把这个点云转换成网格吗。多谢各位

        <script>

        if ( WEBGL.isWebGLAvailable() === false ) {
            document.body.appendChild( WEBGL.getWebGLErrorMessage() );
        }
        var camera, scene, renderer, controls;
        init();
        animate();

        function init() {

            renderer = new THREE.WebGLRenderer( { antialias: true } );
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );
            scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera( 45.0, window.innerWidth / window.innerHeight, 5, 3500 );
            camera.position.z = 2500;
            controls = new THREE.TrackballControls( camera, renderer.domElement );
            createScene();
        }

        function createScene() {
                scene = new THREE.Scene();
                scene.background = new THREE.Color( 0x000000 );
                var geometry = new THREE.BufferGeometry();
                var positions = [];

                for ( var i = 0; i < 500; i ++ ) {
                    for ( var j = 0; j < 300; j ++ ) {
                    var y = j;
                    var x = i; 
                    var z = 0;
                    positions.push( x, y, z );
                    }
                }

                geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );

                var material = new THREE.PointsMaterial( {color: 0xFFFFFF} );
                points = new THREE.Points( geometry, material );
                scene.add( points );
        }

        function animate( time ) {

            requestAnimationFrame( animate );
            controls.update();
            renderer.render( scene, camera );

        }

        </script>


if（WEBGL.isWebGLAvailable（）==false）{
document.body.appendChild（WEBGL.getWebGLErrorMessage（））；
}
摄像机、场景、渲染器、控件；
init（）；
制作动画（）；
函数init（）{
renderer=new THREE.WebGLRenderer（{antialas:true}）；
renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
场景=新的三个。场景（）；
摄像头=新的三个透视摄像头（45.0，window.innerWidth/window.innerHeight，53500）；
摄像机位置z=2500；
控件=新的三个轨迹球控件（camera、renderer.DoElement）；
createScene（）；
}
函数createScene（）{
场景=新的三个。场景（）；
scene.background=新的三种颜色（0x000000）；
var geometry=new THREE.BufferGeometry（）；
var头寸=[]；
对于（变量i=0；i<500；i++）{
对于（var j=0；j<300；j++）{
var y=j；
var x=i；
var z=0；
位置。推动（x，y，z）；
}
}
geometry.addAttribute（'position'，新的三个.Float32BufferAttribute（positions，3））；
var material=新的三点材质（{color:0xFFFFFF}）；
点=新的三个点（几何体、材质）；
场景。添加（点）；
}
函数动画（时间）{
请求动画帧（动画）；
控件更新（）；
渲染器。渲染（场景、摄影机）；
}

这里是对示例的一个快速而肮脏的修改，基本上它创建了一个与点云尺寸相同的薄框，并在鼠标经过时切换其可见性（使用光线投射器）。据我所知，没有直接/内置的方法将点云转换为平面/网格

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Three.js - wall construction</title>
        <meta charset="utf-8">
        <script src="js/three.js"></script>
        <script src="js/TrackballControls.js"></script>
    </head>
    <body style="margin:0;">
        <script>

        if ( WEBGL.isWebGLAvailable() === false ) {
            document.body.appendChild( WEBGL.getWebGLErrorMessage() );
        }
        var camera, scene, renderer, controls, box, boxMaterial;
        init();
        animate();

        function init() {


          renderer = new THREE.WebGLRenderer( { antialias: true } );
          renderer.setPixelRatio( window.devicePixelRatio );
          renderer.setSize( window.innerWidth, window.innerHeight );
          document.body.appendChild( renderer.domElement );
          scene = new THREE.Scene();
          camera = new THREE.PerspectiveCamera( 45.0, window.innerWidth / window.innerHeight, 5, 3500 );
          camera.position.z = 2500;
          controls = new THREE.TrackballControls( camera, renderer.domElement );
          createScene();
          renderer.domElement.addEventListener('mousemove', onMouseMove, false); 
        }

        function createScene() {

          scene = new THREE.Scene();
          scene.background = new THREE.Color( 0x000000 );
          var geometry = new THREE.BufferGeometry();
          var positions = [];

          for ( var i = -250; i < 250; ++i) {
              for ( var j = -150; j < 150; ++j) {
                positions.push(i, j, 0);
              }
          }

          geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );

          var material = new THREE.PointsMaterial({color: 0xFFFFFF});
          points = new THREE.Points(geometry, material);
          scene.add(points);

          //create box based on pointcloud extends  
          var geometry = new THREE.BoxGeometry(500, 300, 1 );
          boxMaterial = new THREE.MeshBasicMaterial({color: 0x0000FF});
          boxMaterial.visible = false //set invisible by default
          box = new THREE.Mesh(geometry, boxMaterial);
          scene.add(box);
        }

        function onMouseMove (e) {

          var pointer = {
            x: (e.clientX / window.innerWidth ) * 2 - 1,
            y: - ( e.clientY / window.innerHeight ) * 2 + 1
          }  

          var raycaster = new THREE.Raycaster()
          raycaster.setFromCamera(pointer, camera)

          var intersects = raycaster.intersectObjects([box])

          boxMaterial.visible = !!intersects.length
        }

        function animate(time) {
          requestAnimationFrame(animate);
          controls.update();
          renderer.render(scene, camera);
        }

        </script>
    </body>
</html>


3.js-墙体施工
if（WEBGL.isWebGLAvailable（）==false）{
document.body.appendChild（WEBGL.getWebGLErrorMessage（））；
}
var摄影机、场景、渲染器、控件、长方体、长方体材质；
init（）；
制作动画（）；
函数init（）{
renderer=new THREE.WebGLRenderer（{antialas:true}）；
renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
场景=新的三个。场景（）；
摄像头=新的三个透视摄像头（45.0，window.innerWidth/window.innerHeight，53500）；
摄像机位置z=2500；
控件=新的三个轨迹球控件（camera、renderer.DoElement）；
createScene（）；
renderer.domeElement.addEventListener（'mousemove'，onMouseMove，false）；
}
函数createScene（）{
场景=新的三个。场景（）；
scene.background=新的三种颜色（0x000000）；
var geometry=new THREE.BufferGeometry（）；
var头寸=[]；
对于（变量i=-250；i<250；++i）{
对于（变量j=-150；j<150；++j）{
位置。推动（i，j，0）；
}
}
geometry.addAttribute（'position'，新的三个.Float32BufferAttribute（positions，3））；
var material=新的三点材质（{color:0xFFFFFF}）；
点=新的三个点（几何体、材质）；
场景。添加（点）；
//基于点云扩展创建长方体
var geometry=新的3.BoxGeometry（500300,1）；
boxMaterial=new THREE.MeshBasicMaterial（{color:0x0000FF}）；
boxMaterial.visible=false//默认设置为不可见
长方体=新的三个网格（几何体、长方体材质）；
场景。添加（框）；
}
移动鼠标的功能（e）{
变量指针={
x:（e.clientX/window.innerWidth）*2-1，
y:-（e.clientY/window.innerHeight）*2+1
}  
var raycaster=new THREE.raycaster（）
raycaster.setFromCamera（指针，摄像头）
var intersects=raycaster.intersectObjects（[box]）
boxMaterial.visible=！！intersects.length
}
函数动画（时间）{
请求动画帧（动画）；
控件更新（）；
渲染器。渲染（场景、摄影机）；
}

由于要使用随机位置构建点云，因此首先需要确定矩形的创建方式。如果“世界对齐”足够好，则可以使用点云的边界框确定矩形的角点，并相应地创建网格。但是，如果您想要更紧密的配合，您需要找出如何创建封装点的最小区域的边界，并由此创建

网格。谢谢您的回复。我不熟悉three.js，所以我不完全理解您的答复。我已经更改了代码，现在点云是在没有math.random的情况下生成的。请你现在再解释一下好吗？。非常感谢你的帮助。我真的很感激。是的，这是正确的！非常感谢你帮了我的忙。：）