Three.js基础入门介绍——Three.js学习五【让模型沿着轨迹移动】

流程

基本流程

  1. 添加模型
  2. 增加运动轨迹
  3. 让模型沿轨迹运动

工程文件结构如下图：

  • static：存放静态资源文件
  • three.js-master：为官网下载的代码包，包含所有需要用到的资源包，链接：https://github.com/mrdoob/three.js/archive/master.zip
  • index.html：页面代码

在这里插入图片描述
模型使用的是官方示例中的Soldier模型，文件位置：three.js-master\examples\models\gltf\Soldier.glb
为了方便操作我们将文件拷出来放在上图static\3dmod\gltf文件夹下，static与three.js-master同级

index.html单页代码组成:

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>My first three.js app</title>
	<style>
		body {
			margin: 0;
		}
	</style>
</head>

<body>
	<script type="importmap">
			{
				"imports": {
					"three": "./three.js-master/build/three.module.js"
				}
			}
		</script>
	<script type="module">
		// 下文JS代码位置
		// ...
	</script>
</body>

</html>

参照官网例子：https://threejs.org/examples/#webgl_animation_skinning_blending中的场景和模型

搭建场景环境

import * as THREE from "three";
import { OrbitControls } from "./three.js-master/examples/jsm/controls/OrbitControls.js";

let scene, camera, renderer;

// 渲染器开启阴影渲染：renderer.shadowMapEnabled = true;
// 灯光需要开启“引起阴影”：light.castShadow = true;
// 物体需要开启“引起阴影”和“接收阴影”：mesh.castShadow = mesh.receiveShadow = true;

function init() {
	scene = new THREE.Scene();
	camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
	renderer = new THREE.WebGLRenderer();
	// position and point the camera to the center of the scene
	camera.position.set(5, 5, 5);
	camera.lookAt(scene.position);
	
	// 增加坐标系红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴.
	// 添加坐标系到场景中
	const axes = new THREE.AxesHelper(20);
	scene.add(axes);
	
	// 调整背景颜色，边界雾化
	scene.background = new THREE.Color(0xa0a0a0);
	scene.fog = new THREE.Fog(0xa0a0a0, 10, 30);
	
	// 半球形光源
	const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444);
	hemiLight.position.set(0, 10, 0);
	scene.add(hemiLight);
	
	// 创建一个虚拟的球形网格 Mesh 的辅助对象来模拟 半球形光源 HemisphereLight.
	const hemiLighthelper = new THREE.HemisphereLightHelper(hemiLight, 5);
	scene.add(hemiLighthelper);
	
	// 地面
	const mesh = new THREE.Mesh(new THREE.PlaneGeometry(100, 100), new THREE.MeshPhongMaterial({ color: 0x999999, depthWrite: false }));
	mesh.rotation.x = - Math.PI / 2;
	mesh.receiveShadow = true;
	scene.add(mesh);
	
	// 平行光
	const directionalLight = new THREE.DirectionalLight(0xFFFFFF);
	directionalLight.castShadow = true;
	directionalLight.shadow.camera.near = 0.5;
	directionalLight.shadow.camera.far = 50;
	directionalLight.shadow.camera.left = -10;
	directionalLight.shadow.camera.right = 10;
	directionalLight.shadow.camera.top = 10;
	directionalLight.shadow.camera.bottom = -10;
	directionalLight.position.set(0, 5, 5);
	scene.add(directionalLight);
	
	// 用于模拟场景中平行光 DirectionalLight 的辅助对象. 其中包含了表示光位置的平面和表示光方向的线段.
	const directionalLightHelper = new THREE.DirectionalLightHelper(directionalLight, 5);
	scene.add(directionalLightHelper);
	
	renderer.shadowMap.enabled = true;
	renderer.setSize(window.innerWidth, window.innerHeight);
	document.body.appendChild(renderer.domElement);
	
	// 控制器
	const controls = new OrbitControls(camera, renderer.domElement);
}
// 渲染
function animate() {
	requestAnimationFrame(animate);
	renderer.render(scene, camera);
};

