threejs模型旁边添加 文字注释，解释模型 3D效果

先给大家看一下 效果吧

如上面所示，这是一个 简单的dome,就是在一个立方体旁边叠加一个显示文字的 模块。

threejs制作简单的立方体这个没有什么说，基本就是

 let geometry = new THREE.BoxGeometry(50, 50, 50)//构建一个正方体
  let material = new THREE.MeshLambertMaterial({ color: 0xffffff })//
  mesh = new THREE.Mesh(geometry, material)
  scene.add(mesh)

就是一个50x50x50的立方体，这不是本次的重点。重点在于如何去设置 文字模块，大家可以在http://www.yanhuangxueyuan.com/threejs/docs/index.html#manual/zh/introduction/Creating-text 网址看到

这里主要介绍了3种方法去处理 文字的显示，本次案例主要是利用了第一种纹理的形式。

下面开始制作

首页，需要理解纹理就相当于图片，所以我们的 文字必须先转换到文字，这个时候canvas就会排上用场。先使用canvas去创建一个文字

//用canvas生成图片
  let canvas = document.getElementById('canvas')
  let ctx = canvas.getContext('2d')
  canvas.width = 300
  canvas.height = 300
  //制作矩形
  ctx.fillStyle = "rgba(255,165,0,0.8)";
  ctx.fillRect(0, 0, 300, 300)

上面的 代码创建了一个矩形，接着在创建文字

 //设置文字
  ctx.fillStyle = "#fff";
  ctx.font = 'normal 18pt "楷体"'
  ctx.fillText('模型介绍', 100, 20)
  let textWord = '该模型由小少小同学制作完成'
  //文字换行
  let len = parseInt(textWord.length / 10)
  for (let i = 0; i < (len + 1); i++) {
    let space = 10
    if (i === len) {
      space = textWord.length - len * 10
    }
    console.log('len+' + len, 'space+' + space)
    let word = textWord.substr(i * 10, space)
    ctx.fillText(word, 15, 60*(i+1))
  }

上面的代码时生成文字的，换行那个 主要时拍页面显示不下所以使用了换行，换行只是改变了一下 呈现的位置

第二步 就是将文字生成图片

//生成图片
  let url = canvas.toDataURL('image/png');

第三步 就是将生成的图片放入到 纹理中

//将图片构建到纹理中
  let geometry1 = new THREE.PlaneGeometry(30, 30)
  let texture = THREE.ImageUtils.loadTexture(url, null, function (t) {})

  let material1 = new THREE.MeshBasicMaterial({
    map: texture,
    side: THREE.DoubleSide,
    opacity: 1,
    transparent: true,
  })

  let rect = new THREE.Mesh(geometry1, material1)
  rect.position.set(43, 40, 25)
  scene.add(rect)

这样基本就算  制作完成了

下面时完整的代码

    
    
    
    
    
    
    


你的浏览器不支持canvas

希望大家不懂的  可以提问，也希望大家可以点一个赞