当前位置： 首页 > news >正文

Threejs 设置灯光照射点位置 辅助器不跟随移动

news 2025/8/13 15:22:19
介绍
  • 场景选点后，灯光移动了，但是开启辅助器时，辅助器是不会跟随移动的，总是移动到上一次选中的位置！官网上没有相应的解释，此时就需要查看源码，再根据源码编写功能代码啦！
  • 主要是聚光灯、平行光以及环境光的灯光辅助器不能跟随变动！
  • 每次修改灯光相关参数时，记得helper.update()！
详情

SpotLightHelper 源码如下：
- 通过设置断点，更新灯光时，调用灯光update方法，此时 line49 仍然会保留上一次的位置，所以此时需要重新改写一下灯光辅助器骨架的位置 this.cone.lookAt(position)；
- position 为 Vector3 类型；

/*** @author alteredq / http://alteredqualia.com/* @author mrdoob / http://mrdoob.com/* @author WestLangley / http://github.com/WestLangley*/1. import { Vector3 } from '../math/Vector3.js';
2. import { Object3D } from '../core/Object3D.js';
3. import { LineSegments } from '../objects/LineSegments.js';
4. import { LineBasicMaterial } from '../materials/LineBasicMaterial.js';
5. import { Float32BufferAttribute } from '../core/BufferAttribute.js';
6. import { BufferGeometry } from '../core/BufferGeometry.js';
7. var _vector = new Vector3();
8. function SpotLightHelper( light, color ) {
9. 		Object3D.call( this );
10. 	this.light = light;
11. 	this.light.updateMatrixWorld();
12. 	this.matrix = light.matrixWorld;
13. 	this.matrixAutoUpdate = false;
14. 	this.color = color;
15. 	var geometry = new BufferGeometry();
16. 	var positions = [
17. 		0, 0, 0, 	0, 0, 1,
18. 		0, 0, 0, 	1, 0, 1,
19. 		0, 0, 0,	- 1, 0, 1,
20. 		0, 0, 0, 	0, 1, 1,
21. 		0, 0, 0, 	0, - 1, 1
22. 	];
23. 	for ( var i = 0, j = 1, l = 32; i < l; i ++, j ++ ) {
24. 		var p1 = ( i / l ) * Math.PI * 2;
25. 		var p2 = ( j / l ) * Math.PI * 2;
26. 		positions.push(
27. 			Math.cos( p1 ), Math.sin( p1 ), 1,
28. 			Math.cos( p2 ), Math.sin( p2 ), 1
29. 		);
30. 	}
31. 	geometry.addAttribute( 'position', new Float32BufferAttribute( positions, 3 ) );
32. 	var material = new LineBasicMaterial( { fog: false } );
33. 	this.cone = new LineSegments( geometry, material );
34. 	this.add( this.cone );
35. 	this.update();
36. }
37. SpotLightHelper.prototype = Object.create( Object3D.prototype );
38. SpotLightHelper.prototype.constructor = SpotLightHelper; 
39. SpotLightHelper.prototype.dispose = function () {
40. 	this.cone.geometry.dispose();
41. 	this.cone.material.dispose();
42. };
43. SpotLightHelper.prototype.update = function () {
44. 	this.light.updateMatrixWorld();
45. 	var coneLength = this.light.distance ? this.light.distance : 1000;
46. 	var coneWidth = coneLength * Math.tan( this.light.angle );
47. 	this.cone.scale.set( coneWidth, coneWidth, coneLength );
48. 	_vector.setFromMatrixPosition( this.light.target.matrixWorld );
49. 	this.cone.lookAt( _vector ); // 重要点
50. 	if ( this.color !== undefined ) {
51. 		this.cone.material.color.set( this.color );
52.		} else {
53. 		this.cone.material.color.copy( this.light.color );
54. 	}
55. };
56. export { SpotLightHelper };

DirectionalLightHelper 源码如下：
- 通过设置断点，更新灯光时，调用灯光update方法，此时 灯光辅助器 会停留上一次的位置，所以此时需要重新改写一下灯光辅助器骨架的位置 line 13、 line 44-47、 line55-56，都需要重新调用或设置；

 light.updateMatrixWorld();let targetPosition = light.target.position;let lightPosoition = light.position;let subPosition = new THREE.Vector3();subPosition.subVectors(targetPosition, lightPosoition); // 获取灯光与位置之间的差helper.lightPlane.lookAt(targetPosition);helper.targetLine.lookAt(targetPosition);helper.targetLine.scale.z = subPosition.length();