这里是添加了几个辅助对象，方便找到光照和场景坐标位置
在这里插入图片描述

添加模型

这里我们直接导入模型，在《Three.js学习四——模型导入》中有相对详细的介绍

let model = null;
function loadModel() {
	// 加载模型并开启阴影和接受阴影
	const gltfLoader = new GLTFLoader();
	gltfLoader.setPath('./static/3dmod/gltf/')
		.load('Soldier.glb', function (gltf) {
			// gltf.scene.rotation.y = Math.PI;
			// console.log("gltf", gltf)
			gltf.scene.scale.set(1, 1, 1)
			gltf.scene.traverse(function (object) {
				if (object.isMesh) {
					object.castShadow = true; //阴影
					object.receiveShadow = true; //接受别人投的阴影
				}
			});
			scene.add(gltf.scene);
			model = gltf.scene;

		}, function (res) {
			// console.log(res.total, res.loaded)
		});
}

增加运动轨迹

用到了Three.js提供的CatmullRomCurve3：使用Catmull-Rom算法， 从一系列的点创建一条平滑的三维样条曲线。

let curve = null;
function makeCurve() {
	//Create a closed wavey loop
	curve = new THREE.CatmullRomCurve3([
		new THREE.Vector3(0, 0, 0),
		new THREE.Vector3(5, 0, 0),
		new THREE.Vector3(0, 0, 5)
	]);
	curve.curveType = "catmullrom";
	curve.closed = true;//设置是否闭环
	curve.tension = 0.5![请添加图片描述](https://img-blog.csdnimg.cn/12a2fa45062d44a58bb7cbf719e4b20f.gif)
; //设置线的张力，0为无弧度折线

	// 为曲线添加材质在场景中显示出来，不显示也不会影响运动轨迹，相当于一个Helper
	const points = curve.getPoints(50);
	const geometry = new THREE.BufferGeometry().setFromPoints(points);
	const material = new THREE.LineBasicMaterial({ color: 0x000000 });

	// Create the final object to add to the scene
	const curveObject = new THREE.Line(geometry, material);
	scene.add(curveObject)
}

让模型沿轨迹运动

let progress = 0; // 物体运动时在运动路径的初始位置，范围0~1
const velocity = 0.001; // 影响运动速率的一个值，范围0~1，需要和渲染频率结合计算才能得到真正的速率
// 物体沿线移动方法
function moveOnCurve() {
	if (curve == null || model == null) {
		console.log("Loading")
	} else {
		if (progress <= 1 - velocity) {
			const point = curve.getPointAt(progress); //获取样条曲线指定点坐标
			const pointBox = curve.getPointAt(progress + velocity); //获取样条曲线指定点坐标

			if (point && pointBox) {
				model.position.set(point.x, point.y, point.z);
				// model.lookAt(pointBox.x, pointBox.y, pointBox.z); //因为这个模型加载进来默认面部是正对Z轴负方向的，所以直接lookAt会导致出现倒着跑的现象，这里用重新设置朝向的方法来解决。

				var targetPos = pointBox   //目标位置点
				var offsetAngle = 0 //目标移动时的朝向偏移

				// //以下代码在多段路径时可重复执行
				var mtx = new THREE.Matrix4()  //创建一个4维矩阵
				// .lookAt ( eye : Vector3, target : Vector3, up : Vector3 ) : this,构造一个旋转矩阵，从eye 指向 target，由向量 up 定向。
				mtx.lookAt(model.position, targetPos, model.up) //设置朝向
				mtx.multiply(new THREE.Matrix4().makeRotationFromEuler(new THREE.Euler(0, offsetAngle, 0)))
				var toRot = new THREE.Quaternion().setFromRotationMatrix(mtx)  //计算出需要进行旋转的四元数值
				model.quaternion.slerp(toRot, 0.2)
			}

			progress += velocity;
		} else {
			progress = 0;
		}
	}

};
// moveOnCurve()需要在渲染中一直调用更新，以达到物体移动效果
function animate() {
	requestAnimationFrame(animate);
	moveOnCurve();
	renderer.render(scene, camera);
};

完整代码和效果

完整代码

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>My first three.js app</title>
	<style>
		body {
			margin: 0;
		}
	</style>
</head>

<body>
	<script type="importmap">
			{
				"imports": {
					"three": "./three.js-master/build/three.module.js"
				}
			}
		</script>
	<script type="module">
		import * as THREE from "three";
		import { OrbitControls } from "./three.js-master/examples/jsm/controls/OrbitControls.js";
		import { GLTFLoader } from "./three.js-master/examples/jsm/loaders/GLTFLoader.js";

		let scene, camera, renderer;
		let curve = null, model = null;
		let progress = 0; // 物体运动时在运动路径的初始位置，范围0~1
		const velocity = 0.001; // 影响运动速率的一个值，范围0~1，需要和渲染频率结合计算才能得到真正的速率

		// 渲染器开启阴影渲染：renderer.shadowMapEnabled = true;
		// 灯光需要开启“引起阴影”：light.castShadow = true;
		// 物体需要开启“引起阴影”和“接收阴影”：mesh.castShadow = mesh.receiveShadow = true;

		function init() {
			scene = new THREE.Scene();
			camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
			renderer = new THREE.WebGLRenderer();
			// position and point the camera to the center of the scene
			camera.position.set(5, 5, 5);
			camera.lookAt(scene.position);

			// 增加坐标系红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴.
			// 添加坐标系到场景中
			const axes = new THREE.AxesHelper(20);
			scene.add(axes);

			// 调整背景颜色，边界雾化
			scene.background = new THREE.Color(0xa0a0a0);
			scene.fog = new THREE.Fog(0xa0a0a0, 10, 30);

			// 半球形光源
			const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444);
			hemiLight.position.set(0, 10, 0);
			scene.add(hemiLight);

			// 创建一个虚拟的球形网格 Mesh 的辅助对象来模拟 半球形光源 HemisphereLight.
			const hemiLighthelper = new THREE.HemisphereLightHelper(hemiLight, 5);
			scene.add(hemiLighthelper);

			// 地面
			const mesh = new THREE.Mesh(new THREE.PlaneGeometry(100, 100), new THREE.MeshPhongMaterial({ color: 0x999999, depthWrite: false }));
			mesh.rotation.x = - Math.PI / 2;
			mesh.receiveShadow = true;
			scene.add(mesh);

			// 平行光
			const directionalLight = new THREE.DirectionalLight(0xFFFFFF);
			directionalLight.castShadow = true;
			directionalLight.shadow.camera.near = 0.5;
			directionalLight.shadow.camera.far = 50;
			directionalLight.shadow.camera.left = -10;
			directionalLight.shadow.camera.right = 10;
			directionalLight.shadow.camera.top = 10;
			directionalLight.shadow.camera.bottom = -10;
			directionalLight.position.set(0, 5, 5);
			scene.add(directionalLight);

			// 用于模拟场景中平行光 DirectionalLight 的辅助对象. 其中包含了表示光位置的平面和表示光方向的线段.
			const directionalLightHelper = new THREE.DirectionalLightHelper(directionalLight, 5);
			scene.add(directionalLightHelper);

			renderer.shadowMap.enabled = true;
			renderer.setSize(window.innerWidth, window.innerHeight);
			document.body.appendChild(renderer.domElement);

			// 控制器
			const controls = new OrbitControls(camera, renderer.domElement);
		}

		function loadModel() {
			// 加载模型并开启阴影和接受阴影
			const gltfLoader = new GLTFLoader();
			gltfLoader.setPath('./static/3dmod/gltf/')
				.load('Soldier.glb', function (gltf) {
					// gltf.scene.rotation.y = Math.PI;
					// console.log("gltf", gltf)
					gltf.scene.scale.set(1, 1, 1)
					gltf.scene.traverse(function (object) {
						if (object.isMesh) {
							object.castShadow = true; //阴影
							object.receiveShadow = true; //接受别人投的阴影
						}
					});
					scene.add(gltf.scene);
					model = gltf.scene;

				}, function (res) {
					// console.log(res.total, res.loaded)
				});

		}

		function makeCurve() {
			//Create a closed wavey loop
			curve = new THREE.CatmullRomCurve3([
				new THREE.Vector3(0, 0, 0),
				new THREE.Vector3(5, 0, 0),
				new THREE.Vector3(0, 0, 5)
			]);
			curve.curveType = "catmullrom";
			curve.closed = true;//设置是否闭环
			curve.tension = 0.5; //设置线的张力，0为无弧度折线

			// 为曲线添加材质在场景中显示出来，不显示也不会影响运动轨迹，相当于一个Helper
			const points = curve.getPoints(50);
			const geometry = new THREE.BufferGeometry().setFromPoints(points);
			const material = new THREE.LineBasicMaterial({ color: 0x000000 });

			// Create the final object to add to the scene
			const curveObject = new THREE.Line(geometry, material);
			scene.add(curveObject)
		}

		// 物体沿线移动方法
		function moveOnCurve() {
			if (curve == null || model == null) {
				console.log("Loading")
			} else {
				if (progress <= 1 - velocity) {
					const point = curve.getPointAt(progress); //获取样条曲线指定点坐标
					const pointBox = curve.getPointAt(progress + velocity); //获取样条曲线指定点坐标

					if (point && pointBox) {
						model.position.set(point.x, point.y, point.z);
						// model.lookAt(pointBox.x, pointBox.y, pointBox.z);//因为这个模型加载进来默认面部是正对Z轴负方向的，所以直接lookAt会导致出现倒着跑的现象，这里用重新设置朝向的方法来解决。

						var targetPos = pointBox   //目标位置点
						var offsetAngle = 0 //目标移动时的朝向偏移

						// //以下代码在多段路径时可重复执行
						var mtx = new THREE.Matrix4()  //创建一个4维矩阵
						// .lookAt ( eye : Vector3, target : Vector3, up : Vector3 ) : this,构造一个旋转矩阵，从eye 指向 target，由向量 up 定向。
						mtx.lookAt(model.position, targetPos, model.up) //设置朝向
						mtx.multiply(new THREE.Matrix4().makeRotationFromEuler(new THREE.Euler(0, offsetAngle, 0)))
						var toRot = new THREE.Quaternion().setFromRotationMatrix(mtx)  //计算出需要进行旋转的四元数值
						model.quaternion.slerp(toRot, 0.2)
					}

					progress += velocity;
				} else {
					progress = 0;
				}
			}

		};

		function animate() {
			requestAnimationFrame(animate);
			moveOnCurve();
			renderer.render(scene, camera);
		};

		init();
		loadModel();
		makeCurve();
		animate();
	</script>
