【技术调研】三维（6）-案例1：模型动态修改、模型动画

最新推荐文章于 2024-09-24 21:17:34 发布
最新推荐文章于 2024-09-24 21:17:34 发布
阅读量708 收藏 19
点赞数 26
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dopapapa/article/details/141937004
版权

模型上色、换肤

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

<head>
	<meta charset="utf-8">
	<title>My first three.js app</title>
	<style>
		body {
			margin: 0;
		}
		
		#process{
			position: absolute;
			top:0;
			left:0;
			font-size:20px;
			color: aliceblue;
		}
		
		#operation{
			position: absolute;
			top:0;
			right:20px;
			/* transform: translateX(-50%); */
		}
	</style>
</head>

<body>
	
	<script type="module">
		import * as THREE from "three";
		import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
		// import {Rhino3dmLoader} from 'three/examples/jsm/loaders/3DMLoader.js';
		import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
		
		const scene = new THREE.Scene();
		const camera = new THREE.PerspectiveCamera(
			75,
			window.innerWidth / window.innerHeight,
			0.1,
			1000
		);
		camera.position.set(5, 2, 0);
		camera.lookAt(0, 0, 0);

		const renderer = new THREE.WebGLRenderer({
			antialias: true
		})
		renderer.setSize(window.innerWidth, window.innerHeight);
		renderer.shadowMap.enabled = true;
		renderer.shadowMapType = THREE.PCFSoftShadowMap;
		document.body.appendChild(renderer.domElement);

		/**
		 *  创建地面
		 */
		const geometry2 = new THREE.PlaneGeometry(100, 100);
		const material2 = new THREE.MeshStandardMaterial({ color: 0xffffff });
		const plane = new THREE.Mesh(geometry2, material2);
		//旋转
		plane.rotation.x = -Math.PI / 2;
		plane.receiveShadow = true;
		scene.add(plane);

		/**
		 * 灯光
		 */
		//环境光
		const ambientLight = new THREE.AmbientLight(0x404040); // 柔和的白光
		scene.add(ambientLight);
		// 平行光
		const directionLight = new THREE.DirectionalLight(0xffffff, 1);
		directionLight.castShadow = true;
		//让阴影更清晰
		directionLight.shadow.mapSize.width = 2048;
		directionLight.shadow.mapSize.height = 2048;
		//不设置以下内容看不见
		directionLight.shadow.camera.left = -100;
		directionLight.shadow.camera.right = 100;
		directionLight.shadow.camera.top = 100;
		directionLight.shadow.camera.bottom = -100;
		directionLight.position.set(150, 20, 0);
		const directionalLightHelper = new THREE.DirectionalLightHelper(directionLight, 5);
		scene.add(directionLight);
		
		let model;
		let modelScene;
		
		
		/**
		 * 修改模型颜色
		 */
		const oInput = document.getElementById("color");
		//添加事件
		oInput.addEventListener('input',(event)=>{
			if(model){
				model.material.color.set(event.target.value);
			}
			
		})
		
		/**
		 * 修改整个加载进来的模型大小
		 */
		const fangdaButton = document.getElementById("fangda"); 
		fangdaButton.addEventListener('click',(event)=>{
			if(modelScene){
				modelScene.scene.scale.set(++modelScene.scene.scale.x,++modelScene.scene.scale.y,++modelScene.scene.scale.z);
			}
		})
		const suoxiaoButton = document.getElementById("suoxiao");    
		suoxiaoButton.addEventListener('click',(event)=>{
			if(modelScene && modelScene.scene.scale.x>1){
				modelScene.scene.scale.set(--modelScene.scene.scale.x,--modelScene.scene.scale.y,--modelScene.scene.scale.z);
			}
		})

		const gLTFLoader = new GLTFLoader();

		const oProcess = document.getElementById("process");  //用于显示加载进度

		gLTFLoader.load(
			"models/CesiumMan.glb",
			(gltf) =>{
				// console.log(1);
				console.log(gltf);
					// console.log(2);
				modelScene = gltf
					// gltf.scene.scale.set(10,10,10);
				model = gltf.scene.children[0].children[1];
				
				scene.add(gltf.scene);
				
			},
			(xhr) => {
				console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
				oProcess.textContent = ( xhr.loaded / xhr.total * 100 ) + '%'
			},
			(error) =>{
				console.log(error);
			}
		);
		const controls = new OrbitControls(camera, renderer.domElement);
		controls.enableDamping = true;

		const animete = () => {

			requestAnimationFrame(animete);
			renderer.render(scene, camera);
		};
		animete();

	</script>
	<p id="process"></p>
	<div id="operation">
		<input type="button" value="放大" id="fangda">
		<input type="button" value="缩小" id ="suoxiao">
		<input type="color" id="color">
	</div>
