three.js添加文字

技术2023-12-25 71

three.js添加文字

现在网上流传的three.js添加文字普遍非常复杂，并且不全或者显示不出来今天给大家分享一个简单的方法如果显示不出可以私信或评论

文章目录

准备代码

准备

开发环境示例目录，大家可以根据自己的情况调整

演示的HTML文件是demo.html

文件准备下载three.js的build目录以及/examples/fonts/目录将整个three.js下载下来有点麻烦，大家可以看我的文章three.js中的下载部分，里面有只下载部分文件的方法 https://blog.csdn.net/twxwjh/article/details/107077201

font目录下的都是字体文件，我们浏览一下

字体字重风格文件路径helvetikernormalnormal/examples/fonts/helvetiker_regular.typeface.jsonhelvetikerboldnormal/examples/fonts/helvetiker_bold.typeface.jsonoptimernormalnormal/examples/fonts/optimer_regular.typeface.jsonoptimerboldnormal/examples/fonts/optimer_bold.typeface.jsongentilisnormalnormal/examples/fonts/gentilis_regular.typeface.jsongentilisboldnormal/examples/fonts/gentilis_bold.typeface.jsondroid sansnormalnormal/examples/fonts/droid/droid_sans_regular.typeface.jsondroid sansboldnormal/examples/fonts/droid/droid_sans_bold.typeface.jsondroid serifnormalnormal/examples/fonts/droid/droid_serif_regular.typeface.jsondroid serifboldnormal/examples/fonts/droid/droid_serif_bold.typeface.json

这里选择optimer_regular.typeface.json做示范将optimer_regular.typeface.json复制到/js/目录下其他字体以此类推准备工作完成

代码

<html> <head> <script src="/js/three.min.js"></script>  </head> <body> <script> var scene=new THREE.Scene();//创建场景 var camera=new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); //创建相机 var renderer=new THREE.WebGLRenderer({antialias:true, alpha:true}); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); //创建渲染器 /* 定义相机我是这么定义的大家可以根据情况调整 camera.position.z=4; camera.position.y=2.5; camera.position.x=0; */ var spotlight=new THREE.SpotLight(0xFFFFFF); //定义光源 0xFFFFFF是十六进制颜色名，白色 spotlight.position.set(-15, 10, 0); //光源位置 scene.add(spotlight); //添加光源 var loader=new THREE.FontLoader();//开始创建文字 loader.load("/js/fonts/optimer_regular.typeface.json", function(font){ //上面导入了optimer_regular.typeface.json var new_text=new THREE.TextGeometry("text you want to show", { font:font, size:0.5, height:0.3, /* 这里只定义了最基本的参数还有其他的参数 font: THREE.Font的实例 size: Float, 字体大小, 默认值为100 height: Float, 挤出文本的厚度。默认值为50 curveSegments: Integer, (表示文本的)曲线上点的数量，默认值为12 bevelEnabled: Boolean, 是否开启斜角，默认为false bevelThickness: Float, 文本上斜角的深度，默认值为20 bevelSize: Float, 斜角与原始文本轮廓之间的延伸距离, 默认值为8 bevelSegments: Integer, 斜角的分段数, 默认值为3 */ }); var material_text=new THREE.MeshLambertMaterial({color:0x9933FF}); /* 定义可以反光的材料, 也可以使用MeshBasicMeterial, 只是对光源无效 0x9933FF是十六进制颜色名 */ var text_1=new THREE.Mesh(new_text, material_text); //创建文字 scene.add(text_1); //添加文字 text_1.position.z=-7.4; text_1.position.y=4; text_1.position.x=-2.5; }); function animate() { requestAnimationFrame(animate); /*cube.rotation.x+=0.01; cube.rotation.y+=0.01;*/ renderer.render(scene, camera); } animate(); </script> </body> </html>

Processed: 0.010, SQL: 9