端午节使用Threejs实现数字人3D粽子-Toy模板网

这篇具有很好参考价值的文章主要介绍了端午节使用Threejs实现数字人3D粽子。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

个人主页：左本Web3D，更多案例预览请点击==》在线案例
个人简介：专注Web3D使用ThreeJS实现3D效果技巧和学习案例
💕 💕积跬步以至千里，致敬每个爱学习的你。喜欢的话请三连，有问题请私信或者加微信

1，功能介绍

Threejs实现加载粽子模型，使用AI生成数字人并进行介绍，效果如下图

端午节使用Threejs实现数字人3D粽子,3d,three.js,web3

2，功能实现

第一步：粽子建模，模型下载地址：【免费】粽子模型glb，fbx，max资源-CSDN文库

端午节使用Threejs实现数字人3D粽子,3d,three.js,web3

第二步：数字人生成

首先使用ChatGPT生成文案

端午节使用Threejs实现数字人3D粽子,3d,three.js,web3

复制文案到腾讯智影中，并选择自己喜欢的数字人，最后生成数字人视频MP4

视频地址https://live.csdn.net/v/306099第三步：使用Threejs技术实现

首先，加载粽子模型并添加到场景中的函数。使用了Three.js的GLTFLoader来加载glb模型文件，并且使用DRACOLoader来解码。代码中还对模型中的Mesh进行了遍历，将emissive属性设置为其颜色，并设置了emissiveMap和emissiveIntensity属性，用于在场景中产生发光效果。最后，获取模型包围盒的中心点，将模型居中显示，并将模型添加到场景中。在加载过程中，还输出了加载进度信息。

function loadResources() {
	const dracoLoader = new DRACOLoader();
	dracoLoader.setDecoderPath('libs/draco/');

	const loader = new GLTFLoader();
	loader.setDRACOLoader(dracoLoader);
	loader.load('assets/models/zongzi.glb', function(gltf) {
		zongziObj = gltf.scene;
		// peopleObj = gltf.scene.children[1];
		
		
			zongziObj .traverse(function (item) {
			  if (item instanceof THREE.Mesh) {
				item.material.emissive = item.material.color;
				item.material.emissiveMap = item.material.map;
				item.material.emissiveIntensity = 3;
			  }
			});


		// 获取包围盒的中心点
		const bbox = new THREE.Box3().setFromObject(zongziObj);
		const center = new THREE.Vector3();
		bbox.getCenter(center);
		zongziObj.position.sub(center);

		scene.add(zongziObj);
	}, function(xhr) {
		let num = Math.floor(xhr.loaded / xhr.total * 100) / 100;
		console.log('场景加载完成的百分比' + (xhr.loaded / xhr.total * 100) + '%');
	});
}

然后，使用Threejs把数字人绿幕视频进行播放。如何使用Three实现绿幕视频播放请查看：Threejs实现数字人绿幕视频背景透明播放，Shader绿幕视频抠像_左本Web3D的博客-CSDN博客文章来源地址https://www.toymoban.com/news/detail-567012.html

<script type="x-shader/x-vertex" id="vertexShader">
	varying vec2 vUv;
	void main() {
		vUv = uv;
		gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
	}
</script>

<script type="x-shader/x-fragment" id="fragmentShader">
	uniform sampler2D videoTexture;
	uniform float threshold;
	varying vec2 vUv;
	void main() {
		vec4 color = texture2D(videoTexture, vUv);
		float greenScreen = color.g - max(color.r, color.b);
		float alpha = 1.0 - smoothstep(threshold - 0.05, threshold + 0.05, greenScreen);
		gl_FragColor = vec4(color.rgb, alpha);
	}
</script>

var geometry = new THREE.PlaneGeometry(0.5625, 1);
var shaderMaterial = new THREE.ShaderMaterial({
	uniforms: {
		'videoTexture': {
			value: new THREE.VideoTexture(video_content)
		},
		threshold: {
			value: 0.05
		},
	},
	vertexShader: document.getElementById('vertexShader').textContent,
	fragmentShader: document.getElementById('fragmentShader').textContent,
	side: THREE.DoubleSide,
	transparent: true
});

var contentBox = new THREE.Mesh(geometry, shaderMaterial);
setTimeout(function() {
	sceneOrtho.add(contentBox)
}, 1000)

到了这里，关于端午节使用Threejs实现数字人3D粽子的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！