如何使用three.js集成令人羡慕的局部坐标系

如何使用three.js集成令人羡慕的局部坐标系

  • 示例
  • 官方源码
  • 阅读源码
  • 剥离源码中的功能
    • 分析...
  • 检查自己到底学会了没有,最简单的办法就是看你能不自己写出一个新的例子!!!
  • 最后,谈谈如何找到官方例子的源码?

示例

在这里插入图片描述

官方源码

https://github.com/mrdoob/three.js/blob/dev/examples/webgl_geometry_spline_editor.html

  • 使用源码的方法:
    直接将源码copy到项目中的htmldoge,然后如果你用了react框架,你要把App.jsx文件恢复到原来的样子
  • 项目的业务
    你把鼠标悬停在上面,坐标系就出来了,
    坐标系出来后,你才可以移动他,
    他并不是靠鼠标点击来实现的

阅读源码

(假设你是第一次接触前端代码,没错,我也是一次,so,作为一个对前端一无所知的萌新,接下来让我们一起来剖析官方的源代码,如果我们可以搞懂这问题,那这对于前端版本的opengl来说,你对模型与鼠标交互的理解,将大幅度提升,而且我想这段代码应该也是可以复用的,俗话说:“知道如何写代码值1分钱”,“知道把别人的某一部分代码放到自己几万行的屎山代码中,值百万dollars”.[doge])

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - geometry - catmull spline editor</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>
			body {
				background-color: #f0f0f0;
				color: #444;
			}
			a {
				color: #08f;
			}
		</style>
	</head>
	<body>

		<div id="container"></div>
		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - geometry - catmull spline editor
		</div>

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

		<script type="module">

			import * as THREE from 'three';

			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			import { TransformControls } from 'three/addons/controls/TransformControls.js';

			let container;
			let camera, scene, renderer;
			const splineHelperObjects = [];
			let splinePointsLength = 4;
			const positions = [];
			const point = new THREE.Vector3();

			const raycaster = new THREE.Raycaster();
			const pointer = new THREE.Vector2();
			const onUpPosition = new THREE.Vector2();
			const onDownPosition = new THREE.Vector2();

			const geometry = new THREE.BoxGeometry( 20, 20, 20 );
			let transformControl;

			const ARC_SEGMENTS = 200;

			const splines = {};

			const params = {
				uniform: true,
				tension: 0.5,
				centripetal: true,
				chordal: true,
				addPoint: addPoint,
				removePoint: removePoint,
				exportSpline: exportSpline
			};

			init();

			function init() {

				container = document.getElementById( 'container' );

				scene = new THREE.Scene();
				scene.background = new THREE.Color( 0xf0f0f0 );

				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
				camera.position.set( 0, 250, 1000 );
				scene.add( camera );

				scene.add( new THREE.AmbientLight( 0xf0f0f0, 3 ) );
				const light = new THREE.SpotLight( 0xffffff, 4.5 );
				light.position.set( 0, 1500, 200 );
				light.angle = Math.PI * 0.2;
				light.decay = 0;
				light.castShadow = true;
				light.shadow.camera.near = 200;
				light.shadow.camera.far = 2000;
				light.shadow.bias = - 0.000222;
				light.shadow.mapSize.width = 1024;
				light.shadow.mapSize.height = 1024;
				scene.add( light );

				const planeGeometry = new THREE.PlaneGeometry( 2000, 2000 );
				planeGeometry.rotateX( - Math.PI / 2 );
				const planeMaterial = new THREE.ShadowMaterial( { color: 0x000000, opacity: 0.2 } );

				const plane = new THREE.Mesh( planeGeometry, planeMaterial );
				plane.position.y = - 200;
				plane.receiveShadow = true;
				scene.add( plane );

				const helper = new THREE.GridHelper( 2000, 100 );
				helper.position.y = - 199;
				helper.material.opacity = 0.25;
				helper.material.transparent = true;
				scene.add( helper );

				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.shadowMap.enabled = true;
				container.appendChild( renderer.domElement );

				const gui = new GUI();

				gui.add( params, 'uniform' ).onChange( render );
				gui.add( params, 'tension', 0, 1 ).step( 0.01 ).onChange( function ( value ) {

					splines.uniform.tension = value;
					updateSplineOutline();
					render();

				} );
				gui.add( params, 'centripetal' ).onChange( render );
				gui.add( params, 'chordal' ).onChange( render );
				gui.add( params, 'addPoint' );
				gui.add( params, 'removePoint' );
				gui.add( params, 'exportSpline' );
				gui.open();

				// Controls
				const controls = new OrbitControls( camera, renderer.domElement );
				controls.damping = 0.2;
				controls.addEventListener( 'change', render );

				transformControl = new TransformControls( camera, renderer.domElement );
				transformControl.addEventListener( 'change', render );
				transformControl.addEventListener( 'dragging-changed', function ( event ) {

					controls.enabled = ! event.value;

				} );
				scene.add( transformControl );

				transformControl.addEventListener( 'objectChange', function () {

					updateSplineOutline();

				} );

				document.addEventListener( 'pointerdown', onPointerDown );
				document.addEventListener( 'pointerup', onPointerUp );
				document.addEventListener( 'pointermove', onPointerMove );
				window.addEventListener( 'resize', onWindowResize );

				/*******
				 * Curves
				 *********/

				for ( let i = 0; i < splinePointsLength; i ++ ) {

					addSplineObject( positions[ i ] );

				}

				positions.length = 0;

				for ( let i = 0; i < splinePointsLength; i ++ ) {

					positions.push( splineHelperObjects[ i ].position );

				}

				const geometry = new THREE.BufferGeometry();
				geometry.setAttribute( 'position', new THREE.BufferAttribute( new Float32Array( ARC_SEGMENTS * 3 ), 3 ) );

				let curve = new THREE.CatmullRomCurve3( positions );
				curve.curveType = 'catmullrom';
				curve.mesh = new THREE.Line( geometry.clone(), new THREE.LineBasicMaterial( {
					color: 0xff0000,
					opacity: 0.35
				} ) );
				curve.mesh.castShadow = true;
				splines.uniform = curve;

				curve = new THREE.CatmullRomCurve3( positions );
				curve.curveType = 'centripetal';
				curve.mesh = new THREE.Line( geometry.clone(), new THREE.LineBasicMaterial( {
					color: 0x00ff00,
					opacity: 0.35
				} ) );
				curve.mesh.castShadow = true;
				splines.centripetal = curve;

				curve = new THREE.CatmullRomCurve3( positions );
				curve.curveType = 'chordal';
				curve.mesh = new THREE.Line( geometry.clone(), new THREE.LineBasicMaterial( {
					color: 0x0000ff,
					opacity: 0.35
				} ) );
				curve.mesh.castShadow = true;
				splines.chordal = curve;

				for ( const k in splines ) {

					const spline = splines[ k ];
					scene.add( spline.mesh );

				}

				load( [ new THREE.Vector3( 289.76843686945404, 452.51481137238443, 56.10018915737797 ),
					new THREE.Vector3( - 53.56300074753207, 171.49711742836848, - 14.495472686253045 ),
					new THREE.Vector3( - 91.40118730204415, 176.4306956436485, - 6.958271935582161 ),
					new THREE.Vector3( - 383.785318791128, 491.1365363371675, 47.869296953772746 ) ] );

				render();

			}

			function addSplineObject( position ) {

				const material = new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } );
				const object = new THREE.Mesh( geometry, material );

				if ( position ) {

					object.position.copy( position );

				} else {

					object.position.x = Math.random() * 1000 - 500;
					object.position.y = Math.random() * 600;
					object.position.z = Math.random() * 800 - 400;

				}

				object.castShadow = true;
				object.receiveShadow = true;
				scene.add( object );
				splineHelperObjects.push( object );
				return object;

			}

			function addPoint() {

				splinePointsLength ++;

				positions.push( addSplineObject().position );

				updateSplineOutline();

				render();

			}

			function removePoint() {

				if ( splinePointsLength <= 4 ) {

					return;

				}

				const point = splineHelperObjects.pop();
				splinePointsLength --;
				positions.pop();

				if ( transformControl.object === point ) transformControl.detach();
				scene.remove( point );

				updateSplineOutline();

				render();

			}

			function updateSplineOutline() {

				for ( const k in splines ) {

					const spline = splines[ k ];

					const splineMesh = spline.mesh;
					const position = splineMesh.geometry.attributes.position;

					for ( let i = 0; i < ARC_SEGMENTS; i ++ ) {

						const t = i / ( ARC_SEGMENTS - 1 );
						spline.getPoint( t, point );
						position.setXYZ( i, point.x, point.y, point.z );

					}

					position.needsUpdate = true;

				}

			}

			function exportSpline() {

				const strplace = [];

				for ( let i = 0; i < splinePointsLength; i ++ ) {

					const p = splineHelperObjects[ i ].position;
					strplace.push( `new THREE.Vector3(${p.x}, ${p.y}, ${p.z})` );

				}

				console.log( strplace.join( ',
' ) );
				const code = '[' + ( strplace.join( ',
	' ) ) + ']';
				prompt( 'copy and paste code', code );

			}

			function load( new_positions ) {

				while ( new_positions.length > positions.length ) {

					addPoint();

				}

				while ( new_positions.length < positions.length ) {

					removePoint();

				}

				for ( let i = 0; i < positions.length; i ++ ) {

					positions[ i ].copy( new_positions[ i ] );

				}

				updateSplineOutline();

			}

			function render() {

				splines.uniform.mesh.visible = params.uniform;
				splines.centripetal.mesh.visible = params.centripetal;
				splines.chordal.mesh.visible = params.chordal;
				renderer.render( scene, camera );

			}

			function onPointerDown( event ) {

				onDownPosition.x = event.clientX;
				onDownPosition.y = event.clientY;

			}

			function onPointerUp( event ) {

				onUpPosition.x = event.clientX;
				onUpPosition.y = event.clientY;

				if ( onDownPosition.distanceTo( onUpPosition ) === 0 ) {

					transformControl.detach();
					render();

				}

			}

			function onPointerMove( event ) {

				pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1;
				pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

				raycaster.setFromCamera( pointer, camera );

				const intersects = raycaster.intersectObjects( splineHelperObjects, false );

				if ( intersects.length > 0 ) {

					const object = intersects[ 0 ].object;

					if ( object !== transformControl.object ) {

						transformControl.attach( object );

					}

				}

			}

			function onWindowResize() {

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

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

				render();

			}

		</script>

	</body>
</html>
  • 总体分析:(作为一个萌新,我们肯定是逐行的分析喽!)
    此代码是一个完整的HTML文档，其中嵌入了JavaScript，使用Three.js创建基于Web的Catmull-Rom样条编辑器。我们一节一节来分析。
    Catmull-Rom是样条曲线的意思,啥是样条曲线?大家可以看我的上一篇文章,有写到.
  • HTML Structure(结构)
  1. DOCTYPE、html、head和body标签：标准HTML结构。(这个没问题,就算是萌新,这个应该是知道的)
  2. 标题标签：设置网页的标题。
    <title>three.js webgl - geometry - catmull spline editor</title>
  3. Meta Tags：字符集用于字符编码，视口设置用于响应。
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  4. 链接标记：包含外部CSS文件“main.css”。
    <link type="text/css" rel="stylesheet" href="main.css">
  5. 样式标记：设置正文的背景颜色和字体颜色，以及样式锚标记。(其实,4和5可以放在一起的,当然分开更加清晰明了)
<style>
    body {
      background-color: #f0f0f0;
      color: #444;
    }

    a {
      color: #08f;
    }
  </style>
  1. Div标签：两个div，'container’用于3D场景，'info’用于信息和Three.js网站链接。
<div id="container"></div>
<div id="info">
  <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - geometry - catmull spline editor
</div>

这里有一个小技巧,我也是刚知道的:你在div中标好了之后,你可以在js的部分添加交互,比如说container标签(info咱就不讲了,其实就是点击后跳转到three.js官方的页面):

var container = document.getElementById('container');
//通过container拿到这个标签,然后你就可用使用`var container`这个变量了!!!

至此,相信很多萌新已经对前端的html与css有所了解了!!!(因为我们已经将这个项目的html和css讲完了!!!)

  • JavaScript（Three.js）实现

  1. Script for Import Map(导入映射脚本): 定义模块导入的路径，为Three.js模块设置基本路径。

  2. Import Statements(导入语句): 从Three.js导入必要的模块，包括核心库、GUI库、OrbitControls和TransformControls。(其实7和8是一样的,都是import引入我们需要的东西)

  3. 再然后,它在最开始的位置定义了一堆变量,这是一个很好的习惯,然后经常学习js的萌新都知道,js的变量可以到处定义,然后全局使用(var是这样的,let不太清楚)
    在这里插入图片描述

    • 初始化函数
  1. 场景设置: 创建场景(scene)、摄影机(camera)和光源l(ighting)。添加环境光(ambient light) 和聚光灯(spotlight)。
  2. Plane and Helper Objects: Adds a plane and a grid helper to the scene for reference.平面和辅助对象：将平面和栅格辅助对象添加到场景中以供参考。
	//1.平面几何体
	const planeGeometry = new THREE.PlaneGeometry(2000, 2000);
	planeGeometry.rotateX(- Math.PI / 2);
	//2.平面材料
	//ShadowMaterial是一种极为特殊的材质,它只会显示阴影而不显示材质本身!!!
	const planeMaterial = new THREE.ShadowMaterial({ color: 0x000000, opacity: 0.2 });
	//3.平面网格 = 平面几何体 + 平面材质
	const plane = new THREE.Mesh(planeGeometry, planeMaterial);
	plane.position.y = - 200;
	plane.receiveShadow = true;
	scene.add(plane);
	
	//3.GridHelper
	const helper = new THREE.GridHelper(2000, 100);
	helper.position.y = - 199;
	helper.material.opacity = 0.25;
	helper.material.transparent = true;
	scene.add(helper);

在这里插入图片描述
在这里插入图片描述
3) Renderer Configuration: Sets up the WebGL renderer with antialiasing and shadow mapping.渲染器配置：设置WebGL渲染器的抗锯齿和阴影映射。

renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
container.appendChild(renderer.domElement);
  1. GUI Controls: Adds GUI controls for various spline parameters and actions.
    GUI控件：为各种样条曲线参数和动作添加GUI控件。
const gui = new GUI();
gui.add(params, 'uniform').onChange(render);
gui.add(params, 'tension', 0, 1).step(0.01).onChange(function (value) {

splines.uniform.tension = value;
updateSplineOutline();
render();

});
gui.add(params, 'centripetal').onChange(render);
gui.add(params, 'chordal').onChange(render);
gui.add(params, 'addPoint');
gui.add(params, 'removePoint');
gui.add(params, 'exportSpline');
gui.open();
  1. Orbit and Transform Controls: Implements camera orbit controls and object transform controls.
    动态观察和变换控制：实现相机动态观察控制和对象变换控制。
// Controls
const controls = new OrbitControls(camera, renderer.domElement);
controls.damping = 0.2;
controls.addEventListener('change', render);

transformControl = new TransformControls(camera, renderer.domElement);
transformControl.addEventListener('change', render);
transformControl.addEventListener('dragging-changed', function (event) {
   controls.enabled = !event.value;
});
scene.add(transformControl);

transformControl.addEventListener('objectChange', function () {
   updateSplineOutline();
});

document.addEventListener('pointerdown', onPointerDown);
document.addEventListener('pointerup', onPointerUp);
document.addEventListener('pointermove', onPointerMove);
window.addEventListener('resize', onWindowResize);
  • Spline Object Management(样条线对象管理)
    1. Spline Helper Objects: Manages an array of objects that act as control points for the spline.样条线辅助对象：管理用作样条线控制点的对象数组。
    2. Spline Geometry and Curves: Sets up the spline geometry and three types of Catmull-Rom curves (uniform, centripetal, chordal).样条曲线几何体和曲线：设置样条曲线几何体和三种类型的Catmull-Rom曲线（均匀、向心、弦）。
    3. Load Function: A function to load new positions into the spline editor.加载函数：将新位置加载到样条曲线编辑器中的函数。
  • Rendering and Interaction(渲染和交互)
  1. Render Function: A function that updates the visibility of splines and renders the scene.(渲染函数：更新样条线的可见性并渲染场景的函数。)
  2. Event Listeners: For pointer and window resize events to handle user interaction and responsive behavior.(事件监听器：用于指针和窗口调整大小事件，以处理用户交互和响应行为。)
  • Spline Manipulation(样条线操作)
    1)Add/Remove Points: Functions to add or remove points from the spline.(添加/删除点：从样条曲线添加或删除点的功能。)
    2)Update Spline Outline: Updates the spline visualization when the control points are moved.(更新样条曲线轮廓：移动控制点时更新样条曲线可视化。)
    3)Export Spline Function: Exports the current spline configuration as a formatted string.(导出样条函数：将当前样条配置导出为格式化字符串。)

