three.js从入门到精通系列教程017 - three.js加载中文字体并绘制斜角立体汉字

最新推荐文章于 2026-06-21 21:12:38 发布

原创最新推荐文章于 2026-06-21 21:12:38 发布 · 688 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

three.js从入门到精通系列教程

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>three.js从入门到精通系列教程017 - three.js加载中文字体并绘制斜角立体汉字</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.OrthographicCamera(-2.5, 2.5, 1.875, -1.875, 1, 100);
        myCamera.position.set(3, 3, 20);
        myCamera.lookAt(new THREE.Vector3(2, 1, 0));
        myScene.add(myCamera);
        var myLight = new THREE.DirectionalLight('white');
        myLight.position.set(-5, 10, 5);
        myScene.add(myLight);
        //加载中文字体并绘制斜角汉字
        var myFontLoader = new THREE.FontLoader();
        myFontLoader.load('Data/MicrosoftYaHei_Regular.json', function (font) {
            var myTextGeometry = new THREE.TextGeometry('上善若水',
                {
                    font: font, size: 0.6, height: 1, curveSegments: 120,
                    bevelEnabled: true, bevelThickness: 1.5,
                    bevelSize: 0.05, bevelSegments: 3
                });
            //创建金属发亮材质
            var myMaterial = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
            var myTextMesh = new THREE.Mesh(myTextGeometry, myMaterial);
            myTextMesh.position.y = 0.5;
            myScene.add(myTextMesh);
        });
        //渲染绘制的斜角汉字
        animate();
        function animate() {
            requestAnimationFrame(animate);
            myRenderer.render(myScene, myCamera);
        }
    </script>
</body>

</html>