</body>

</html>

模型动画

按下W，控制动画。

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

<head>
	<meta charset="utf-8">
	<title>My first three.js app</title>
	<style>
		body {
			margin: 0;
		}
		
		#process{
			position: absolute;
			top:0;
			left:0;
			font-size:20px;
			color: aliceblue;
		}
		
		#operation{
			position: absolute;
			top:0;
			right:20px;
			/* transform: translateX(-50%); */
		}
	</style>
</head>

<body>
	
	<script type="module">
		import * as THREE from "three";
		import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
		// import {Rhino3dmLoader} from 'three/examples/jsm/loaders/3DMLoader.js';
		import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
		
		const scene = new THREE.Scene();
		const camera = new THREE.PerspectiveCamera(
			75,
			window.innerWidth / window.innerHeight,
			0.1,
			1000
		);
		camera.position.set(5, 2, 0);
		camera.lookAt(0, 0, 0);
		
		// const cubeCamera = new THREE.Mesh(
		// 	new THREE.SphereGeometry(0.2),
		// 	new THREE.MeshBasicMaterial({color:0xff1ff1,wireframe:true})
		// );
		// //相机位置的向量，缩放0.6得到新的向量
		// const pVector = camera.position.clone().multiplyScalar(0.8);
		// cubeCamera.position.copy(pVector);
		// scene.add(cubeCamera);
		
		
		const renderer = new THREE.WebGLRenderer({
			antialias: true
		})
		renderer.setSize(window.innerWidth, window.innerHeight);
		renderer.shadowMap.enabled = true;
		renderer.shadowMapType = THREE.PCFSoftShadowMap;
		document.body.appendChild(renderer.domElement);

		/**
		 *  创建地面
		 */
		const geometry2 = new THREE.PlaneGeometry(100, 100);
		const material2 = new THREE.MeshStandardMaterial({ color: 0xffffff });
		const plane = new THREE.Mesh(geometry2, material2);
		//旋转
		plane.rotation.x = -Math.PI / 2;
		plane.receiveShadow = true;
		scene.add(plane);

		/**
		 *  创建立方体
		 */

		const cube1 = new THREE.Mesh(new THREE.BoxGeometry(3, 3, 3),new THREE.MeshStandardMaterial({color:0x404040}));
		const cube2 = new THREE.Mesh(new THREE.BoxGeometry(2, 5, 3),new THREE.MeshStandardMaterial({color:0x404040}));
		const cube3 = new THREE.Mesh(new THREE.BoxGeometry(3, 10, 4),new THREE.MeshStandardMaterial({color:0x404040}));
		const cube4 = new THREE.Mesh(new THREE.BoxGeometry(3, 3, 5),new THREE.MeshStandardMaterial({color:0x404040}));
		
		cube1.position.set(10, 0, 20);
		cube2.position.set(-10, 0, 20);
		cube3.position.set(10, 0, -20);
		cube4.position.set(-10, 0, -20);
		// cube1.castShadow = true;
		scene.add(cube1,cube2,cube3,cube4);
		
	
		
		
		/**
		 * 灯光
		 */
		//环境光
		const ambientLight = new THREE.AmbientLight(0x404040); // 柔和的白光
		scene.add(ambientLight);
		// 平行光
		const directionLight = new THREE.DirectionalLight(0xffffff, 3);
		directionLight.castShadow = true;
		//让阴影更清晰
		directionLight.shadow.mapSize.width = 2048;
		directionLight.shadow.mapSize.height = 2048;
		//不设置以下内容看不见
		directionLight.shadow.camera.left = -100;
		directionLight.shadow.camera.right = 100;
		directionLight.shadow.camera.top = 100;
		directionLight.shadow.camera.bottom = -100;
		directionLight.position.set(10, 20, 0);
		const directionalLightHelper = new THREE.DirectionalLightHelper(directionLight, 5);
		scene.add(directionLight);
		
		

		
		let materialmodel;
		let modelScene;
		/**
		 * 修改模型颜色
		 */
		const oInput = document.getElementById("color");
		//添加事件
		oInput.addEventListener('input',(event)=>{
			if(materialmodel){
				materialmodel.material.color.set(event.target.value);
			}
		})
		
		/**
		 * 修改整个加载进来的模型大小
		 */
		const fangdaButton = document.getElementById("fangda"); 
		fangdaButton.addEventListener('click',(event)=>{
			if(modelScene){
				modelScene.scene.scale.set(++modelScene.scene.scale.x,++modelScene.scene.scale.y,++modelScene.scene.scale.z);
			}
		})
		const suoxiaoButton = document.getElementById("suoxiao");    
		suoxiaoButton.addEventListener('click',(event)=>{
			if(modelScene && modelScene.scene.scale.x>1){
				modelScene.scene.scale.set(--modelScene.scene.scale.x,--modelScene.scene.scale.y,--modelScene.scene.scale.z);
			}
			// if(action) action.stop();
		})
		/**
		 * 换肤
		 */
		const huanfuButton = document.getElementById("huanfu");
		huanfuButton.addEventListener('click',(event)=>{
			if(materialmodel){
				// 创建一个纹理贴图
				const textureLoader = new THREE.TextureLoader();
				const name = Math.floor(Math.random() * 55) + 1;
				const texture = textureLoader.load('./img/'+name+'.jpg');
				materialmodel.material.map = texture;
				 mesh.material.needsUpdate = true;
			}
		})


		const gLTFLoader = new GLTFLoader();

		const oProcess = document.getElementById("process");  //用于显示加载进度
		
		
		let mixer;  //动画用
		let action;
		gLTFLoader.load(
			"models/CesiumMan.glb",
			(gltf) =>{
				console.log(gltf);
				modelScene = gltf
				materialmodel = gltf.scene.children[0].children[1];
				
				//获取动作
				const realmodel = gltf.scene;
				const animations = gltf.animations;
				mixer = new THREE.AnimationMixer(realmodel);
;				const runClip = animations.find(clip => clip.name==="animation_0");
				if(runClip){
				    action = mixer.clipAction(runClip);
					// action.play();
					// action.reset();
					// action.stop();
				}
				scene.add(gltf.scene);
				
			},
			(xhr) => {
				console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
				oProcess.textContent = ( xhr.loaded / xhr.total * 100 ) + '%'
			},
			(error) =>{
				console.log(error);
			}
		);
		
		/**
		 * 键盘控制动作
		 * 
		 */
		window.addEventListener("keydown",(event)=>{
			
			if(event.code ==="KeyW" && !action.isRunning()){
				// if(!action.isScheduled()){
				// 	action.play();
				// 	action.fadeIn(0.5); 
				// }
				action.reset().fadeIn(0.5).play(); 
				console.log(event.code);
				//重置后慢慢启动动作
			}
		})
		
		window.addEventListener("keyup",(event)=>{
				
			if(event.code ==="KeyW"){	
				action.fadeOut(0.5);
			}
		})
		
		
		
		const controls = new OrbitControls(camera, renderer.domElement);
		controls.enableDamping = true;
		controls.addEventListener("change",()=>{
			//获取合适的位置坐标
			// console.log(camera.position);
		})
		const clock = new THREE.Clock();
		const animete = () => {
			//动画用
			const elapsedTime = clock.getDelta();
			// console.log(elapsedTime);
			if(mixer) {
				mixer.update(elapsedTime);
			}
			requestAnimationFrame(animete);
			renderer.render(scene, camera);
			
		};
		animete();

	</script>
	<p id="process"></p>
	<div id="operation">
		<input type="button" value="放大" id="fangda">
		<input type="button" value="缩小" id ="suoxiao">
		<input type="button" value="换肤" id="huanfu">
		<!-- <input type="button" value="换肤" id="stop"> -->
		<input type="color" id="color">
	</div>
