Three.js入门学习笔记09：Three.js对象拾取，鼠标点击对象响应事件

最新推荐文章于 2024-05-21 23:25:17 发布
最新推荐文章于 2024-05-21 23:25:17 发布
阅读量1.4k 收藏 6
点赞数 1
分类专栏： Three.js 文章标签： javascript 学习 计算机外设 three.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jbwhysy/article/details/104891518
版权

一.拾取对象概念

二.坐标转换

三.光线投射Raycaster

中文文档
http://www.webgl3d.cn/threejs/docs/#api/zh/core/Raycaster
英文文档
https://threejs.org/docs/index.html#api/en/core/Raycaster
官网例子
http://www.webgl3d.cn/threejs/examples/#webgl_interactive_cubes

好用代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>3D</title>
        <meta charset="utf-8">
        <!-- 自适应 -->
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
* {
    margin: 0;
    padding: 0;
}
    
</style>
    </head>
<body>

    <script src="js/three.js"></script>
    <script type="text/javascript" src="js/OrbitControls.js"></script>
    <script>
        	var stats, light;
			var camera, scene, raycaster, renderer;

			var mouse = new THREE.Vector2(), INTERSECTED;//相交的
			var radius = 100, theta = 0;
        
        init();
        animate();
        
        function init() {
            
            
             // init scene
            scene = new THREE.Scene();
			scene.background = new THREE.Color( 0xf0f0f0 );
            
             // init camera
           camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
           camera.position.set(15,15,15);
//           camera.lookAt(new THREE.Vector3(0,0,0));
           camera.lookAt( scene.position );
           scene.add(camera);
            

             //light
          	var light = new THREE.DirectionalLight( 0xffffff, 1 );
				light.position.set( 1, 1, 1 ).normalize();//向量属性向量转换为单位向量，方向设置为和原向量相同，长度为1
                light.intensity=1.5;//强度
				scene.add( light );

            //对象
            
             //把组添加到场景中 
           
            
            
            
            
             //底座
    var loader = new THREE.ObjectLoader(); 
    loader.load("json/untitled5.json", function(objectBottom) {
    objectBottom.traverse(function(child) {
        if (child instanceof THREE.Mesh) {
            child.material.side = THREE.DoubleSide; 
        }
    });
        objectBottom.scale.multiplyScalar(350);//3倍大小 
//        var mesh1 = objectBottom; 
        objectBottom.position.set(0,0,0);
        objectBottom.rotation.x = -Math.PI;//旋转180度
        scene.add(objectBottom);
    }); 
  

    var loaderCar = new THREE.ObjectLoader();
    loaderCar.load("json/che0312.json", function(object2) {
    object2.traverse(function(child) {
        if (child instanceof THREE.Mesh) {
            child.material.side = THREE.DoubleSide; 
        }
    });
        object2.scale.multiplyScalar(55); 
//      var mesh2 = object2; 
        object2.position.set(4.8,1.3,-3);
//        object2.rotation.x = -Math.PI;//旋转180度
        scene.add(object2);
    }); 
    
        
   //机床5000 网页添加材质
    var loaderTool = new THREE.ObjectLoader();   
    loaderTool.load("json/tool_new.json", function(object3) {
    object3.traverse(function(child) {
        if (child instanceof THREE.Mesh) {
          child.material = new THREE.MeshLambertMaterial({
                color: 0xffffff,
                side: THREE.DoubleSide
            });
        }
    });
        object3.scale.multiplyScalar(60);//3倍大小 
//        var mesh3 = object3; 
        object3.position.set(1,3,-2);
        object3.rotation.z = -Math.PI;//旋转180度
        object3.rotation.y = -Math.PI;//旋转180度
        scene.add(object3);
    }); 

 
    //机床8000
    var loaderTool2 = new THREE.ObjectLoader();   
    loaderTool2.load("json/tool_new.json", function(object4) {
    object4.traverse(function(child) {
        if (child instanceof THREE.Mesh) {
          child.material = new THREE.MeshLambertMaterial({
                color: 0xffffff,
                side: THREE.DoubleSide
            });
        }
    });
        object4.scale.multiplyScalar(75);//3倍大小 
//        mesh = object4; 
        object4.position.set(0.7,3.3,-6);
        object4.rotation.z = -Math.PI;//旋转180度
        object4.rotation.y = -Math.PI;//旋转180度
        scene.add(object4);
    }); 
    
  
    
     //缓存库

    var loaderC1 = new THREE.ObjectLoader();
        loaderC1.load("json/cfbx3.json", function(obj1) {
        obj1.traverse(function(child) {
            if (child instanceof THREE.Mesh) {
                child.material.side = THREE.DoubleSide;
          
        }
    });
        obj1.scale.multiplyScalar(3);//3倍大小 
        mesh = obj1; 
        obj1.position.set(0,1.3,8.5)
        obj1.rotation.z = -Math.PI;//旋转180度
        scene.add(obj1);
    }); 
    
    
      var loaderC2 = new THREE.ObjectLoader();
        loaderC2.load("json/cfbx3.json", function(obj2) {
        obj2.traverse(function(child) {
            if (child instanceof THREE.Mesh) {
                child.material.side = THREE.DoubleSide;
          
        }
    });
        obj2.scale.multiplyScalar(3);//3倍大小 
        mesh = obj2; 
        obj2.position.set(0,1.3,6)
        obj2.rotation.z = -Math.PI;//旋转180度
        scene.add(obj2);
    }); 
    
     var loaderC3 = new THREE.ObjectLoader();
        loaderC3.load("json/cfbx3.json", function(obj3) {
        obj3.traverse(function(child) {
            if (child instanceof THREE.Mesh) {
                child.material.side = THREE.DoubleSide;
          
        }
    });
        obj3.scale.multiplyScalar(3);//3倍大小 
        mesh = obj3; 
        obj3.position.set(0,1.3,4.5)
        obj3.rotation.z = -Math.PI;//旋转180度
        scene.add(obj3);
    }); 
    
    
  
    
       var loaderC4 = new THREE.ObjectLoader();
        loaderC4.load("json/cfbx3.json", function(obj4) {
        obj4.traverse(function(child) {
            if (child instanceof THREE.Mesh) {
                child.material.side = THREE.DoubleSide;
          
        }
    });
        obj4.scale.multiplyScalar(3);//3倍大小 
        mesh = obj4; 
        obj4.position.set(0,1.3,3)
        obj4.rotation.z = -Math.PI;//旋转180度
        scene.add(obj4);
    }); 
     
     var loaderC5 = new THREE.ObjectLoader();
        loaderC5.load("json/cfbx3.json", function(obj5) {
        obj5.traverse(function(child) {
            if (child instanceof THREE.Mesh) {
                child.material.side = THREE.DoubleSide;
          
        }
    });
        obj5.scale.multiplyScalar(3);//3倍大小 
        mesh = obj5; 
        obj5.position.set(0,1.3,1.5)
        obj5.rotation.z = -Math.PI;//旋转180度
        scene.add(obj5);
    });          
    
    
            
            
            
            
            
            
            
            
            
            //射线
            raycaster = new THREE.Raycaster();
          /*   var raycaster = new THREE.Raycaster();
             var mouseVector = new THREE.Vector3();*/
            
            
            //renderer
				renderer = new THREE.WebGLRenderer();
				renderer.setSize( window.innerWidth, window.innerHeight );
				document.getElementsByTagName("body")[0].appendChild(renderer.domElement);
            
           //监听
           document.addEventListener( "mousedown", onDocumentMouseDown, false );
           
           //窗口变化
           window.addEventListener( "resize", onWindowResize, false );
            
            
            //插件
    var controls = new THREE.OrbitControls( camera, renderer.domElement );//camera和render的变量和照相机与渲染器设置的变量一致才行

        // 如果使用animate方法时，将此函数删除
        //controls.addEventListener( 'change', render );
        // 使动画循环使用时阻尼或自转 意思是否有惯性
        controls.enableDamping = true;
        //动态阻尼系数 就是鼠标拖拽旋转灵敏度
        //controls.dampingFactor = 0.25;
        //是否可以缩放
        controls.enableZoom = true;
        //是否自动旋转
        controls.autoRotate = true;
        //设置相机距离原点的最远距离
        controls.minDistance  = 1;
        //设置相机距离原点的最远距离
        controls.maxDistance  = 200;
        //是否开启右键拖拽
        controls.enablePan = true; 
            

        }//function结束
        
        //窗口变化
        function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
