three.js添加文字

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

文章目录

准备
代码

准备

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

|-demo.html
|-js  (folder)
| |-three.min.js    (three.js和three.min.js都一样)
| |-...
|-...

演示的HTML文件是demo.html

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

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


字体	字重	风格	文件路径
helvetiker	normal	normal	/examples/fonts/helvetiker_regular.typeface.json
helvetiker	bold	normal	/examples/fonts/helvetiker_bold.typeface.json
optimer	normal	normal	/examples/fonts/optimer_regular.typeface.json
optimer	bold	normal	/examples/fonts/optimer_bold.typeface.json
gentilis	normal	normal	/examples/fonts/gentilis_regular.typeface.json
gentilis	bold	normal	/examples/fonts/gentilis_bold.typeface.json
droid sans	normal	normal	/examples/fonts/droid/droid_sans_regular.typeface.json
droid sans	bold	normal	/examples/fonts/droid/droid_sans_bold.typeface.json
droid serif	normal	normal	/examples/fonts/droid/droid_serif_regular.typeface.json
droid serif	bold	normal	/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>
<!--导入three.min.js-->
</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>

three.js添加文字

three.js添加文字

准备

代码

猜你喜欢