</body>

</html>
Slahser123456
关注
LLMs之IT：大模型核心技术—指令微调的简介、Self Instruction思想(一种生成指令数据集的方法论—主要用在指令微调阶段)的简介、Alpaca/BELLE应用、实战案例代码实现之详细攻略
近期请国内外头部出版社可尽快私信博主！——心比天高，仗剑走天涯，保持热爱，奔赴向梦想！低调，谦虚，自律，反思，成长，还算是比较正能量的博主，公益免费传播……内心特别想在AI界做出一些可以推进历史进程影响力的东西(兴趣使然，有点小情怀，也有点使命感呀)…
07-05 1971
​ LLMs之IT：大模型核心技术—指令微调的简介、Self Instruction思想(一种生成指令数据集的方法论—主要用在指令微调阶段)的简介、Alpaca/BELLE应用、实战案例代码实现之详细攻略 目录 相关文章 指令微调的简介 Self Instruction思想的简介 Self Instruction的实战案例 相关文章 LLMs之Data：指令微调的简介、Self Instruction思想(一种生成指令数据集的方法论—主要用在指令微调阶
【技术调研】三维（1）-ThreeJs-基础常识及第一个程序
dopapapa的博客
09-09 662
​ 公司有网页三维以及客户端、vr三维相关项目机会，需要对相关技术进行调研，进行项目可行性评估和大致成本评估。基于此对三维一些内容进行调研。​ Three.js是一款基于原生WebGL封装通用Web 3D引擎。由于前文已经了解过webGL，知道通过webGL的API我们能绘制出三维物体及动画。此处可以把three.js理解为一个封装好的专门用来处理webGL三维动画的javascript库。比如可以直接通过api生成一个几何体，而不用像使用webGL原生API那样去写每个点的坐标、索引等等。
2024年AIGC行业研究：多模态大模型与商业应用
2301_77193447的博客
06-26 1575
2024年2月，OpenAI发布其首款视频生成模型Sora，用户仅需输入一段文字即可生成长达一分钟场景切换流畅、细节呈现清晰、情感表达准确的高清视频，与一年前的AI生成视频相比，在各维度均实现了质的提升。这一突破再次将AIGC推向大众视野。AIGC即通过大量数据训练而成的人工智能系统，可根据用户的个性化指令生成文本、音频、图像、代码等内容。自2022年频频出圈的ChatGPT推出以来，生成式AI在游戏、影视、出版、金融、数字人等多个应用场景中展现出巨大潜力和价值。
城市信息模型平台顶层设计与实践-CIM-读书笔记
碳学长的博客
01-15 1678
CIM
室内设计专用：边柜单椅3D模型资源集
weixin_42471823的博客
09-01 1345
本文还有配套的精品资源，点击获取 简介：3D模型设计是IT行业的关键领域，广泛应用于室内设计、游戏开发和影视制作。本压缩包“边柜单椅3D模型”包含了由Autodesk 3ds Max创建的独立家具模型资源。文章将详细探讨3D建模软件、家具模型设计、3D模型格式、图像预览、设计流程、资源共享及版权等关键知识点，以帮助设计师高效利用这些模型资源。 1. 3D建模软件概...
微软研究深度报告：Sora文转视频AI模型全景剖析及未来展望
weixin_40262196的博客
03-02 1358
sora技术报告英文原文地址及中文翻译
深入浅出落地应用分析：AI虚拟数字人
女王の专属领地
03-12 1811
数字人是通过计算机技术制作的类人形象或者软件制作的结果。它们具备人类的外貌或行为模式，但他们不是现实世界中的某个人的录像，是可以独立运行和存在的。
关于生成式人工智能模型应用的调研
远
10-27 1071
生成式人工智能（Generative AI）近年来经历了显著的增长，导致在各种领域出现了广泛的应用。在本文中，我们提供了对350多个生成式人工智能应用的综合调查，提供了结构化的分类法和对各种单模和多模生成式人工智能的简明描述。这项调查分为各个部分，涵盖了各种单模生成式人工智能应用，如文本、图像、视频、游戏和脑信息等。我们的调查旨在为研究人员和从业者提供宝贵的资源，以帮助他们在迅速扩展的生成式人工智能领域中导航，促进对当前最先进技术的更好理解，推动领域的进一步创新。
[案例]三维立体商业计划书[策划&调研].pptx
10-30
1. **封面**：封面通常包括计划书的标题（例如，“三维立体商业计划书”），汇报人的姓名，以及可能的公司标志或LOGO。封面设计应简洁明了，突出主题。 2. **年度商业计划**：这部分是整个计划的核心，概述了一年内...
产品设计课程 三维模型
01-19
在产品设计领域，三维模型是至关重要的工具，它允许设计师们在计算机上创建、修改和预览产品的虚拟表现。这门“产品设计课程 三维模型”旨在教授如何利用现代技术来构建精确、生动的三维产品模型，从而提高设计效率...
智慧校园三维可视化管理平台-项目建议.pdf
09-27
2. 三维可视化技术：三维可视化技术通过使用三维图形和动画，将复杂的数据和信息转化成直观的三维模型，帮助用户更清晰地理解和掌握信息。在智慧校园中，三维可视化可以用于展示校园建筑布局、实时监控校园安全、...
文件系统设计 - 开发文件系统 Store (上篇)
qq_44746132的博客
09-21 579
本章以一个基础的响应式Store类开始，对编辑器最核心的基础模块-文件系统管理进行开发设计，遵循面向接口编程的理念，设计文件系统的相关接口类型定义。
webview2加载本地页面
qq_25160759的博客
09-23 587
推荐使用这种方式，加载速度比WebResourceRequested快（实测的确是快点），但是需要支持：ICoreWebView2_3。个人测试加载html字符串，对于html中引入了css和js，加载不太友好。这种方式是通过截获网络请求，然后返回需要的数据。以达到成功请求的假象。
WebGL复杂几何体与模型加载
天涯学馆
09-23 396
在WebGL中，复杂几何体的创建通常涉及多个顶点和面片，而模型加载则涉及到导入外部文件格式，如OBJ、GLTF或FBX。在WebGL中，可以通过设置不同类型的灯光来改变3D场景的光照效果。在WebGL中，可以通过增加更多的灯光uniforms并在片段着色器中计算它们的组合效果来实现多光源。除了基本的漫射和镜面高光，还可以添加软边缘高光、环境光遮蔽（Ambient Occlusion）和全局光照等效果，以增强光照的真实感。GLTF是一种现代的3D模型格式，包含了模型的几何体、材质、纹理和动画。
apply、call和bind的作用和区别
欢迎来到我的博客！我是一名全栈开发工程师，主攻前端开发。希望通过我的博客，能够与大家共同学习和成长。感谢您的关注和支持！
09-23 680
javascript中，apply、call和bind的作用和区别介绍。
grpcweb 客户端请求grpc-java服务器
nddjava的专栏
09-24 362
1. 定义grpc proto文件：HelloWorld.proto。5.grpc-web代理：nginx。3. grpc-web js生成。2. java grpc服务。4. grpc-web代码。
DC00015基于java web校园网上购物系统
最新发布
黄昏下的黎明的博客
09-24 623
DC00015【含配套文档】基于java web校园网上购物系统。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值