//				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}
        
        //坐标转换
       function onDocumentMouseDown( event ) {//鼠标事件开始

				event.preventDefault();
               
				mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
				mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
           
           
                 // 通过摄像机和鼠标位置更新射线
	     raycaster.setFromCamera( mouse, camera );

	      // 计算物体和射线的焦点
	     var intersects = raycaster.intersectObjects( scene.children ,true);//射线穿过物体，自动由近到远排序
    
            
        //第一种

	    /*  for ( var i = 0; i < intersects.length; i++ ) {

//         intersects[ i ].object.material.color.set( 0xff0000 );
         intersects[ i ].object.traverse(function(child) {
        if (child instanceof THREE.Mesh) {
            child.material = new THREE.MeshLambertMaterial({
                color: 0xffff00,
                side: THREE.DoubleSide
            });
        } 
              
        });

    } */
            
            //第二种
        if ( intersects.length > 0 ) {//有物体的时候
         

					if ( INTERSECTED != intersects[ 0 ].object ) {//上一次选中不等于当前的选中，就是替换的时候，intersects[ 0 ]就是当前的选中 在最前面的，它是自动排序的
                 

						if ( INTERSECTED ) 
                            if( INTERSECTED.material .length==undefined){
                            INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );//上一次选中的要换回原来的材料
                            }

						INTERSECTED = intersects[ 0 ].object;
                       if( INTERSECTED.material .length==undefined){
						INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();//把当前的材料保存起来
						INTERSECTED.material.emissive.setHex( 0xff0000 );//换颜色
                    }

					}

				} else {//选中空白处的时候
//
					if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );

					INTERSECTED = null;

				}

			}//mousedown鼠标事件结束

        
    	function animate() {

				requestAnimationFrame( animate );

				render();

			}
        
        function render() {

	 
                   
            
	      renderer.render( scene, camera );

          }
        

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