/*** @author alteredq / http://alteredqualia.com/* @author mrdoob / http://mrdoob.com/* @author WestLangley / http://github.com/WestLangley*/
1. import { Vector3 } from '../math/Vector3.js';
2. import { Object3D } from '../core/Object3D.js';
3. import { Line } from '../objects/Line.js';
4. import { Float32BufferAttribute } from '../core/BufferAttribute.js';
5. import { BufferGeometry } from '../core/BufferGeometry.js';
6. import { LineBasicMaterial } from '../materials/LineBasicMaterial.js';
7. var _v1 = new Vector3();
8. var _v2 = new Vector3();
9. var _v3 = new Vector3();
10. function DirectionalLightHelper( light, size, color ) {
11.		Object3D.call( this );
12.		this.light = light;
13.		this.light.updateMatrixWorld(); // 重要点
14.		this.matrix = light.matrixWorld;
15.		this.matrixAutoUpdate = false;
16.		this.color = color;
17.		if ( size === undefined ) size = 1;
18.		var geometry = new BufferGeometry();
19.		geometry.addAttribute( 'position', new Float32BufferAttribute( [
20.			- size, size, 0,
21.			size, size, 0,
22.			size, - size, 0,
23.			- size, - size, 0,
24.			- size, size, 0
25.		], 3 ) );
26.		var material = new LineBasicMaterial( { fog: false } );
27.		this.lightPlane = new Line( geometry, material );
28.		this.add( this.lightPlane );
29.		geometry = new BufferGeometry();
30.		geometry.addAttribute( 'position', new Float32BufferAttribute( [ 0, 0, 0, 0, 0, 1 ], 3 ) );
31.		this.targetLine = new Line( geometry, material );
32.		this.add( this.targetLine );
33.		this.update();
34.	}
35.	DirectionalLightHelper.prototype = Object.create( Object3D.prototype );
36.	DirectionalLightHelper.prototype.constructor = DirectionalLightHelper;
37.	DirectionalLightHelper.prototype.dispose = function () {
38.		this.lightPlane.geometry.dispose();
39.		this.lightPlane.material.dispose();
40.		this.targetLine.geometry.dispose();
41.		this.targetLine.material.dispose();
42.	};
43.	DirectionalLightHelper.prototype.update = function () {
44.		_v1.setFromMatrixPosition( this.light.matrixWorld ); // 重要点
45.		_v2.setFromMatrixPosition( this.light.target.matrixWorld ); // 重要点
46.		_v3.subVectors( _v2, _v1 ); // 重要点
47.		this.lightPlane.lookAt( _v2 ); // 重要点
48.		if ( this.color !== undefined ) {
49.			this.lightPlane.material.color.set( this.color );
50.			this.targetLine.material.color.set( this.color );
51.		} else {
52.			this.lightPlane.material.color.copy( this.light.color );
53.			this.targetLine.material.color.copy( this.light.color );
54.		}
55.		this.targetLine.lookAt( _v2 ); // 重要点
56.		this.targetLine.scale.z = _v3.length(); // 重要点
57.	};
58. export { DirectionalLightHelper };

DirectionalLightHelper 源码如下：
- 通过设置断点，更新灯光时，调用灯光update方法，此时 灯光辅助器 会停留上一次的位置，所以此时需要重新改写一下灯光辅助器骨架的位置 line 15-16、 line 49 需要重新调用或设置；

light.updateMatrixWorld();
helper.matrix = light.matrixWorld;
let subPosition = new THREE.Vector3();
helper.children[0].lookAt(subPosition.setFromMatrixPosition(light.matrixWorld).negate());

