threejs官方demo解析（二）

最新推荐文章于 2024-06-09 00:35:31 发布
最新推荐文章于 2024-06-09 00:35:31 发布
阅读量499 收藏 12
点赞数 9
分类专栏： threejs 文章标签： threejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Pure_White520/article/details/135654647
版权

效果图：
在这里插入图片描述
代码解析：

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - additive animation - skinning</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">
		<style>
			a {
				color: blue;
			}
			.control-inactive button {
				color: #888;
			}
		</style>
	</head>
	<body>
		<div id="container"></div>
		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - Skeletal Additive Animation Blending
			(model from <a href="https://www.mixamo.com/" target="_blank" rel="noopener">mixamo.com</a>)<br/>
		</div>

		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<script type="module">

			import * as THREE from 'three';

			import Stats from 'three/addons/libs/stats.module.js';
			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';  //右上角的前端交互界面
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; 
			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

			let scene, renderer, camera, stats;
			let model, skeleton, mixer, clock;

			const crossFadeControls = [];

			let currentBaseAction = 'idle';
			const allActions = [];
			const baseActions = { //第一个控制面板的值
				idle: { weight: 1 },
				walk: { weight: 0 },
				run: { weight: 0 }
			};
			const additiveActions = {  //添加到右上角交互的选项
				sneak_pose: { weight: 0 },
				sad_pose: { weight: 0 },
				agree: { weight: 0 },
				headShake: { weight: 0 }
			};
			let panelSettings, numAnimations;

			init();

			function init() {

				const container = document.getElementById( 'container' );
				clock = new THREE.Clock();

				scene = new THREE.Scene();
				scene.background = new THREE.Color( 0xa0a0a0 );
				/*
				1. 线性雾，密度随着距离的增加呈线性增长。参数为：雾的颜色，开始的地方，浓度的加深程度。
				scene.fog = new THREE.Fog(0xffffff, 0.015, 100); 

				2.指数雾，密度随距离呈指数级增长。参数为：雾的颜色，浓度
				scene.fog = new THREE. FogExp2 (0xffffff, 0.015);
				*/
				scene.fog = new THREE.Fog( 0xa0a0a0, 10, 50 ); //雾化效果，可以渲染出一层雾气,隐层远处的的物体，

				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x8d8d8d, 3 ); //半球光，从天空到地面两个颜色之间的渐变，与物体材质的颜色作叠加后得到最终的颜色效果。
				hemiLight.position.set( 0, 20, 0 );
				scene.add( hemiLight );

				const dirLight = new THREE.DirectionalLight( 0xffffff, 3 );//方向光,常常用来表现太阳光照的效果。(颜色，强度)
				dirLight.position.set( 3, 10, 10 );
				dirLight.castShadow = true; //此属性设置为 true 灯光将投射阴影，需要通过调整让阴影看起来正确。 （代价比较高）

				// 设置一些shadow属性来正确的显示模型的阴影
				dirLight.shadow.camera.top = 2;
				dirLight.shadow.camera.bottom = - 2;  //.shadow对象，用于计算该平行光产生的阴影
				dirLight.shadow.camera.left = - 2;
				dirLight.shadow.camera.right = 2;
				dirLight.shadow.camera.near = 0.1;
				dirLight.shadow.camera.far = 40;
				scene.add( dirLight );

				// ground

				/*
					PlaneGeometry：生成平面几何体的类
					MeshPhongMaterial：具有镜面高光的光泽表面的材质
				*/
				const mesh = new THREE.Mesh( new THREE.PlaneGeometry( 100, 100 ), new THREE.MeshPhongMaterial( { color: 0xcbcbcb, depthWrite: false } ) );  //生成的是视觉上的地面
				mesh.rotation.x = - Math.PI / 2;  //改变角度
				mesh.receiveShadow = true; //设置接收阴影效果的模型   对应castShadow：产生阴影的模型（该demo中应该让引入的人体模型设置castShadow）
				scene.add( mesh );

				const loader = new GLTFLoader();
				loader.load( 'models/gltf/Xbot.glb', function ( gltf ) { //引入模型

					model = gltf.scene;
					scene.add( model );

					model.traverse( function ( object ) {  //遍历模型所有节点设置可以产生阴影
						if ( object.isMesh ) object.castShadow = true; //可以产生阴影

					} );

					skeleton = new THREE.SkeletonHelper( model ); // SkeletonHelper会可视化参数模型对象所包含的所有骨骼关节,从效果上本demo里面实是骨骼的连接线
					skeleton.visible = false;
					scene.add( skeleton );

					const animations = gltf.animations; //获取动画,模型中带了动画（包括idle、run等，即设定的baseActions）

					console.log(animations,'animations===')
					mixer = new THREE.AnimationMixer( model );//动画帧播放器

					numAnimations = animations.length;

					for ( let i = 0; i !== numAnimations; ++ i ) {

						let clip = animations[ i ]; //遍历模型动画
						const name = clip.name;//动画名称

						if ( baseActions[ name ] ) {
							const action = mixer.clipAction( clip ); //动画对象
							activateAction( action );
							baseActions[ name ].action = action; //baseActions添加上我们模型中的动画
							allActions.push( action );

						} else if ( additiveActions[ name ] ) {//同样的给additiveActions 赋值上动画

							// Make the clip additive and remove the reference frame

							//将给定动画剪辑的关键帧转换为附加格式。
							THREE.AnimationUtils.makeClipAdditive( clip );

							if ( clip.name.endsWith( '_pose' ) ) {
							// subclip：创建一个新的片段，仅包含所给定帧之间的原始剪辑片段。.subclip ( clip : AnimationClip, name : String, startFrame : Number, endFrame : Number, fps : Number ) : AnimationClip
							// 去掉这行，可以看到我们改变Pose的时候任人物一直抖动 应该是从模型中的动画帧中取出了2-3的动画帧（取1-2发现人物是站直没有变化，说明模型给的动画是站直和弯下的连续动画，所以取出弯下的动画帧）
								clip = THREE.AnimationUtils.subclip( clip, clip.name, 2, 3, 30 );

							}

							const action = mixer.clipAction( clip );
							activateAction( action );  //赋值前对动画帧进行处理，设置属性时间等属性
							additiveActions[ name ].action = action;//赋值
							allActions.push( action );

						}

					}

					createPanel(); //创建右上角的控制面板，调试器

					animate(); //动画

				} );

				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.shadowMap.enabled = true; //显示阴影，设置为false，则不显示阴影了
				container.appendChild( renderer.domElement );

				// camera
				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 100 );
				camera.position.set( - 1, 2, 3 );

				const controls = new OrbitControls( camera, renderer.domElement );
				controls.enablePan = false;//禁止右键拖拽
				controls.enableZoom = false;//禁止缩放
				// controls.enableRotate = false; //禁止旋转
				controls.target.set( 0, 1, 0 ); //对应的就是相机的.lookAt()观察目标，
				controls.update(); //相机空间内部会执行camera.lookAt(controls.target)

				stats = new Stats(); //性能监视器，可以看到帧率
				container.appendChild( stats.dom );

				window.addEventListener( 'resize', onWindowResize );

			}

			function createPanel() {

				const panel = new GUI( { width: 310 } );//调试器

				// 创建右上角的调试器分组，可以看到分为三组
				const folder1 = panel.addFolder( 'Base Actions' );  //.addFolder创建一个分组，可以将同一对象的属性创建在同一个分组中
				const folder2 = panel.addFolder( 'Additive Action Weights' );
				const folder3 = panel.addFolder( 'General Speed' );

				panelSettings = {
					'modify time scale': 1.0
				};

				const baseNames = [ 'None', ...Object.keys( baseActions ) ]; 

				for ( let i = 0, l = baseNames.length; i !== l; ++ i ) {

					const name = baseNames[ i ];
					const settings = baseActions[ name ];
					panelSettings[ name ] = function () { //直接设置的动画，所以点击的时候就运行动画了不用监听

						const currentSettings = baseActions[ currentBaseAction ];
						const currentAction = currentSettings ? currentSettings.action : null;
						const action = settings ? settings.action : null;

						if ( currentAction !== action ) {

							prepareCrossFade( currentAction, action, 0.35 ); 

						}

					};

					
					crossFadeControls.push( folder1.add( panelSettings, name ) ); //第一个面板的每个按钮都添加到里面

				}

				for ( const name of Object.keys( additiveActions ) ) {

					const settings = additiveActions[ name ];

					panelSettings[ name ] = settings.weight;
					//添加控制面板，并监听change事件
					folder2.add( panelSettings, name, 0.0, 1.0, 0.01 ).listen().onChange( function ( weight ) {

						setWeight( settings.action, weight );
						settings.weight = weight;

					} );

				}

				folder3.add( panelSettings, 'modify time scale', 0.0, 1.5, 0.01 ).onChange( modifyTimeScale );

				folder1.open();//展开状态
				folder2.open();
				folder3.open();

				crossFadeControls.forEach( function ( control ) {//注：gui控制面板是正常元素，不是canvas

					control.setInactive = function () {  //没选中的元素设置类名

						control.domElement.classList.add( 'control-inactive' );

					};

					control.setActive = function () {//选中的时候移除类名

						control.domElement.classList.remove( 'control-inactive' );

					};

					const settings = baseActions[ control.property ];

					if ( ! settings || ! settings.weight ) {

						control.setInactive();

					}

				} );



			}

			function activateAction( action ) {

				const clip = action.getClip(); //返回存有此动作的动画数据的剪辑
				const settings = baseActions[ clip.name ] || additiveActions[ clip.name ];
				setWeight( action, settings.weight );//给动画设置权重等属性
				action.play();

			}

			function modifyTimeScale( speed ) {

				mixer.timeScale = speed; //时间(time)的比例因子. 值为0时会使动画暂停。值为负数时动画会反向执行。默认值是1。


			}
				/*

				*/
			function prepareCrossFade( startAction, endAction, duration ) {

				// If the current action is 'idle', execute the crossfade immediately;
				// else wait until the current action has finished its current loop
				//如果当前动作为'idle'，立即执行crossfade;
				//否则等待当前动作完成当前循环

				if ( currentBaseAction === 'idle' || ! startAction || ! endAction ) {

					executeCrossFade( startAction, endAction, duration ); //设置淡入淡出效果

				} else {

					synchronizeCrossFade( startAction, endAction, duration );

				}

				// Update control colors

				if ( endAction ) {

					const clip = endAction.getClip();
					currentBaseAction = clip.name;

				} else {

					currentBaseAction = 'None';

				}

				//给第一个控制面板的设置激活状态
				crossFadeControls.forEach( function ( control ) {
					

					const name = control.property;

					if ( name === currentBaseAction ) {

						control.setActive();

					} else {

						control.setInactive();

					}

				} );

			}

			function synchronizeCrossFade( startAction, endAction, duration ) {

				mixer.addEventListener( 'loop', onLoopFinished );//这个动作结束调用onLoopFinished

				function onLoopFinished( event ) {

					if ( event.action === startAction ) {

						mixer.removeEventListener( 'loop', onLoopFinished );

						executeCrossFade( startAction, endAction, duration );

					}

				}

			}

			function executeCrossFade( startAction, endAction, duration ) {

				// Not only the start action, but also the end action must get a weight of 1 before fading
				// (concerning the start action this is already guaranteed in this place)

				if ( endAction ) {

					setWeight( endAction, 1 );
					endAction.time = 0;

					if ( startAction ) {

						// Crossfade with warping
						// 在传入的时间段内，让此动作淡出，同时让另外一个动作淡入
						startAction.crossFadeTo( endAction, duration, true );

					} else {

						// Fade in
					//在传入的时间间隔内，逐渐将此动作的权重（weight）由0升到1。淡入
						endAction.fadeIn( duration );

					}

				} else {

					// Fade out
					//淡出
					startAction.fadeOut( duration );

				}

			}

			// This function is needed, since animationAction.crossFadeTo() disables its start action and sets
			// the start action's timeScale to ((start animation's duration) / (end animation's duration))

			function setWeight( action, weight ) {
				// 相关参数解释地址：http://localhost:8080/docs/?q=setWeight#api/zh/animation/AnimationAction.getEffectiveWeight
				action.enabled = true; //如果改成false 那么我们改变weights可以看到没有变化
				action.setEffectiveTimeScale( 1 ); //设置时间比例
				/*
				如果启用属性（enabled）为true, 那么有效权重(一个内部属性) 也会被设为该值; 否则有效权重 (直接影响当前动画)将会被设为0
				启用值enabled不会被自动改为false。
				enabled：设置为false,会禁用动作，true允许动作
				*/
				action.setEffectiveWeight( weight );//设置权重，权重：动作的影响程度，0-1 可以用来混合多个动作，默认值为1

			}

			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			// 动画
			function animate() {

				// Render loop

				requestAnimationFrame( animate );

				for ( let i = 0; i !== numAnimations; ++ i ) {

					const action = allActions[ i ];
					const clip = action.getClip();
					const settings = baseActions[ clip.name ] || additiveActions[ clip.name ];
					settings.weight = action.getEffectiveWeight();

				}

				// Get the time elapsed since the last frame, used for mixer update

				const mixerUpdateDelta = clock.getDelta();

				// Update the animation mixer, the stats panel, and render this frame

				mixer.update( mixerUpdateDelta );

				stats.update();

				renderer.render( scene, camera );

			}

		</script>

	</body>
