master

分支 (1)

管理

管理

master

threejs_exercise
/
09-text-ball.html

<!DOCTYPE html>
<html>

<head>
  <title>My first three.js app</title>
  <style>
    @font-face {
      font-family: 'kenpixel';
      src: url('./fonts/ttf/kenpixel.ttf') format('woff');
      font-weight: normal;
      font-style: normal;
    }

    body {
      margin: 0;
    }

    canvas {
      width: 100%;
      height: 100%
    }
  </style>
</head>

<body>
  <script src="js/three.js"></script>
  <script src="./js/stats.min.js"></script>
  <script src="./js/OrbitControls.js"></script>
  <script>
    // 创建创建
    var scene = new THREE.Scene();
    // 创建透视相机
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    // 创建渲染器
    var renderer = new THREE.WebGLRenderer();
    // 设置渲染器的尺寸
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    // 控制器
    new THREE.OrbitControls(camera, renderer.domElement);
    // 监视器
    var stats = new Stats();
    stats.setMode(1); // 0: fps, 1: ms
    // 将stats的界面对应左上角
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.left = '0px';
    stats.domElement.style.top = '0px';
    document.body.appendChild(stats.domElement);
    setInterval(function () {
      stats.begin();
      // 你的每一帧的代码
      stats.end();
    }, 1000 / 60);
    // --------------------------以上是基本代码-------------------------
    // 生成球体文字
    var angle = 10;
    var size = 90 / angle;
    var r = 10; // 球体半径
    var rs = []; //存放每一层的半径
    var ys = []; // 每一层用坐标
    var ns = [] // 每层文字的格式
    for (let i = 0; i < size; i++) {
      let deg = Math.PI * (i * angle) / 180;
      rs.push(Math.cos(deg) * r);
      ys.push(Math.sin(deg) * r);
      ns.push(parseInt(rs[i]) * 2 + 1);
    }

    ys = paddingData(ys, -1);
    ns = paddingData(ns);
    rs = paddingData(rs);

    console.log(rs);
    console.log(ys);
    console.log(ns);


    var loader = new THREE.FontLoader();

    loader.load('./fonts/fz.json',
      //加载好字体后创建三维文字
      function (font) {
        createText(font, -0.5, -0.5, '多');

        for (let i = 0; i < ys.length; i++) {
          let deg = getDeg(360 / ns[i], i); //得到当前层，步角度
          for (let j = 0; j < ns[i]; j++) {
            // console.log('i---:', i);
            // console.log('j---:', j);
            // console.log('deg--：', j * deg);

            //计算当文字的x, y坐标
            let x = rs[i] * Math.cos(j * deg);
            let z = rs[i] * Math.sin(j * deg);
            //创建文字
            createText(font, x, ys[i], z);
          }
        }


      },
      //加载进度
      function (xhr) {
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
      },
      //出现错误
      function (err) {
        console.log('字体加载失败！');
      }
    );


    function createText(font, x, y, z, text = "中") {
      var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
      // var str = '多';
      text = str[parseInt(Math.random() * 26)];
      var geometry;
      geometry = new THREE.TextGeometry(text, {
        font: font,
        size: 1,
        height: 0.1,
        color: 'red'
      });
      //创建法向量材质
      var meshMaterial = new THREE.MeshNormalMaterial({
        flatShading: THREE.FlatShading,
        // color: 'red',
        transparent: true,
        opacity: 1
      });
      var mesh = new THREE.Mesh(geometry, meshMaterial);
      mesh.position.set(x, y, z);
      scene.add(mesh);
    }


    // ----------------------封装的方法------------------------
    function getDeg(angle, i) {
      return Math.PI * (i * angle) / 180
    }

    // 球形数据补全
    function paddingData(arr, flag = 1) {
      let arr1 = [...arr];
      arr1.reverse();
      arr1.shift();
      arr1 = arr1.map(v => v * flag);
      arr = arr.concat(arr1);

      return arr;
    }


    camera.position.z = 15;
    // -----------------------------渲染------------------------------
    // 动画
    var animate = function () {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
    };

    animate();
  </script>
</body>

</html>