</body>

</html>

效果：
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/304538.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Java异常处理--异常处理概述与常见异常举例

Java异常处理--异常处理概述与常见异常举例

文章目录 一、异常概述1- 什么是生活的异常2- 什么是程序的异常3- 异常的抛出机制4- 如何对待异常 二、Java异常体系1- Throwable2- Error 和 Exception1、Error1.1 介绍1.2 举例 2、Exception2.1 介绍2.2 编译时异常和运行时异常 3- Java异常体系结构1、体系结构2、运行时异常…
阅读更多...
用Python来制作一个微信聊天机器人

用Python来制作一个微信聊天机器人

1. 效果展示 通过本地搭建一个flask服务器来接收信息&#xff0c;这里我简单使用展示&#xff0c;就没有对接收的信息进行处理了。 信息接收展示 发送信息展示 这里就直接使用python发送一个post请求即可&#xff0c;可以发送文字或者图片 代码展示 接收信息 #!/usr/bin/e…
阅读更多...
JAVA：解析Event事件机制与应用举例

JAVA：解析Event事件机制与应用举例

1、简述 Java事件机制是一种基于观察者模式的设计模式&#xff0c;用于处理对象之间的松耦合通信。本篇技术博客将深入探讨Java事件机制的原理&#xff0c;并通过实际应用举例展示如何在项目中灵活利用该机制。 2、基本原理 Java事件机制基于观察者模式&#xff0c;包含以下…
阅读更多...
nacos源码本地调试

