three.js 加载显示文字

最新推荐文章于 2024-04-22 11:09:49 发布

夏华东的博客

最新推荐文章于 2024-04-22 11:09:49 发布

阅读量2.1k

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_44493841/article/details/122705228

版权

three.js 加载显示文字

代码放到 ./three.js/examples/ 下

<!DOCTYPE html>
<html lang="en">

<head>
	<title>three.js webgl - materials - video - webcam</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<link type="text/css" rel="stylesheet" href="main.css">
</head>

<body>

	<div id="info">
		<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - video webcam input
	</div>

	<video id="video" style="display:none" autoplay playsinline></video>

	<script type="module">
		import * as THREE from '../build/three.module.js';
		import { OrbitControls } from './jsm/controls/OrbitControls.js';
		import Stats from './jsm/libs/stats.module.js';
		let camera, scene, renderer, font, textGeo, textMesh1, materials;

		init();
		animate();
		// 加载文字
		function loadFont() {
			const loader = new THREE.FontLoader();
			loader.load('./fonts/helvetiker_bold.typeface.json', function (response) {
				font = response;
				textGeo = new THREE.TextGeometry(
					"three.js",  // 文字内容
					{
						font: font,
						size: 70, // 文字大小
						height: 20, // 文字厚度
						curveSegments: 3,  // 文字平滑度
						bevelThickness: 2, // 文字斜面厚度
						bevelSize: 1.5,  // 文字斜面的大小
						bevelEnabled: true // 文字阴影
					});
				textGeo.computeBoundingBox();
				materials = [
					new THREE.MeshPhongMaterial({ color: 0xffcc33, flatShading: true }), // front
					new THREE.MeshPhongMaterial({ color: 0xffcc33 }) // side
				];
				textMesh1 = new THREE.Mesh(textGeo, materials);
				const centerOffset = - 0.5 * (textGeo.boundingBox.max.x - textGeo.boundingBox.min.x);
				textMesh1.position.x = centerOffset;
				textMesh1.position.y = 0;
				textMesh1.position.z = 0;
				textMesh1.rotation.x = 0;
				textMesh1.rotation.y = Math.PI * 2;
				scene.add(textMesh1);
			});
		}
		function init() {
			camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1500);
			// camera.position.z = 0.01;
			camera.position.set( // 眼睛的位置
				0,   // +:右，-：左
				0,   // +:上，-：下
				500  // +:近，-：远
			);
			camera.lookAt(new THREE.Vector3(  // 眼睛看的点的位置
				0, // +:右，-：左
				0, // +:上，-：下
				0  // +:近，-：远
			));
			scene = new THREE.Scene();
			// 光源
			const dirLight = new THREE.DirectionalLight(0xffffff, 0.125);
			dirLight.position.set(0, 0, 1).normalize();
			scene.add(dirLight);
			const pointLight = new THREE.PointLight(0xffffff, 1.5);
			pointLight.position.set(0, 100, 90);
			scene.add(pointLight);
			loadFont()
			renderer = new THREE.WebGLRenderer({ antialias: true });
			renderer.setPixelRatio(window.devicePixelRatio);
			renderer.setSize(window.innerWidth, window.innerHeight);
			document.body.appendChild(renderer.domElement);
			const controls = new OrbitControls(camera, renderer.domElement);
			controls.enableZoom = false;
			controls.enablePan = false;
			window.addEventListener('resize', onWindowResize);
		}
		function onWindowResize() {
			camera.aspect = window.innerWidth / window.innerHeight;
			camera.updateProjectionMatrix();
			renderer.setSize(window.innerWidth, window.innerHeight);
		}
		function animate() {
			requestAnimationFrame(animate);
			renderer.clear();
			renderer.render(scene, camera);
		}

	</script>

</body>

</html>

夏华东的博客

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
three.js 加载显示文字

three.js 加载显示文字代码放到 ./three.js/examples/ 下<!DOCTYPE html><html lang="en"><head> <title>three.js webgl - materials - video - webcam</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-wid
复制链接

扫一扫