<!DOCTYPE html>
<html lang="en">
    <head>
        <title>3D</title>
        <meta charset="utf-8">
    </head>
<body>

    <script src="js/three.js"></script>
    <script>
        	var container, stats, light;
			var camera, scene, raycaster, renderer;

			var mouse = new THREE.Vector2(), INTERSECTED;
			var radius = 100, theta = 0;
        
        init();
        animate();
        
        function init() {
            
            container = document.createElement( 'div' );
            document.body.appendChild( container );
            
             // init camera
           camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
            
            // init scene
            scene = new THREE.Scene();
			scene.background = new THREE.Color( 0xf0f0f0 );
              

             //light
          	var light = new THREE.DirectionalLight( 0xffffff, 1 );
				light.position.set( 1, 1, 1 ).normalize();
				scene.add( light );

            //对象
            var loaderCar = new THREE.ObjectLoader();
                loaderCar.load("json/che0312.json", function(object) {
                object.traverse(function(child) {
            if (child instanceof THREE.Mesh) {
            child.material.side = THREE.DoubleSide; 
            }
                });
            object.scale.multiplyScalar(55); 
            mesh = object; 
            object.position.set(4.8,1.3,-3);
//          object.rotation.x = -Math.PI;//旋转180度
            scene.add( object );
            }); 
            
            
            //射线
            raycaster = new THREE.Raycaster();
            //renderer
				renderer = new THREE.WebGLRenderer();
				renderer.setSize( window.innerWidth, window.innerHeight );
				container.appendChild( renderer.domElement );
            
           //监听
           document.addEventListener( 'mousemove', onDocumentMouseMove, false );
            

            
        }//function结束
        

        
        //坐标转换
       function onDocumentMouseMove( event ) {

				event.preventDefault();

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

			}
        
        
        
    	function animate() {

				requestAnimationFrame( animate );

				render();

			}
        
        function render() {

	       // 通过摄像机和鼠标位置更新射线
	     raycaster.setFromCamera( mouse, camera );

	      // 计算物体和射线的焦点
	     var intersects = raycaster.intersectObjects( scene.children ,true );

	     for ( var i = 0; i < intersects.length; i++ ) {

		  intersects[ i ].object.material.color.set( 0xff0000 );

	      }

	      renderer.render( scene, camera );

          }
        

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