/*** @author alteredq / http://alteredqualia.com/* @author mrdoob / http://mrdoob.com/* @author Mugen87 / https://github.com/Mugen87*/
1. import { Vector3 } from '../math/Vector3.js';
2. import { Color } from '../math/Color.js';
3. import { Object3D } from '../core/Object3D.js';
4. import { Mesh } from '../objects/Mesh.js';
5. import { VertexColors } from '../constants.js';
6.	import { MeshBasicMaterial } from '../materials/MeshBasicMaterial.js';
7.	import { OctahedronBufferGeometry } from '../geometries/OctahedronGeometry.js';
8.	import { BufferAttribute } from '../core/BufferAttribute.js';
9.	var _vector = new Vector3();
10.	var _color1 = new Color();
11.	var _color2 = new Color();
12.	function HemisphereLightHelper( light, size, color ) {
13.		Object3D.call( this );
14.		this.light = light;
15.		this.light.updateMatrixWorld(); // 重要点
16.		this.matrix = light.matrixWorld; // 重要点
17.		this.matrixAutoUpdate = false;
18.		this.color = color;
19.		var geometry = new OctahedronBufferGeometry( size );
20.		geometry.rotateY( Math.PI * 0.5 );
21.		this.material = new MeshBasicMaterial( { wireframe: true, fog: false } );
22.		if ( this.color === undefined ) this.material.vertexColors = VertexColors;
23.		var position = geometry.getAttribute( 'position' );
24.		var colors = new Float32Array( position.count * 3 );
25.		geometry.addAttribute( 'color', new BufferAttribute( colors, 3 ) );
26.		this.add( new Mesh( geometry, this.material ) );
27.		this.update();
28.	}
29.	HemisphereLightHelper.prototype = Object.create( Object3D.prototype );
30.	HemisphereLightHelper.prototype.constructor = HemisphereLightHelper;
31.	HemisphereLightHelper.prototype.dispose = function () {
32.		this.children[ 0 ].geometry.dispose();
33.		this.children[ 0 ].material.dispose();
34.	};
35.	HemisphereLightHelper.prototype.update = function () {
36.		var mesh = this.children[ 0 ];
37.		if ( this.color !== undefined ) {
38.			this.material.color.set( this.color );
39.		} else {
40.			var colors = mesh.geometry.getAttribute( 'color' );
41.			_color1.copy( this.light.color );
42.			_color2.copy( this.light.groundColor );
43.			for ( var i = 0, l = colors.count; i < l; i ++ ) {
44.				var color = ( i < ( l / 2 ) ) ? _color1 : _color2;
45.				colors.setXYZ( i, color.r, color.g, color.b );
46.			}
47.			colors.needsUpdate = true;
48.		}
49.		mesh.lookAt( _vector.setFromMatrixPosition( this.light.matrixWorld ).negate() ); // 重要点
50.	};
51.	export { HemisphereLightHelper };
http://www.lryc.cn/news/619126.html

相关文章：

  • 大数据中的数据压缩原理
  • QT第五讲-控件QLineEdit、QSpinBox、QSlider、QScrollBar、QDial、QProgressBar、QLCDNumber
  • 计算机网络摘星题库800题笔记 第4章 网络层
  • 前端最新Vue2+Vue3基础入门到实战项目全套教程，自学前端vue就选黑马程序员，一套全通关！笔记
  • MCU中的液晶显示屏LCD(Liquid Crystal Display)控制器
  • VUE的8个生命周期
  • C++list(2)
  • 【JavaEE】多线程之线程安全（上）
  • 串口通信学习
  • 【PyTorch学习笔记 - 03】 Transforms
  • Spring-Cache 缓存数据
  • Dubbo 3.x源码(33)—Dubbo Consumer接收服务调用响应
  • 赛灵思ZYNQ官方文档UG585自学翻译笔记：UART Controller，通用异步收发传输器控制器
  • I2C 接收与发送数据的流程
  • 成都影像产业园实训考察：重庆五一职院关注技能就业
  • 【DL】深层神经网络
  • 《疯狂Java讲义（第3版）》学习笔记ch1
  • 力扣 hot100 Day71
  • 【1】Transformers快速入门：自然语言处理（NLP）是啥？
  • 机器学习第十课之TF-IDF算法（红楼梦文本分析）
  • LangChain SQLChatMessageHistory：SQL数据库存储聊天历史详解
  • 混合精度加快前向传播的速度
  • 计算机视觉（8）-纯视觉方案实现端到端轨迹规划（模型训练+代码）
  • MDD-Net：通过相互Transformer进行多模态抑郁症检测
  • 【沧海拾昧】使用LibUsbDotNet进行Windows/Ubuntu跨平台串口管理
  • XGBoost 的适用场景以及与 CNN、LSTM 的区别
  • 循环神经网络(RNN)全面解析
  • 文件IO(1)
  • 【doris基础与进阶】3-Doris安装与部署
  • UE5多人MOBA+GAS 42、提高头像画质