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)

這樣基本就算製作完成了

下面時完整的代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webgl入門</title>
    <script src="./build/three.js" type="text/javascript"></script>
    <script src="./examples/js/controls/OrbitControls.js"></script>
    <script src="./examples/js/loaders/SVGLoader.js"></script>
    <link href="css/test.css" rel="stylesheet">
    <style>
        body {
            margin: 0;
        }
    </style>
</head>
<body οnlοad="main();">
<canvas id="canvas" style="display: none;">你的瀏覽器不支持canvas</canvas>
</body>
<script>
let scene, camera, renderer, light, mesh, controls

//初始化渲染器
function initRenderer () {
  renderer = new THREE.WebGLRenderer({ antialias: true })
  renderer.setPixelRatio(window.devicePixelRatio)
  renderer.setSize(window.innerWidth, window.innerHeight)//渲染大小
  document.body.appendChild(renderer.domElement)
  renderer.setClearColor(0xFFFFFF, 1.0)//渲染背景顏色

}

//初始化相機
function initCamera () {
  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000)
  camera.position.set(10, 5, 20)
}

//初始化場景
function initScene () {
  scene = new THREE.Scene()
  scene.background = new THREE.Color(0xf0f0f0)
  let axesHelper = new THREE.AxesHelper(50)
  scene.add(axesHelper)
}

//初始化光線
function initLight () {
  //環境光
  light = new THREE.AmbientLight(0x00ff00)
  scene.add(light)

  //方向光
  light = new THREE.DirectionalLight(0xff0000, 1)
  light.position.set(0, 0, 1)
  scene.add(light)
}

//構建物體
function initObject () {
  let geometry = new THREE.BoxGeometry(50, 50, 50)//構建一個正方體
  let material = new THREE.MeshLambertMaterial({ color: 0xffffff })//
  mesh = new THREE.Mesh(geometry, material)
  scene.add(mesh)

  //用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)

}


//用戶交互插件 鼠標左鍵按住旋轉，右鍵按住平移，滾輪縮放
function initControls () {
  controls = new THREE.OrbitControls(camera)
  // 如果使用animate方法時，將此函數刪除
  //controls.addEventListener( 'change', render );
  // 使動畫循環使用時阻尼或自轉 意思是否有慣性
  controls.enableDamping = true
  //動態阻尼係數 就是鼠標拖拽旋轉靈敏度
  //controls.dampingFactor = 0.25;
  //是否可以縮放
  controls.enableZoom = true
  //是否自動旋轉
  //controls.autoRotate = true;
  //設置相機距離原點的最遠距離
  controls.minDistance = 200
  //設置相機距離原點的最遠距離
  controls.maxDistance = 600
  //是否開啓右鍵拖拽
  controls.enablePan = true
}

function animate () {
  //更新控制器
  controls.update()
  requestAnimationFrame(animate)
  renderer.render(scene, camera)
}

function main () {
  initRenderer()//渲染器
  initCamera()//相機
  initScene()//場景
  initLight()//光線
  initObject()//物體
  initControls()
  animate()//動畫
}

</script>


</body>
</html>

希望大家不懂的可以提問，也希望大家可以點一個贊

threejs模型旁邊添加文字註釋，解釋模型 3D效果

vue-cli3.0以上 + typeScript 教程學習指導（四）父子傳值

webgl入門學習踩坑之路，學習資料分享

vue-cli3.0以上 + typeScript 教程學習指導（二）數據和事件處理

vue-cli3.0以上 + typeScript 教程學習指導（三）計算屬性 watch 新

vue實現拖拽移動並添加的完整案，帶滾動條的

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

threejs模型旁邊添加 文字註釋，解釋模型 3D效果

threejs模型旁邊添加文字註釋，解釋模型 3D效果