用three.js绘制一个三维直角坐标系.pdfVIP

⽤⽤tthhrreeee..jj ss绘绘制制⼀⼀个个三三维维直直⾓⾓坐坐标标系系 Three.j s是⼀个3DJavaScript库 基于右⼿坐标系 可以创建简单或是⽐较复杂的三维图形并应⽤丰富多彩的纹理和材质 可以添加五光⼗⾊的 光源 可以在3D场景中移动物体或是添加脚本动画 等等。关于three.j s这些功能的教程 只要⽤⼼去找 还是可以找到不少资料的。然⽽ 却 鲜少有绘制坐标系的经验。因此我们今天主要说的是绘制三维坐标系的⽅法以及问题 也就是⽹上没找到的资料。下⾯的教程默认您已经学习了基 本的three.j s 对three.j s有⼀定的了解。 三维坐标系最终效果图 11..⾸⾸先先 我我们们 引引⼊⼊⼀⼀些些需需要要jj ss⽂⽂件件 下下载载地地址址 script src=j s/three.j s/script//这个是Three.j s引擎的j s script src=j s/Detector.j s/script//探测器 就是检测当前浏览器是否⽀持或者开启了WEBGL script src=j s/Stats.j s/script//JavaScript性能监控器 监控代码的性能 这⾥监测动画效果 script src=j s/OrbitControls.j s/script// ⿏标控制旋转的j s script src=j s/THREEx.KeyboardState.j s/script//这个是保持键盘的当前状态 script src=j s/THREEx.FullScreen.j s/script//查不到 猜测和全屏控制有关 script src=j s/THREEx.WindowResize.j s/script//处理窗⼝⼤⼩调整。它将在调整窗⼝的⼤⼩时更新渲染和相机 22..按按照照教教程程加加上上基基础础 的的场场景景 摄摄像像机机 渲渲染染器器 灯灯光光等等 再再加加上上 ⾃⾃⼰⼰需需要要的的功功 能能代代码码 例例 如如 ：： THREEx.WindowResize(renderer, camera);//处理窗⼝⼤⼩调整。 controls = new THREE.OrbitControls( camera, renderer.domElement );// ⿏标控制旋转 33..绘绘制制三三维维坐坐标标 这⾥就是我们今天要说的核⼼内容了 由于我当时是希望将左边的三维图形放进⼀个mesh 因此 下⾯⽰例中添加任何物体的⽅法都是 ： this.mesh.add(); 然后在所有物体添加到mesh之后 直接⽤ scene.add(mesh); 如果你不需要将左边放进⼀个mesh的话 可以直接按照教程⽤ ： scene.add(); aa..添添加加⽹⽹格格 GridHelper辅助绘制线条的⼆维⽹格。第⼀个参数是⽹格⼤⼩ 第⼆个参数是⽹格个数 后⾯是⽹格颜⾊。xxx.position.set ( 80,0,80 )为⽹格 的中⼼点坐标。 var gridXZ = new THREE.GridHelper(80, 10, 0xEED5B7, 0xEED5B7); gridXZ.position.set( 80,0,80 ); this.mesh.add(gridXZ); var gridXY = new THREE.GridHelper(80, 10, 0xEED5B7, 0xEED5B7); gridXY.position.set( 80,80,0 ); gridXY.rotation.x = Math.PI/2; this.mesh.add(gridXY); var gridYZ = new THREE.GridHelper(80, 10, 0xEED5B7, 0xEED5B7); gridYZ.position.set(