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

作者：菜鸟追梦旅行 | 2024-05-01 20:21:32

踩

threejs 中文字体


<!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>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/520567