</html>
二狗子的翠花
关注
  • 9
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ThreeJs官方案例源码
07-20
ThreeJs官方案例源码
4个threejs实战的demo项目源码
02-17
4个threejs实战的项目-资料来源于网络-不喜勿喷
0基础实现人物看展特效|大帅老猿threejs特训
weixin_39974885的博客
01-04 244
设置阴影体远近大小,不在这个之内的显示不出来。1打开灯光阴影,设置灯光阴影大小。实现角色根据鼠标偏移方向左右偏移。设置mesh投射,接收阴影。渲染器 renderer。打开renderer阴影。2设置灯光阴影贴图大小。几何体geometry。
一个简单的threejs盒剖切功能
最新发布
那个西瓜有点甜
06-09 350
支持六面方向拖拽、反向、切面填充.
threejs官方demo解析（一）
Pure_White520的博客
01-04 930
threejs官网demo--第一个模型demo
最简单的three.js demo
Winne_Shen的专栏
01-07 1913
 文件目录： 代码： main.html ↓ &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;My first three.js app&lt;/title&gt; &lt;style&gt; body { margin: 0; } canvas { width: 100%; height:...
【threejs】初级demo&案例&一些扩展案例
记录
06-08 554
非常基础的无贴图旋转立方体，有完整代码。
threejs-stl-demo:用于显示 STL 3D 模型的演示
05-30
Threejs-stl-演示 用于解析和呈现 STL（ascii 和二进制）文件的纯 Javascript 演示代码。 谢谢 用于通过 Javascript 在 WebGL/Canvas 中渲染 3D 模型的能力 灵感来自 ...Threejs-stl-demo 是在下。
threejs 源码和demo示例
05-06
**Three.js 源码与 Demo 示例详解** Three.js 是一款基于 WebGL 的开源 JavaScript 库，专门用于在 Web 上创建和展示三维图形。这个库以其轻量级、易用性和强大的功能而广受开发者喜爱。它封装了 WebGL 的复杂性，...
threejs-loader-demo-master.zip
12-27
在这个名为"threejs-loader-demo-master.zip"的压缩包中，包含了关于如何使用Three.js加载和操作FBX、OBJ、MTL模型的实例，以及相关的动画处理和鼠标控制功能。本文将深入探讨这些关键知识点。 首先，让我们关注FBX...
Three.js配合Webpack的Demo项目
06-05
"threejs-webpack-demo-master"这个压缩包文件很可能包含了以下组件： 1. `src`目录：存放项目源代码，包括入口文件（如`index.js`）、Three.js的使用示例代码、样式表等。 2. `public`或`dist`目录：编译后的输出...
【3D模型】webGL人体3D动态模型
12-28
很牛的web动态3D人体模型，根据人体走路的特征进行数据分析。官方网址：http://www.biomotionlab.ca/Demos/webgl_walker/
three.js:JavaScript 3D库-开源
05-25
three.js是一个轻量级且易于使用JavaScript 3D库，带有其自己的默认WebGL渲染器。 它通过使用摄像机和几何立方体创建场景来工作，将后者添加到场景中。 这将成为场景中的动画对象。 为场景和摄像机创建了WebGL渲染器，并向document.body元素添加了视口。 最后，立方体在摄像机的场景内进行动画处理。 可以在项目的网站（https://threejs.org/）上找到大量示例，这些示例使用该库还提供的Canvas 2D，SVG和CSS3D渲染器。
three.js仿人行走的动画效果
04-08
利用three导入json模型 饼渲染 加上three自带的动画效果 模拟像人一样走路的动画。
three.js进阶之骨骼绑定
哆啦A瑶的博客
01-03 1553
使用three.js实现骨骼绑定
webgl 基础渲染demo_简化封装threejs，让webgl可视化不再复杂
weixin_39520988的博客
11-24 449
　　在如今互联网爆炸式发展的时候，物联网也是扶摇直上，其中物联网可视化领域也崭露头角，而目前物联网中，threejs也是时下十分火热的一个3D的JavaScript库，在WebGL中文网中的介绍说threejs就是是使用JavaScript来编写3D程序，在webgl中文网中，有着对于threejs的讲解，和教程，当然，threejs官网上也有着十分详细的教程。什么是webgl?WebGL是在浏览...
ThreeJS案例一——在场景中添加视频，使用人物动作以及用键盘控制在场景中行走的动画
NanChen的博客
06-24 2413
首先我们需要两个模型，一个是场景模型，另一个是人物模型。 人物模型我这里用的Threejs官网中的给的模型，名称是。 当然人物模型也可以自己去这个网站下载sketchfab，下载后给模型添加动画mixamo 下载模型动画这里注意一下用Blander软件给模型添加动画的两种方式，具体写法的区别后面会说到方式一：把每个单独的动画拆分出来 方式二：将所用到的动画统一放在一个时间戳中 场景加载完后再放入人物模型： 这里需要将控制器给取消，并且将初始镜头删除，把镜头给到人物模型 到这里模型就全部引入完成 注意：视频无
WebGL 可视化3D绘图框架：Three.js 零基础上手实战
09-15
相对于Flash,Flex，Silverlight等富客户端技术，WebGL之ThreeJS：通过OpenGL ES 2.0，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。这是未来的网游趋势，如果你想做可视化动画三维企业应用，又不想用复杂的C++程序，那么 Three.js 将会是你最好的选择。  本课程主要的功效就是让你学习完本教程后，能够写出在浏览器上流畅运行的3D程序，包括但不限于：大数据可视化，360度全景展示，3D游戏，完成这些事情，会比c++用更少的代码。而且更容易，更酷。 在本课程中，我们将由浅入深的讲解这些效果的实现，这能让你迅速提高开发技能，在职场中处于不败之地。课程共十三章，大大小小贯穿了近10个案例，只要你具备基础的HTML和JavaScript基础即可学习。
THREE--demo12（CSS 3D）
希望我快乐
09-07 263
THREE--demo12（CSS 3D）
threejs官方demo
02-23
Three.js是一个用于创建和展示3D图形的JavaScript库。它提供了丰富的功能和工具，使开发者能够轻松地在Web浏览器中创建交互式的3D场景和动画效果。 Three.js官方网站上提供了许多演示示例，展示了该库的各种功能和效果。以下是一些Three.js官方演示的介绍： 1. WebGL Geometries（WebGL几何体）：展示了如何使用Three.js创建不同类型的几何体，如立方体、球体、圆柱体等，并对其进行变换和操作。 2. Materials（材质）：展示了不同类型的材质效果，如基础材质、光线材质、透明材质等，并演示了如何调整材质的属性和参数。 3. Lights（光源）：展示了不同类型的光源效果，如环境光、点光源、平行光等，并演示了如何调整光源的属性和参数。 4. Animation（动画）：展示了如何使用Three.js创建简单的动画效果，如旋转、缩放、平移等，并演示了如何控制动画的播放和暂停。 5. Post-processing（后期处理）：展示了如何使用Three.js进行后期处理效果，如模糊、色彩调整、辉光等，并演示了如何调整后期处理效果的参数。 以上只是一小部分官方演示示例，你可以在Three.js官方网站上找到更多的演示和示例代码。这些演示可以帮助你了解Three.js的功能和用法，并为你的项目提供灵感和参考。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值