<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>three.js从入门到精通系列教程015 - three.js使用TextGeometry绘制变形三维文字</title>
    <script src="ThreeJS/three.js"></script>
    <script src="ThreeJS/jquery.js"></script>
</head>

<body>
    <center id="myContainer"></center>
    <script type="text/javascript">
        //创建渲染器
        var myRenderer = new THREE.WebGLRenderer({ antialias: true });
        myRenderer.setSize(window.innerWidth, window.innerHeight);
        $("#myContainer").append(myRenderer.domElement);
        var myScene = new THREE.Scene();
        myScene.background = new THREE.Color('white');
        var myCamera = new THREE.PerspectiveCamera(45,
            window.innerWidth / window.innerHeight, 0.1, 1000);
        myCamera.position.set(0, 40, 700);
        myScene.add(myCamera);
        //加载字库并绘制字母
        var myFontLoader = new THREE.FontLoader();
        /*
          THREE.TextGeometry(text, parameters)
          text是文字字符串；
          parameters是以下参数组成的对象：
            · size：字号大小，一般为大写字母的高度
            · height：文字的厚度
            · curveSegments：弧线分段数，使得文字的曲线更加光滑
            · font：字体，默认是'helvetiker'，需对应引用的字体文件
            · weight：值为'normal'或'bold'，表示是否加粗
            · style：值为'normal'或'italics'，表示是否斜体
            · bevelEnabled：布尔值，是否使用倒角，意为在边缘处斜切
            · bevelThickness：倒角厚度
            · bevelSize：倒角宽度    
        */
        myFontLoader.load('Data/optimer_bold.typeface.json', function (font) {
            var myGeometry = new THREE.TextGeometry('hello', { font: font, size: 80 });
            //计算当前几何体的范围
            myGeometry.computeBoundingBox();
            //计算字母(几何体)当前中心的偏移量
            var myOffsetX = (myGeometry.boundingBox.max.x
                - myGeometry.boundingBox.min.x) / 2;
            var myOffsetY = (myGeometry.boundingBox.max.y
                - myGeometry.boundingBox.min.y) / 2;
            var myMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff });
            var myTextMesh = new THREE.Mesh(myGeometry, myMaterial);
            myTextMesh.position.x = myGeometry.boundingBox.min.x - myOffsetX;
            myTextMesh.position.y = myGeometry.boundingBox.min.y + myOffsetY;
            myScene.add(myTextMesh);
        });
        //渲染绘制的字母
        animate();
        function animate() {
            requestAnimationFrame(animate);
            myCamera.lookAt(new THREE.Vector3(0, 100, 0));
            myRenderer.render(myScene, myCamera);
        }
    </script>
</body>

</html>

# javascript # 开发语言
Logo
天工造物局

北京人形旗下天工造物具身智能开源社区，聚焦具身天工与慧思开物两大平台

更多推荐

deck.gl TripsLayer 出租车轨迹动画示例实战：从示例运行到着色器原理

TripsLayer 是 deck.gl 中用于渲染**随时间流动的轨迹动画**（如出租车行程、物流路径、迁徙路线）的核心图层。本文以仓库中的最小独立示例 [examples/website/trips](https://link.gitcode.com/i/1442af8f442f4cff39ff546e050fceb5) 为骨架，带你完成从安装依赖、启动应用、理解曼哈顿出租车数据格式，到深入

avatar 天工造物局

Foundry Anvil 中 eth_simulateV1 的 Blob 交易与 Blob Gas 字段规范化：原理、实现与测试验证

本篇技术指南以 [anvil-simulate-blob-transactions.md](https://link.gitcode.com/i/3d2ebe227262de169335eb290af80da8) 这条 changelog 条目为起点，深入剖析 Foundry Anvil 对 `eth_simulateV1` RPC 返回结果中 blob（EIP-4844）交易与 blob gas

avatar 天工造物局

LMCache CLI 实战：用 `lmcache kvcache clear` 管理运行中服务的 KV Cache 状态

本文是一份针对 LMCache 官方 CLI 命令 `lmcache kvcache` 的完整技术指南。该命令用于在**运行中的 LMCache 服务（MP HTTP server）**上管理 KV cache 状态，当前提供 `clear` 子命令，用于清空 L1（CPU 内存）层中缓存的全部 KV 数据。读完本文，你将掌握该命令的完整参数体系、退出码语义、终端/JSON/静默三种输出模式，并能

avatar 天工造物局