Question

更新：已找到解决方案，以防任何人遇到相同的问题。需要完成两件事：

将模型添加到场景后，我们需要更新MatrixWorld：scene.updateMatrixWorld();
光线投射器使用的矢量必须进行归一化。因此，我们必须将两行代码更改为： geometry.vertices.push(v1.normalize()); geometry.vertices.push(v2.normalize());

目标是跟踪obj的内部轮廓。并将轮廓拉伸为新形状。光线投射从obj开始在世界中间（0,0,0）。放在它周围。

file：/// D：/Mach%20Parat/raycasting/raycast_stackoverflow/raycast.html

红线是射线的可视化方向。每次光线与对象相交时，坐标都会放入一个数组中-在该数组的基础上，会生成黄色的挤出对象。

问题在于，只有一半的光线似乎对准obj。

obj。是在Blender中产生的茶壶-我猜杯子已经满了。 https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/intermediary/f/8a5fae76-ef7d-4795-9d79-f9b354b893db/dcz4o34-80b02357-3fec-469a-b290-00103f83f4ba.png

使用像球体这样的简单对象（Blender中的默认对象）可以正常工作： https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/intermediary/f/8a5fae76-ef7d-4795-9d79-f9b354b893db/dcz4o2r-19c407a3-7b1d-458c-b39a-61189839a044.png

但仅在对象居中（0,0,0）的情况下。将其移动几个像素，会出现相同的问题： https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/intermediary/f/8a5fae76-ef7d-4795-9d79-f9b354b893db/dcz4o2l-2c6a17f8-e3a4-464e-a022-151839581355.png

如果要自己检查，可以在此处下载： http://download.mach-parat.de/raycast.zip

            //////////////////////// Model
            var model= "models/teapot.obj";

            addObject(model);

        }


        function addObject (model){

            var loader = new THREE.OBJLoader();

                loader.load( model, function ( object ) {
                console.log("load");
                console.log(object);
                var material = new THREE.MeshBasicMaterial( {color: 0xffffff, side: THREE.DoubleSide  } );

                scene.add( object );

                object.traverse( function ( child ) {
                       if ( child instanceof THREE.Mesh ) {
                          child.material = material;

                            child.updateMatrix(); // as needed
                        child.updateMatrixWorld(); // as needed
                          objects.push(child);
                       }
                } );

                setupRaycaster();


            });

        } 

        /////////////////////////////////// RAYCASTER AND RED LINE VISUALISATION
        function setupRaycaster(){

            var material = new THREE.LineBasicMaterial({color: 0xff0000});
            var raylength=100;
            var count=90;

            var angle=360/count;


            for (var i=0; i<count; i++){ 

                var x=0;
                var y=0;
                var z=0;


                var v1=new THREE.Vector3( x, y, z);
                var v2=new THREE.Vector3( x+raylength*Math.cos(i*angle*Math.PI/180), y+raylength*Math.sin(i*angle*Math.PI/180), z);

                var geometry = new THREE.Geometry();
                geometry.vertices.push(v1); 
                geometry.vertices.push(v2);

                var line = new THREE.Line( geometry, material );
                scene.add( line );

                var raycaster = new THREE.Raycaster();
                raycaster.set ( v1, v2 );


                var intersects = raycaster.intersectObjects( objects , true);
                console.log(i,intersects);
                if(intersects[0]){
                    cutOutPoints.push(intersects[0].point);
                }

            }

            console.log(cutOutPoints);



            /////////////////////////////////// YELLOW EXTRUDE GEOMETRY
            var cutOutShape = new THREE.Shape();

            if(cutOutPoints.length){// wenn cutpoints in Array
                cutOutShape.moveTo(cutOutPoints[0].x, cutOutPoints[0].y);

                for (var i=1; i<cutOutPoints.length; i++){ 
                    cutOutShape.lineTo(cutOutPoints[i].x, cutOutPoints[i].y);
                }

                var cutOutMaterial = new THREE.LineBasicMaterial({color: 0xffcc00});

                var extrudeSettings = { amount: 60, bevelEnabled: false};

                var geometry = new THREE.ExtrudeGeometry( cutOutShape, extrudeSettings );

                var cutOutMesh = new THREE.Mesh( geometry, cutOutMaterial );
                scene.add( cutOutMesh );
            }

        }

前一段时间，我试图解决从柜子上切下水槽的最初问题： Subtracting a 3D Sink from a 3D Cupboard-Board in ThreeJS

不幸的是，其他解决方案并没有取得预期的结果，但是使用射线投射来跟踪水槽内部（并生成新的形状以充当布尔值）似乎是一个有希望的线索。

光线投射仅作用于对象的一半

0 个答案: