学习threejs，绘制任意字体模型

news2024/12/26 21:16:20

👨‍⚕️ 主页： gis分享者
👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏：threejs gis工程师

文章目录

一、🍀前言
二、🍀绘制任意字体模型
- 1. ☘️实现思路
- 2. ☘️代码样例

一、🍀前言

本文详细介绍基于threejs如何绘制任意文字模型，亲测可用。希望能帮助到您。一起学习，加油！加油！

二、🍀绘制任意字体模型

1. ☘️实现思路

1、初始化renderer渲染器
2、初始化Scene三维场景
3、初始化camera相机，定义相机位置 camera.position.set
4、初始化light灯光，定义灯光位置，Scene场景加入灯光
5、加载字体模型：加载字体库，在回调函数中创建TextBufferGeometry字体模型，设置字体模型位置和贴图，Scene场景加入字体模型
6、加入controls控制，加入stats监控器，监控帧数信息

2. ☘️代码样例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>learn8(绘制字体模型)</title>
    <script src="lib/threejs/127/three.js-master/build/three.js"></script>
    <script src="lib/threejs/127/three.js-master/examples/js/controls/OrbitControls.js"></script>
    <script src="lib/threejs/127/three.js-master/examples/js/libs/stats.min.js"></script>
</head>
<style>
    body {
        margin: 0;
    }

    canvas {
        width: 100%;
        height: 100%;
        display: block;
    }
</style>
<body onload="draw()">

</body>
<script>
    var renderer
    var initRenderer = () => {
      renderer = new THREE.WebGLRenderer({antialias: true})
      renderer.setSize(window.innerWidth, window.innerHeight)
      document.body.appendChild(renderer.domElement)
    }
    var camera
    // 初始化相机
    var initCamera = () => {
      camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 10000)
      camera.position.set(0, 0, 400)
    }
    var scene
    // 初始化场景
    var initScene = () => {
      scene = new THREE.Scene()
    }
    // 初始化灯光
    var light
    var initLight = () => {
      scene.add(new THREE.AmbientLight(0x404040))
      light = new THREE.DirectionalLight(0xffffff)
      light.position.set(1, 1, 1)
      scene.add(light)
    }

    var fontModel
    var initModel = () => {
      var font
      var loader = new THREE.FontLoader()
      // 加载字体库，中文字体库参照：https://www.cnblogs.com/leisir/articles/5905700.html
      loader.load('lib/threejs/127/three.js-master/examples/fonts/gentilis_regular.typeface.json', res => {
        font = new THREE.TextBufferGeometry('gis sharer, thanks!', {
          font: res,
          size: 100,
          height: 60
        })
        // 运行以后设置font的boundingBox属性对象，如果不运行无法获得。
        font.computeBoundingBox()
        var map = new THREE.TextureLoader().load('data/img/UV_Grid_Sm.jpg')
        var material = new THREE.MeshLambertMaterial({map: map, side:THREE.DoubleSide})
        fontModel = new THREE.Mesh(font, material)
        //设置位置
        fontModel.position.x = - (font.boundingBox.max.x - font.boundingBox.min.x)/2; //计算出整个模型的宽度的一半, 保证字体居中
        fontModel.position.y = - 50
        fontModel.position.z = - 30
        scene.add(fontModel)
      })
    }

    var stats
    var initStats = () => {
      stats = new Stats()
      document.body.appendChild(stats.dom)
    }

    var controls
    var initControls = () => {
      controls = new THREE.OrbitControls(camera, renderer.domElement)
      // 如果使用animate方法时，将此函数删除
      //controls.addEventListener( 'change', render )
      // 使动画循环使用时阻尼或自转 意思是否有惯性
      controls.enableDamping = true
      //动态阻尼系数 就是鼠标拖拽旋转灵敏度
      //controls.dampingFactor = 0.25
      //是否可以缩放
      controls.enableZoom = true
      //是否自动旋转
      controls.autoRotate = false
      //设置相机距离原点的最远距离
      controls.minDistance = 200
      //设置相机距离原点的最远距离
      controls.maxDistance = 600
      //是否开启右键拖拽
      controls.enablePan = true
    }
    // 渲染
    var render = () => {
      renderer.render(scene, camera)
    }
    var onWindowResize = () => {
      camera.aspect = window.innerWidth/window.innerHeight
      camera.updateProjectionMatrix()
      render()
      renderer.setSize(window.innerWidth, window.innerHeight)
    }

    var animate = () => {
      controls.update()
      render()
      stats.update()
      requestAnimationFrame(animate)
    }
    var draw = () => {
      initRenderer()
      initScene()
      initCamera()
      initLight()
      initModel()
      initControls()
      initStats()

      animate()
      window.onresize = onWindowResize
    }
</script>
</html>