一.第一个例子

https://www.cnblogs.com/xuejianxiyang/p/9732632.html
https://threejs.org/examples/#webgl_raycast_sprite

1.这里加载了OrbitControls插件，能够旋转，平移等。
2.group的结构
group里有group1,group2
group1-circleP(网格)-geometryP(几何对象)
group2-circleP1(网格)-geometryP1(几何对象)

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>3D</title>
        <meta charset="utf-8">
<!--        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">-->
        <style>


            #info{
                position: absolute;
                z-index: 1;
                width: 100%;
                padding: 5px;
                text-align: center;
            }
        </style>
    </head>
<body>

    <script src="js/three.js"></script>
    <script src="js/OrbitControls.js"></script>
    <script>
        var renderer, scene, camera;
        var controls, group;
        init();
        animate();
        function init() {
            // init renderer
            renderer = new THREE.WebGLRenderer( { antialias: true } );
//            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );
            
            // init scene
            scene = new THREE.Scene();
            scene.background = new THREE.Color( 0xffffff );
              
            // init camera
            camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
            camera.position.set( 15, 15, 15 );
            camera.lookAt( scene.position );
            
            //OrbitControls
            controls = new THREE.OrbitControls( camera, renderer.domElement );
            controls.enableRotate = true;
              
            //把组添加到场景中 
            group = new THREE.Group();
            scene.add(group);
             
            //新建立方体，把geometryP添加到circleP网格中
            var geometryP = new THREE.BoxGeometry(10,10,10);
            var materialP = new THREE.MeshBasicMaterial( { color: 0x0000ff ,side:THREE.DoubleSide} );
            var circleP = new THREE.Mesh( geometryP, materialP );   
            circleP.position.set(-80, -40, 0);
            //geometryP.rotateY(Math.PI/2);
            
            //新建group1,把group1添加到group中
            var group1 = new THREE.Group();
            group.add(group1);
             //把circleP网格添加到group中
            group1.add(circleP);
             
             
            //新建立方体，把geometryP1添加到circleP1网格中 
            var geometryP1 = new THREE.BoxGeometry(-10,-10,10); 
            var materialP1 = new THREE.MeshBasicMaterial( { color: 0x00ff00 ,side:THREE.DoubleSide} );
            var circleP1 = new THREE.Mesh( geometryP1, materialP1 );   
            //新建group2,把group2添加到group中
            var group2 = new THREE.Group();
            group.add(group2);
            //把circleP1网格添加到group中
            group2.add(circleP1);
             
            //事件监听 
            window.addEventListener( 'resize', onWindowResize, false );
            window.addEventListener( "mousemove", onDocumentMouseMove, false );
        }
        function animate() {
            renderer.render( scene, camera );
            requestAnimationFrame( animate );
        }
        //配合浏览器窗口放大缩小
        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize( window.innerWidth, window.innerHeight );
        }
        var selectedObject = null;
        function onDocumentMouseMove( event ) {
            event.preventDefault();
            if ( selectedObject ) {
                selectedObject.material.color.set( '#69f' ); 
                selectedObject = null;
            }
            
        
            var intersects = getIntersects( event.layerX, event.layerY );
            if ( intersects.length > 0 &&selectedObject!=intersects[0].object) {
                var res = intersects.filter( function ( res ) {
                    return res && res.object;
                } )[ 0 ];
                if ( res && res.object ) {
                    selectedObject = res.object; 
                    selectedObject.material.color.set( '#f00' );
                }
            }
        }
        
       //射线
        var raycaster = new THREE.Raycaster();
        var mouseVector = new THREE.Vector3();
        //坐标转换
        function getIntersects( x, y ) {
            x = ( x / window.innerWidth ) * 2 - 1;
            y = - ( y / window.innerHeight ) * 2 + 1;
            mouseVector.set( x, y, 0.5 );
            raycaster.setFromCamera( mouseVector, camera );
            return raycaster.intersectObject( group, true );
        }
    </script>