剥离源码中的功能

其中最重要的功能是:鼠标悬停在模型上(不需要点击),坐标系就会出现该模型上,然后你的鼠标离开模型后,坐标系依旧不会消失,除非你的鼠标悬停在另一个模型上时,坐标系才会出现在新悬停模型上的位置;然后鼠标点击空白的位置,坐标系就会消失,这个功能如何实现?
在这里插入图片描述

分析…

  • onPointerMove其实就是mousemove,即鼠标移动事件
  • onPointerDown其实就是mousedown,即鼠标按下事件
  • onPointerUp其实就是mouseup,即鼠标抬起事件
  • 当鼠标移动到模型上会执行render函数,所以我们重点来看这个函数
function render() {
  splines.uniform.mesh.visible = params.uniform;
  splines.centripetal.mesh.visible = params.centripetal;
  splines.chordal.mesh.visible = params.chordal;
  renderer.render(scene, camera);
}

在这里插入图片描述
1)uniform: true 表示 红色的那条线的可见性
2)centripetal:true 表示 绿色的那条线的可见性
2)chordal:true 表示 蓝色的那条线的可见性

so,这个render()函数只是设置了这三条曲线的可见性,并不是我们寻找的鼠标悬停出现坐标系的功能,不过我们再次缩短了搜索的范围:大概率是在onPointerMove(鼠标移动事件)里面.

  • 具体看onPointerMove函数:
function onPointerMove(event) {
  pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
  pointer.y = - (event.clientY / window.innerHeight) * 2 + 1;
  raycaster.setFromCamera(pointer, camera);
  const intersects = raycaster.intersectObjects(splineHelperObjects, false);
  if (intersects.length > 0) {
    const object = intersects[0].object;
    if (object !== transformControl.object) {
      transformControl.attach(object);
    }
  }
}

这个代码非常少!
1)首先,

//这是客户端坐标转化为设备坐标
pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
pointer.y = - (event.clientY / window.innerHeight) * 2 + 1;

具体的,这两行代码是客户端坐标(event.clientX和event.clientY)转换为在three.js场景中的坐标(pointer.x和pointer.y)。
首先，代码通过将鼠标事件的客户端x坐标(event.clientX)除以窗口的宽度(window.innerWidth)来得到一个比例值。然后，将该比例值乘以2并减去1，得到了在-1到1之间的范围内的x坐标。这是因为three.js使用的是标准化设备坐标(NDC)，其中屏幕的左侧为-1，右侧为1。
类似地，代码通过将鼠标事件的客户端y坐标(event.clientY)除以窗口的高度(window.innerHeight)来得到一个比例值。然后，将该比例值乘以-2并加上1，得到了在-1到1之间的范围内的y坐标。这里乘以-2是因为three.js的NDC中屏幕的顶部为1，底部为-1。

