three.js ——文字

<!--
 * @Date: 2025-09-22 13:53:07
 * @LastEditors: jiayaolin01 “jiayl@wizpower.com”
 * @LastEditTime: 2025-09-23 15:56:09
 * @FilePath: \threejs-demo\text.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My first three.js app</title>
    <style>
        body {
            margin: 0;
        }
    </style>
</head>

<body>
    <script type="importmap">
        {
        "imports": {
            "three": "./node_modules/three/build/three.module.js",
            "three/examples/jsm/": "./node_modules/three/examples/jsm/"
        }
    }
</script>

    <script type="module">
        // three/examples/jsm/路径之后对应的是three.js官方文件包`/examples/jsm/`中的js库
    import * as THREE from 'three';

    // 扩展库OrbitControls.js
    import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
    // 扩展库GLTFLoader.js
    import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
    console.log(OrbitControls);
    console.log(GLTFLoader);

    import { TextGeometry } from 'https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/geometries/TextGeometry.js';
import { FontLoader } from 'https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/loaders/FontLoader.js';

        // 创建场景
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0x333333);
        
        // 创建相机
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.z = 200;
        
        // 创建渲染器
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        
        // 加载字体并创建文字
        const loader = new FontLoader();
        loader.load('https://unpkg.com/three@0.160.0/examples/fonts/helvetiker_regular.typeface.json', function (font) {
            // 创建文字几何体
            const textGeometry = new TextGeometry('Hello three.js!', {
                font: font,
                size: 20,
                height: 5,
                curveSegments: 12,
                bevelEnabled: true,
                bevelThickness: 2,
                bevelSize: 1,
                bevelSegments: 5
            });
            
            // 创建材质
            const textMaterial = new THREE.MeshPhongMaterial({ 
                color: 0x00ff00,
                shininess: 100 
            });
            
            // 创建网格对象
            const textMesh = new THREE.Mesh(textGeometry, textMaterial);
            
            // 居中文字
            textGeometry.computeBoundingBox();
            const centerOffset = -0.5 * (textGeometry.boundingBox.max.x - textGeometry.boundingBox.min.x);
            textMesh.position.x = centerOffset;
            textMesh.position.y = -50;
            
            // 添加到场景
            scene.add(textMesh);
            
            // 添加光源
            const ambientLight = new THREE.AmbientLight(0x404040, 2);
            scene.add(ambientLight);
            
            const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
            directionalLight.position.set(1, 1, 1);
            scene.add(directionalLight);
            
            // 渲染循环
            function animate() {
                requestAnimationFrame(animate);
                textMesh.rotation.y += 0.01;
                renderer.render(scene, camera);
            }
            
            animate();
        });
        
        // 窗口大小调整
        window.addEventListener('resize', function() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });
   
   
   </script>

</body>

</html>
<style>
    #info {
        position: absolute;
        top: 10px;
        width: 100%;
        text-align: center;
        z-index: 100;
        display: block;
    }
</style>

效果图

在这里插入图片描述

文档链接

http://www.webgl3d.cn/Three.js/

# javascript # 开发语言 # ecmascript
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 天工造物局