</body>
</html>
效果

鼠标经过变红
也可以鼠标按下啥的，参考下文
https://blog.csdn.net/qq_29026209/article/details/74548939
https://www.jianshu.com/p/b846571fe383
在这里插入图片描述

https://www.cnblogs.com/tracyjfly/p/9999675.html
https://blog.csdn.net/planckztd/article/details/79151400
https://segmentfault.com/a/1190000004382956

https://blog.csdn.net/weixin_42443851/article/details/93628805

二.第二个例子

参考学习
https://blog.csdn.net/ithanmang/article/details/80897888
https://www.cnblogs.com/tracyjfly/p/9999675.html

http://www.yanhuangxueyuan.com/doc/Three.js/curveRun.html
https://blog.csdn.net/planckztd/article/details/79151400
https://blog.csdn.net/ruangong1203/article/details/60476621
http://www.yanhuangxueyuan.com/doc/three.js/ringrun.html

参考学习：
https://blog.csdn.net/ruangong1203/article/details/60476621

https://blog.csdn.net/planckztd/article/details/79151400

坐标
https://blog.csdn.net/weixin_41342585/article/details/80659736

向量
http://www.yanhuangxueyuan.com/doc/three.js/vector3.html

Innerwidth
https://www.runoob.com/jsref/prop-win-innerheight-innerwidth.html

https://www.runoob.com/try/try.php?filename=try_win_innerheight

完整案例
https://blog.csdn.net/ithanmang/article/details/80897888

加载模型并拾取
https://blog.csdn.net/moyebaobei1/article/details/84993114
加载模型并拾取
https://blog.csdn.net/moyebaobei1/article/details/84993114

拾取对象
https://www.cnblogs.com/lizhengjin/p/5914216.html

https://www.cnblogs.com/deerfig/p/6432683.html

讲的很清楚
https://www.cnblogs.com/lst619247/p/9071233.html

旋转
https://www.cnblogs.com/lzpong/p/7904615.html

克隆
https://blog.csdn.net/u014291990/article/details/92381556

逆转坐标
https://blog.csdn.net/mu399/article/details/94723921

世界坐标与屏幕坐标转换
https://www.cnblogs.com/brainworld/p/8309415.html

郭
http://www.yanhuangxueyuan.com/Three.js_course.html

全部需要学习：
http://www.yanhuangxueyuan.com/Three.js_course/screen.html
http://www.yanhuangxueyuan.com/Three.js_course/choose.html
http://www.yanhuangxueyuan.com/Three.js_course/drag.html
http://www.yanhuangxueyuan.com/Three.js_course/datgui.html

网格 mesh
几何体
材质
DIV
原理
向量
坐标
坐标转换
相交
几何对象
外部模型

简单拾取
https://blog.csdn.net/moyebaobei1/article/details/84993114

拾取外部模型
https://zhidao.baidu.com/question/1577105154715044340.html

