• 给标点添加鼠标的点击、拖拽等事件，以便能利用鼠标对标点位置进行调整。在threejs的视图里面不进行一些转换，是没办法监听模型的事件的，要利用Raycaster来计算焦点，获取哪个模型与射线相交，从而让模型触发事件

// 创建一个射线实例对象
let raycaster = new THREE.Raycaster();
// 创建一个二维空间点的对象（x,y），在进行将鼠标位置归一化为设备坐标时（x 和 y 方向的取值范围是 (-1 to +1)）有用
let mouse = new THREE.Vector2();
// 存储 鼠标按下时的二维空间点
let onDownPosition = new THREE.Vector2();
// 存储 鼠标松开时的二维空间点
let onUpPosition = new THREE.Vector2();
// 鼠标在移动时触发的事件
let onPointermove = ( event ) => {
  // 通过 Utils.onTransitionMouseXYZ 函数把将鼠标位置归一化为设备坐标（实现细节请直接看Utils工具类）
  mouse = Utils.onTransitionMouseXYZ(event, renderer.domElement);
  // 通过摄像机和鼠标位置更新射线
  raycaster.setFromCamera( mouse, camera );
  // 计算模型和射线的焦点（objArr就是之前存储标点模型的数组）
  var intersects = raycaster.intersectObjects(objArr);
  // 获取到有焦点的模型的数组后，对于不是当前 transformControl 变换器正在变换的模型的焦点模型，把这个模型添加到 transformControl ，让当前变换的模型为获取到焦点的模型
  if ( intersects.length > 0 ) {
    const object = intersects[ 0 ].object;
    if ( object !== transformControl.object ) {
      transformControl.attach( object );
// 鼠标按键按下时触发的事件
let onPointerdown = ( event ) => {
  onDownPosition.x = event.clientX;
  onDownPosition.y = event.clientY;
// 鼠标按键松开时触发的事件（相当于点击事件触发）
let onPointerup = ( event ) => {
  onUpPosition.x = event.clientX;
  onUpPosition.y = event.clientY;
// 如果鼠标按键按下和松开的时候是在同一个点同一个位置，则取消 transformControl 变换器正在变换的模型的变化状态，然后触发点击事件
  if ( onDownPosition.distanceTo( onUpPosition ) === 0 ) {
    transformControl.detach();
    onClick(event)
// 点击事件（在onPointerup函数里调用）
let onClick = (event) => {
  // 通过 Utils.onTransitionMouseXYZ 函数把将鼠标位置归一化为设备坐标（实现细节请直接看Utils工具类）
  let mouse = Utils.onTransitionMouseXYZ(event, renderer.domElement);
  // 通过摄像机和鼠标位置更新射线
  raycaster.setFromCamera( mouse, camera );
  // 计算模型和射线的焦点（objArr就是之前存储标点模型的数组）
  let intersects = raycaster.intersectObjects(objArr);
  // 如果有相交的标点模型，就做一些事情，比如显示弹窗（这不是threejs的内容，不进行介绍，要在html里面加一个弹窗元素，直接看代码即可）
  if ( intersects.length > 0 ) {
    const object = intersects[ 0 ].object;
    if (object.isMarker) {
      // 弹窗内容
      let info = document.getElementById('info');
      info.style = 'display: inline-block;top: ' + (event.clientY - 50) + 'px;left: ' + (event.clientX + 50) + 'px;'
      // info.innerHTML='<iframe src="http://localhost:9000/" frameborder="0" style="width: 100%;height: 300px"></iframe>'
      // 计算合适的弹窗大小和位置
      let body = document.getElementById('html');
      setTimeout(() => {
        body.scrollTop = 1;
        body.scrollLeft = 1;
        if (body.scrollTop) {
          info.style.top = event.clientY - info.clientHeight + 50 + 'px';
          if (event.clientY < info.clientHeight) {
            let { num2 } = numLow10(event.clientX, info.clientWidth)
            info.style.height = num2 + 100 + 'px';
            info.style.top = event.clientX - num2 + 'px';
        if (body.scrollLeft) {
          info.style.left = event.clientX - info.clientWidth - 50 + 'px';
          if (event.clientX < info.clientWidth) {
            let { num2 } = numLow10(event.clientX, info.clientWidth)
            info.style.width = num2 - 100 + 'px';
            info.style.left = event.clientX - num2 + 'px';
      }, 10)
      // 如果 num1 < num2 num2就减少10 的递归函数
      function numLow10 (num1, num2) {
        console.log(num1, num2)
        if (num1 < num2)
          return numLow10(num1, num2 - 10)
          return { num1, num2 }
  } else {
    info.style =  'display: none';
// 添加事件委托
window.addEventListener( 'pointermove', onPointermove, false );
window.addEventListener( 'pointerdown', onPointerdown, false );
window.addEventListener( 'pointerup', onPointerup, false );
// Utils.onTransitionMouseXYZ 实现细节
// 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)
function onTransitionMouseXYZ( event, domElement ) {
  let mouse = new THREE.Vector2();
  let domElementLeft = domElement.getBoundingClientRect().left
  let domElementTop = domElement.getBoundingClientRect().top
  mouse.x =  ((event.clientX - domElementLeft) / domElement.clientWidth) * 2 - 1
  mouse.y = -((event.clientY - domElementTop) / domElement.clientHeight) * 2 + 1
  return mouse;
最后，虽然上面添加了很多东西，但是还是缺少很重要的一步，现在页面是看不到效果的，因为还没有利用初始化好的 renderer 对象来把相机和场景渲染到视图上。现在来完成这一步
 
function animate() {
  // 在浏览器重绘之前渲染（requestAnimationFrame是什么？请看：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame）
  requestAnimationFrame( animate );
  // 在视图的大小发生变化的时候，是需要更新相机的宽高比的，不然看到的场景会发生变形，使用Utils.updateCameraAspect实现（实现细节请直接看Utils工具类）
  Utils.updateCameraAspect(renderer, camera);
  // 用渲染器把 场景 和 相机 渲染到页面
  renderer.render( scene, camera );
animate();
// Utils.updateCameraAspect 实现细节
// 看看宽高是否有变化，就有更新宽高比
function updateCameraAspect (renderer, camera) {
  if (resizeRendererToDisplaySize(renderer)) {
    const canvas = renderer.domElement;
    camera.aspect = canvas.clientWidth / canvas.clientHeight;
    camera.updateProjectionMatrix();
// 画布的宽高动态设置
function resizeRendererToDisplaySize (renderer) {
  const canvas = renderer.domElement;
  const pixelRatio = window.devicePixelRatio;
  const width = canvas.clientWidth * pixelRatio | 0;
  const height = canvas.clientHeight * pixelRatio | 0;
  const needResize = canvas.width !== width || canvas.height !== height;
  if (needResize) {
    renderer.setSize(width, height, false);
  return needResize;
https://github.com/sanyeof/threejs-dome
                    什么是Three.js?百度百科上是这么说的：Three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精彩的演示。不过，这款引擎还处在比较不成熟的开发阶段，其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度（尤其是文档的匮乏）three.js的代码托管在github上面。一些有用的链接Three.js的基本概念：https://
				
在很多的实际的项目中，你可能需要给一个Three.js的模型添加标签，那么我们可以使用three.js的精灵模型来表示，使用精灵模型表示一个模型对象的标签，那么精灵模型就要位于模型对象的附近。可以获得要标注模型的世界坐标，然后来设置精灵标签的位置，适当偏移一点就可以，当然也可以把精灵对象插入到模型对象的父对象中，和模型对象一样作为父对象的子对象，这样的话如果模型父对象的位置变化，精灵模型可以跟着一起变化。如下效果就是使用精灵实现的效果
			* 创建点精灵模型
场景查看
一、 创建一个场景
为了真正能够让你的场景借助three.js来进行显示，我们需要以下几个对象：场景、相机和渲染器，这样我们就能透过摄像机渲染出场景。
。。。 花里胡哨 好像也讲不明白  可以直接看官网文档 贼详细 three.js
实现查看一共分为
场景创建
// 场景
const scene = new THREE.Scene();
// 透视相机
const camera = new THREE.PerspectiveCamera( 
需要在3d模型上实现标注的功能，一开始是直接通过添加一个普通的mesh来实现的，但是这样就会有一个问题-当视图缩放的时候，标注也会跟着一起放大缩小，影响视觉效果，因此需要实现一个不会随着视图一起放大或者缩小的mesh
根据需求，可以知道我们其实需要实现的就是更改模型渲染的默认方式，而模型的渲染是由模型的MVP三个矩阵来决定的
再进一步分析MVP三个矩阵，Model矩阵决定模型的旋转、缩放和位移，View决定相机的变换， Projection决定模型最终到屏幕的输出。根据需求
				
下午花了几个小时边学边做，做出来了一个中国地图的倒角模型。其中中国地图的数据是geojson的格式，由于相关法律这里无法提供地图数据。如果想要学习交流使用可以前往github上翻一翻。
使用的工具很单纯：
THREE.js (ver 11.5，主要用了挤压模型和缓冲模型，材质使用的基础半透明材质和线材质)
	d3.v5.js (只用到了d3-geo的Mercator变换和其他的坐标变换小工具)...
1. 创建一个场景 (Scene)，场景中是你要渲染的对象。
2. 创建一个相机 (Camera)，相机观察场景中的对象。
3. 创建一个渲染器 (Renderer)，渲染器渲染场景中的对象并将结果显示在浏览器中。
4. 创建一个地球 (SphereGeometry)，并设置其材质 (Material) 和纹理 (Texture)。
5. 将地球添加到场景中。
6. 使用相机渲染场景。
这是一个简单的示例代码：
// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建地球
const geometry = new THREE.SphereGeometry(5, 32, 32);
const texture = new THREE.TextureLoader().load('earth.jpg');
const material = new THREE.MeshBasicMaterial({ map: texture });
const earth = new THREE.Mesh(geometry, material);
// 将地球添加到场景中
scene.add(earth);
// 使用相机渲染场景
renderer.render(scene, camera);
希望这能帮到你。