2)其次,是射线捕捉的部分:

raycaster.setFromCamera(pointer, camera);
const intersects = raycaster.intersectObjects(splineHelperObjects, false);

这段代码是在three.js中进行射线投射的操作。
首先，代码使用之前计算得到的pointer对象作为参数，调用raycaster.setFromCamera()方法来将射线的起点设置为相机(camera)的位置，以及将射线的方向设置为相机指向的方向。
然后，代码使用raycaster.intersectObjects()方法来检测射线与指定对象数组(splineHelperObjects)中的物体是否相交。射线与物体的相交检测是通过使用八叉树或包围盒等算法进行高效的碰撞检测实现的。
最后，代码将射线与物体的==相交结果(intersects)==存储在一个数组中。这个数组包含了每个相交物体的信息，例如相交点的位置、相交物体的引用等。

至于那个false参数，它是用来表示是否只检测物体的外层表面。当设为true时，只会检测物体的外层表面；当设为false时，会检测物体的所有部分（包括内部）。在这段代码中，将其设为false，表示需要检测所有部分。

需要注意的是，射线投射操作是three.js中非常常见和重要的一部分，它可以用于实现鼠标拾取、物体交互、碰撞检测等功能。

在这里,我们非常有必要了解一下,splineHelperObjects数组都有什么:

const splineHelperObjects = [];

//数组有四个元素,都是正方形,如下`BoxGeometry`,是一个正方体
const geometry = new THREE.BoxGeometry(40, 40, 40);

此时,真像大白,其实射线检测的对象就是4个正方体
在这里插入图片描述
3)最后,判断检查射线射的结果:

if (intersects.length > 0) {
  const object = intersects[0].object;
  if (object !== transformControl.object) {
    transformControl.attach(object);
  }
}
  1. if (intersects.length > 0) { … }
    这个条件判断是检查intersects数组是否包含至少一个元素。intersects是由射线投射函数raycaster.intersectObjects()返回的数组，包含所有被射线投射到的物体。如果长度大于0，意味着至少有一个物体被射中。
  2. const object = intersects[0].object;
    这一行从intersects数组中取出第一个相交的对象，即数组中的第一个元素。通常，在射线投射操作中，数组是按照射线起点到物体的距离排序的，所以索引为0的元素表示最近的物体，也就是射线首先相交的物体。
  3. if (object != transformControl.object) { … }
    这个条件判断检查当前射线投射到的物体(object)是不是transformControl所附着的物体(transformControl.object)。transformControl是一个工具，用于移动、旋转或缩放场景中的物体。这个条件确保了我们不会重复附着同一个物体到transformControl上。