https://www.pianshen.com/article/3636727495/

https://www.jb51.net/article/124688.htm

修改对象属性 重点 gui
https://blog.csdn.net/qq_33635385/article/details/100151017

学习顺序
组
http://www.yanhuangxueyuan.com/doc/Three.js/Group.html
https://blog.csdn.net/ithanmang/article/details/80965712

向量
http://www.yanhuangxueyuan.com/doc/three.js/vector3.html

扒例子1
http://127.0.0.1:61457/preview/app/index.html
https://ithanmang.gitee.io/threejs/home/201807/20180703/02-raycasterDemo.html
https://blog.csdn.net/qq_33635385/article/details/100151017

过后补充
https://www.cnblogs.com/guxingy/p/11956390.html
https://www.cnblogs.com/richardwlee/p/10573663.html

https://www.cnblogs.com/guxingy/p/11956390.html

https://www.cnblogs.com/amy2011/p/6358527.html
layers
https://www.cnblogs.com/richardwlee/p/10573663.html

window监听事件
window.addEventListener( ‘resize’, onWindowResize, false );
window.addEventListener( “mousemove”, onDocumentMouseMove, false );
下面一段还不会
var selectedObject = null;
function onDocumentMouseMove( event ) {
event.preventDefault();
if ( selectedObject ) {
selectedObject.material.color.set( ‘#69f’ );
selectedObject = null;
}

第一个例子中
选中那块的函数我没会

https://blog.csdn.net/weixin_42443851/article/details/93628805
https://blog.csdn.net/hb_zhouyj/article/details/87917364

月亮实验室
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Three.js的物体点击选中拾取DEMO
05-23
Three.js的物体点击选中拾取DEMO
three.js实现点击事件（vue）
lidaima的博客
03-15 4381
three.js 实现点击事件(Vue)。
three.js中文文档网址
最新发布
cuicanxinghui的博客
05-21 687
three.js中文文档网址Three.js中文网 (webgl3d.cn)
threejs基础案例之十：模拟点击事件
baidu_41601048的博客
01-30 2637
threejs中模拟点击事件
ThreeJs模型点击事件
yangyangnb666的博客
07-11 881
ThreeJs模型点击事件。
Three.js点击事件
qq_44787943的博客
04-12 4399
写在前头 转载：https://blog.csdn.net/ithanmang/article/details/80897888 关于点击事件的练习和书写。 准备工作 一、 three.js运行最好搭一个服务器，不然很容易有跨域等问题。下面代码也是，如果没有服务器，你直接跑html文件，会发现很模糊。 这里介绍npm搭建服务器的流程。 参考：https://www.jianshu.com/p/a162131e22d0 NPM全局安装 npm install -g live-server 使用方法： 在项
three.js 入门三：THREE.BoxGeometry 解析
03-14
在Three.js这个强大的JavaScript 3D库中，THREE.BoxGeometry是用于创建立方体几何形状的基础类。它允许开发者构建具有六个平面的三维立方体，每个面由两个三角形组成。在WebGL和3D渲染中，BoxGeometry是构建场景中的...
three_js_gpu_picking:Three.JS的基于GPU的对象选择
04-28
Three.JS的GPU对象选取概述该库是Three.JS的可用于生产环境的GPU对象选择的实现。 与其他可用库相比，此库的优点是它不需要单独的拣配场景。 这很重要，因为您不必使第二个场景与正在渲染的场景保持同步。 GPU拾取也...
Three.js获取鼠标点击的三维坐标示例代码
10-20
在Three.js中，实现鼠标点击获取三维坐标是一项基础但至关重要的功能，它在交互式3D应用中扮演着关键角色。本文将详细解释如何通过Three.js获取鼠标点击时对应的三维空间坐标。 首先，我们需要明白在Three.js中，...
three.js-displacement-map:使用three.js的置换贴图的基本示例
07-03
三.js-位移图 使用的置换贴图的基本。 演示在这里运行：
threejs中点击物体事件
An滴饭儿的博客
01-17 1520
【代码】threejs中点击物体事件。
three.js： 点击交互事件 含解决点击的物体与看到的不一致问题（非全屏/多边形偏移）
weixin_1095的博客
07-04 2490
在 three.js 中，可以通过添加事件监听器来实现点击交互事件。
three.js鼠标事件
Mr_Gu的博客
09-29 5385
实现功能： 1.左键点击方块并移动鼠标，方块跟随鼠标移动。 2.右键点击方块并移动鼠标，方块旋转。 3.鼠标滚动可以放大或缩小方块。 代码实现如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test01</title&...
vue2+three.js 给图层绑定点击事件
m0_49083276的博客
09-05 303
当然上面代码是针对Mesh（网格）的，可以理解为一个元素，比方说上图我的世界中的小人，那么我想点击一个房子怎么办（多个元素），于是我让建模工程师帮我把房子里的所有元素弄成一个分组，发现点击后是一个object3D，相比Mesh并没有点击事件，但是里边有很多一些Mesh，整体上看是一个树形结构。最后我用深度优先遍历的获取了object3D里的灭一个Mesh，并给他们绑上了点击事件。options是一个数据字典，里边存有图层名字，只有点击时child.name能对应上options中的某一项才会触发相应逻辑。
threejs如何在三维场景中添加点击事件
Youxingfang的博客
04-22 3736
threejs如何在三维场景中添加点击事件 threejs触发点击事件一般通过THREE.Raycaster射线来实现，当射线与物体相交，触发事件 this.$refs.loadDiv.addEventListener( "click", this.onDocumentMouseDown, false ); onDocumentMouseDown: function(event) { event.preventDe
vue中使用layui实现树形菜单增删改查功能
蜗牛~~
03-01 1409
第一步：去官网下载layui组件https://www.layui.com/ 下载并解压得到： 第二步：将解压后的上图紫色箭头所指的layui文件夹放入自己vue项目中的static目录下 第三步：在项目中index.html文件中引入 <link type="text/css" rel="stylesheet" href="./static/layui/css/layui.css"/> <script type="text/javascript" src
【Threejs基础教程-点线精灵篇】 4.5 射线(Ray)与射线拾取(Raycaster)
qq_42760477的博客
06-24 2043
【Threejs基础教程-点线精灵篇】4.5 射线与射线拾取
three.js从场景获取模型对象
w418856的博客
09-13 820
在three.s中，可以通过场景对象获取模型对象。场景对象是一个包含了所有要染的物体、灯光、摄像机等元素的容器，而模型对象则是其中的一个物体，通常是一个三维模型。在这个示例中，首先创建了一个场景对象和一个三维立方体模型。然后将立方体模型添加到场景中，并通过getobjectByName()方法以场景中获取了模型对象。最后，将模型对象输出到控制台。需要注意的是，在获取模型对象时，需要知道模型的名称。如果没有指定名称则可以使用getobjectById() 方法通过模型的ID获取模型对象。
THREEJS - 点击/拾取
Kreme的博客
12-09 2554
在三维场景中，我们经常会遇到点击拾取事件，例如点击某个模型，模型变色等等，常规的点击事件声明是： container.addEventListener('click', onDocumentMouseDown, false); 但是这种点击事件，当你切换至移动端时，你就会发现点击事件失效了，这时候我们需要定义的点击事件是： container.addEventListener('touchstart', onDocumentMouseDown, false); 所以，我们在写点击拾取的时候，可以综合以上
three.j hellowworld 快速上手 以及一些小坑
02-18
5. **基础模型及外部模型**：Three.js内置了一些基础几何形状，如BoxGeometry、SphereGeometry等，同时也支持导入外部模型文件，如FBX、OBJ等格式。 教程中提到，Three.js有以下几个显著特点： - 功能丰富：包括...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值