- 1SpringCloud Feign通过FallbackFactory显示异常信息_feign fallbackfactory
- 2Jmeter使用流程及简单分析监控
- 3神经网络初认识——BP神经网络(7月18，再次认识）_最速下降法和最速下降bp法区别
- 4python建立客户端wesocket_python websocket客户端
- 5vue-cli3+ 搭建pc端管理项目（四, 按需引入 element-ui，支持修改主题色）_@import "../../../node_modules/element-ui/packages
- 6小游戏01—《3D滚球跑酷》
- 7OAuth 2.0 授权认证详解_oauth2.0认证流程
- 8#Uniapp：upx 和 rpx使用区分 & 设计稿计算规则_upx rpx
- 9第一节——单片机概述
- 10unity开发微信小游戏（6）- 流量主接入_unity微信小游戏广告
Three.js入门学习笔记09：Three.js对象拾取，鼠标点击对象响应事件_three.js 点击事件
赞
踩
一.拾取对象概念
二.坐标转换
三.光线投射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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
- 254
- 255
- 256
- 257
- 258
- 259
- 260
- 261
- 262
- 263
- 264
- 265
- 266
- 267
- 268
- 269
- 270
- 271
- 272
- 273
- 274
- 275
- 276
- 277
- 278
- 279
- 280
- 281
- 282
- 283
- 284
- 285
- 286
- 287
- 288
- 289
- 290
- 291
- 292
- 293
- 294
- 295
- 296
- 297
- 298
- 299
- 300
- 301
- 302
- 303
- 304
- 305
- 306
- 307
- 308
- 309
- 310
- 311
- 312
- 313
- 314
- 315
- 316
- 317
- 318
- 319
- 320
- 321
- 322
- 323
- 324
- 325
- 326
- 327
- 328
- 329
- 330
- 331
- 332
- 333
- 334
- 335
- 336
- 337
- 338
- 339
- 340
- 341
- 342
- 343
- 344
- 345
- 346
- 347
- 348
- 349
- 350
- 351
- 352
- 353
- 354
- 355
- 356
- 357
- 358
<!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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
一.第一个例子
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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
效果
鼠标经过变红
也可以鼠标按下啥的，参考下文
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