4)好了,终于找到了!=>transformControl !!! 哇!真的是你呀!
首先,你想让transformControl 附在哪里,你就直接transformControl.attach(object);,attach到你想要附着的对象上,好了,能看到这里的这里的观众朋友们,一定是真爱粉!哇!真的是你呀!
下面的就是可以到处复用了!!!

let transformControl;
transformControl = new TransformControls(camera, renderer.domElement);
transformControl.addEventListener('change', render);
transformControl.addEventListener('dragging-changed', function (event) {
  controls.enabled = !event.value;
});
scene.add(transformControl);


//下面这个没啥用,指的是模型改变的同时,也把模型连接的线也跟着变(这不是我们想要研究的,pass)
transformControl.addEventListener('objectChange', function () {
  updateSplineOutline();
});

function onPointerDown(event) {
  console.log('onPointerDown');
  onDownPosition.x = event.clientX;
  onDownPosition.y = event.clientY;

}

function onPointerUp(event) {
  console.log('onPointerUp');
  onUpPosition.x = event.clientX;
  onUpPosition.y = event.clientY;

  if (onDownPosition.distanceTo(onUpPosition) === 0) {
    console.log("if (onDownPosition.distanceTo(onUpPosition) === 0) {");
    transformControl.detach();
    render();
  }
}

这一点太巧妙了!!!
if (onDownPosition.distanceTo(onUpPosition) === 0) { … }
这个条件判断用于检查鼠标按下和松开的位置是否相同。通过计算onDownPosition和onUpPosition两个位置之间的距离，如果距离等于0，表示鼠标在按下和松开之间没有移动。

transformControl.detach();
这行代码用于将当前附着在transformControl上的物体解除附着。也就是说，如果鼠标在按下和松开之间没有移动，那么解除当前被控制的物体，停止对其的移动、旋转或缩放等操作。

检查自己到底学会了没有,最简单的办法就是看你能不自己写出一个新的例子!!!

下面是我自己写的:



最后,谈谈如何找到官方例子的源码?


 
 


在这里插入图片描述


在这里插入图片描述
 在这里插入图片描述