nacos源码本地调试

1&#xff1a;源码克隆 github地址&#xff1a;https://github.com/alibaba/nacos.git gitee镜像地址&#xff1a;https://gitee.com/mirrors/Nacos.git 本文通过IntelliJ IDEA 2023.3.2 (Ultimate Edition)构建&#xff0c;nacos版本为2.3.1 2&#xff1a;首先clone 等待…
阅读更多...
作业--day42

作业--day42

界面设计 MyProWin::MyProWin(QWidget *parent): QMainWindow(parent) {/**********窗口主体**********///窗口大小this->setFixedSize(644, 493);this->setWindowTitle("QQ");this->setWindowIcon(QIcon("C:/Users/10988/Downloads/pictrue/pictrue/…
阅读更多...
机器学习指南：如何学习机器学习？

机器学习指南：如何学习机器学习？

机器学习 一、介绍 你有没有想过计算机是如何从数据中学习和变得更聪明的&#xff1f;这就是机器学习 &#xff08;ML&#xff09; 的魔力&#xff01;这就像计算机科学和统计学的酷炫组合&#xff0c;计算机从大量信息中学习以解决问题并做出预测&#xff0c;就像人类一样。 …
阅读更多...
【Java EE初阶九】多线程案例（线程池）

【Java EE初阶九】多线程案例（线程池）

一、线程池的引入 引入池---->主要是为了提高效率&#xff1b; 最开始&#xff0c;进程可以解决并发编程的问题&#xff0c;但是代价有点大了&#xff0c;于是引入了 “轻量级进程” ---->线程 线程也能解决并发编程的问题&#xff0c;而且线程的开销比进程要小的多&…
阅读更多...
分布式I/O应用于智慧停车场的方案介绍

分布式I/O应用于智慧停车场的方案介绍

客户案例背景 目前车位检测技术有磁电技术、超声波技术、红外线技术、图像识别车位技术。考虑到例如电磁干扰、信号干扰等的环境因素影响&#xff0c;通常会采用组合使用的方式进行&#xff0c;如采用不同的传感器、应用不同的协议等&#xff0c;以便提高车位检测的准确性和实时…
阅读更多...
R语言频率分布直方图绘制教程

R语言频率分布直方图绘制教程

本篇笔记分享R语言绘制直方图的方法&#xff0c;通过多种展示风格对数据进行可视化&#xff0c;主要用到ggplot、ggpubr等包。 什么是直方图&#xff1f; 直方图(Histogram)&#xff0c;又称质量分布图&#xff0c;是一种统计报告图&#xff0c;由一系列高度不等的柱子表示数…
阅读更多...
现代 C++ 及 C++ 的演变

现代 C++ 及 C++ 的演变

C 活跃在程序设计领域。该语言写入了许多新项目&#xff0c;而且据 TIOBE 排行榜数据显示&#xff0c;C 的受欢迎度和使用率位居第 4&#xff0c;仅次于 Python、Java 和 C。 尽管 C 在过去二十年里的 TIOBE 排名都位居前列&#xff08;2008 年 2 月排在第 5 名&#xff0c;到…
阅读更多...
从0开始python学习-46.pytest框架之通过yaml处理接口关联问题-针对变量处理

从0开始python学习-46.pytest框架之通过yaml处理接口关联问题-针对变量处理

目录 1. 提取变量 1.1 提取方法 1.2 提取地方&#xff1a;响应的body&#xff0c;响应的cookie&#xff0c;响应头 1.3 提取方式&#xff1a; 1.4 示例&#xff1a;在能获取到对应token的yaml用例中写入 2.使用变量&#xff1a;封装一个通用extract_util.py 3. 调用测试用…
阅读更多...
设计模式之过滤器模式

设计模式之过滤器模式

目录 1.简介 2.过滤器的实现 2.1.过滤器的角色 2.2.类图 2.3.具体实现 3.过滤器模式的优点 4.过滤器模式的不足 5.适用的场景 1.简介 过滤器模式&#xff08;Filter Pattern&#xff09;或标准模式&#xff08;Criteria Pattern&#xff09;是一种结构型设计模式&…
阅读更多...
5.5 THREAD GRANULARITY

5.5 THREAD GRANULARITY

性能调优中一个重要的算法决定是线程的粒度。有时&#xff0c;在每个线程中投入更多工作并使用更少的线程是有利的。当线程之间存在一些冗余工作时&#xff0c;就会产生这种优势。在当前一代设备中&#xff0c;每个SM的指令处理带宽有限。每个指令都消耗指令处理带宽&#xff0…
阅读更多...
迎接人工智能的下一个时代：ChatGPT的技术实现原理、行业实践以及商业变现途径

迎接人工智能的下一个时代：ChatGPT的技术实现原理、行业实践以及商业变现途径

课程背景 2023年&#xff0c;以ChatGPT为代表的接近人类水平的对话机器人&#xff0c;AIGC不断刷爆网络&#xff0c;其强大的内容生成能力给人们带来了巨大的震撼。学术界和产业界也都形成共识&#xff1a;AIGC绝非昙花一现&#xff0c;其底层技术和产业生态已经形成了新的格局…
阅读更多...
【数据结构 | 二叉树入门】

【数据结构 | 二叉树入门】

数据结构 | 二叉树入门 二叉树概念&#xff1a;二叉树特点&#xff1a;二叉树的基本形态特殊二叉树满二叉树完全二叉树 二叉树的存储结构二叉树的遍历先序遍历中序遍历后序遍历 计算二叉树的节点个数计算叶子节点的个数树的高度求第k层节点个数 二叉树概念&#xff1a; 如下图…
阅读更多...
【51单片机】延时函数delay的坑——关于无符号整型数据for语句“x ＞= 0“变成死循环

【51单片机】延时函数delay的坑——关于无符号整型数据for语句“x ＞= 0“变成死循环

请认真看看以下延时函数是否正确&#xff0c;并且指出错误&#xff1a;&#xff08;考考C语言功底&#xff09; void delay_ms(unsigned int xms) //delay x ms {unsigned int x,y;for(xxms;x>0;x--)for(y124;y>0;y--); }废话少说&#xff0c;上正确代码&#xff1a; v…
阅读更多...
python进阶 -- 日志装饰器详解

python进阶 -- 日志装饰器详解

日志 日志&#xff1a;记录程序运行的时候&#xff0c;出现的问题&#xff0c;或者说验证流程是否正常 在实际工作中&#xff0c;python的脚本命令一般是放在服务器执行的linux系统 日志其实就是记录程序运行时出现的问题、或者正常的打印&#xff0c;协助出现问题的时解决排查…
阅读更多...
以太网交换机——稳定安全，构筑数据之桥

以太网交换机——稳定安全，构筑数据之桥

交换机&#xff0c;起源于集线器和网桥等网络通信设备&#xff0c;它在性能和功能上有了很大的发展&#xff0c;因此逐渐成为搭建网络环境的常用的设备。 随着ChatGPT爆发&#xff0c;因为用户量激增而宕机事件频频发生&#xff0c;云计算应用催生超大规模算力需求&#xff0c;…
阅读更多...
kubernetes Namespace Labels 详解

kubernetes Namespace Labels 详解

写在前面&#xff1a;如有问题&#xff0c;以你为准&#xff0c; 目前24年应届生&#xff0c;各位大佬轻喷&#xff0c;部分资料与图片来自网络 内容较长&#xff0c;页面右上角目录方便跳转 namespace 实现资源分组&#xff0c;label实现业务分组 Namespace 基础理论 最重…
阅读更多...
Spring AOP（详解）

Spring AOP（详解）

目录 1.AOP概述 2.AOP相关术语 3.Spring AOP的原理机制 3.1JDK动态代理 3.2 CGLIB动态代理 3.3简单代码展示 3.3.1JDK动态代理 3.3.2CGLIB动态代理 4.Spring的AOP配置 4.1pom.xml 4.2增强方法 4.3切点 4.4切面 5.基于注解的AOP配置 5.1.创建工程 5.2.增强 5.3AOP…
阅读更多...
最新文章

Copyright @ 2022~2023