webgl基于Three.js的开发——点选几何图形并读取几何信息

最新推荐文章于 2024-02-18 17:08:02 发布

niuge No.1

最新推荐文章于 2024-02-18 17:08:02 发布

阅读量1k

点赞数 1

分类专栏： webgl

本文链接：https://blog.csdn.net/niuge8905/article/details/80850547

版权

webgl 专栏收录该内容

37 篇文章 15 订阅

订阅专栏

首先第一步：创建四个几何图形。

//几何物体
        function initObject() {

            var geometry = new THREE.CylinderGeometry(100, 100, 100);
            mesh = createMesh(geometry, "brick.jpg", "brickbump.jpg");
            mesh.position.set(-200, 0, 0);
            mesh.name = "bbb";
            scene.add(mesh);
            objects.push(mesh);

            var geometry2 = new THREE.CylinderGeometry(100, 100, 100);
            var material = new THREE.MeshPhongMaterial({ color:new THREE.Color(1,0,0)});
            mesh2 = new THREE.Mesh(geometry2, material);
            mesh2.position.set(200, 0, 0);
            mesh2.name = "aaa";
            scene.add(mesh2);
            objects.push(mesh2);

            var geometry3 = new THREE.CylinderGeometry(100, 100, 100);
            var material3 = new THREE.MeshPhongMaterial({ color: new THREE.Color(1, 0, 0) });
            mesh3 = new THREE.Mesh(geometry3, material3);
            mesh3.position.set(600, 0, 0);
            mesh3.name = "ccc";
            scene.add(mesh3);
            objects.push(mesh3);

            var geometry4 = new THREE.CylinderGeometry(100, 100, 100);
            var material4 = new THREE.MeshPhongMaterial({ color: new THREE.Color(1, 0, 0) });
            mesh4 = new THREE.Mesh(geometry4, material4);
            mesh4.position.set(1000, 0, 0);
            mesh4.name = "ddd";
            scene.add(mesh4);
            objects.push(mesh4);
        }


        //创建凹凸贴图材质
        function createMesh(geom,imageFile,bump)
        {
            var texture = THREE.ImageUtils.loadTexture("../Textures/" + imageFile);
            var mat = new THREE.MeshPhongMaterial();
            mat.map = texture;

            var bump = THREE.ImageUtils.loadTexture("../Textures/" + bump);
            mat.bumpMap = bump;
            mat.bumpScale = 0.2;

            var mesh = new THREE.Mesh(geom, mat);
            return mesh;
        }

然后是鼠标的click事件：

function onDocumentClick(event) {


            event.preventDefault();
            select = true;


            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
            mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;                      
        }

接着注册事件：

 renderer = new THREE.WebGLRenderer();
renderer.domElement.addEventListener('mouseClick', onDocumentClick, false);

最后需要注册用到射线来碰撞：

raycaster.setFromCamera(mouse, camera);


            // calculate objects intersecting the picking ray
            var intersects = raycaster.intersectObjects(scene.children);
            if (select && intersects.length>0)
            {
                alert("构件名称：" + intersects[0].object.name);
                select = false;
            }

最后效果如图：可以点击构件，显示其名称。