https://github.com/mrdoob/three.js/releases/tag/r148
世界坐标的三维坐标系可视标记 THREE.AxesHelper 有红绿蓝三个轴，表现xyz三个维度。三个轴的线有长度，但没有明确的文字标识。
THREE.Sprite是永远面朝摄像机的平面，可以设置位置和其自身的xy。
结合canvas绘制文字作为sprite的材质将sprite放在axeshelper轴线的末端，可以使世界坐标可视标记带上文字指示。
|
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 |
// 创建scene、camera、render，... let axesHelperLineLength = 15; let axes = new THREE.AxesHelper(axesHelperLineLength); scene.add(axes); makeTextSprite("x", axesHelperLineLength); makeTextSprite("y", 0, axesHelperLineLength, 0, "#00ff00"); makeTextSprite("z", 0, 0, axesHelperLineLength, "#0000ff"); function makeTextSprite(axis, x = 0, y = 0, z = 0, color = "#ff0000") { let _Canvas = document.createElement('canvas'); _Canvas.width = 240; // 画布宽高。像素 _Canvas.height = 240; let _2dCanvas = _Canvas.getContext('2d'); // 创建画布。左上角为原点 _2dCanvas.fillStyle = color; // 圆形颜色 _2dCanvas.arc(_Canvas.width / 2, _Canvas.width / 2, _Canvas.width / 2, 0, 2 * Math.PI); // 圆形 圆心x, 圆心y, 半径, startAngle, endAngle _2dCanvas.fill(); // 圆形绘制结束 _2dCanvas.fillStyle = "#ffffff"; // 文字颜色 _2dCanvas.font = "Bold 200px Arial"; // 字体 let metrics = _2dCanvas.measureText(axis); let textWidth = metrics.width; let textHeight = metrics.actualBoundingBoxAscent; _2dCanvas.fillText(axis, _Canvas.width / 2 - textWidth / 2, _Canvas.width / 2 + textHeight / 2); // 文本。位置x,y相对于画布，文字左下角为原点 let texture = new THREE.Texture(_Canvas); texture.needsUpdate = true; let spriteMaterial = new THREE.SpriteMaterial({map: texture}); let sprite = new THREE.Sprite(spriteMaterial); sprite.scale.set(2, 2, 0); // 缩放比例。z轴无效 sprite.position.set(x, y, z); scene.add(sprite); } |
- end
声明
本文由崔维友 威格灵 cuiweiyou vigiles cuiweiyou 原创，转载请注明出处：http://www.gaohaiyan.com/4180.html
承接App定制、企业web站点、办公系统软件 设计开发，外包项目，毕设
