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

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

news 2025/8/13 9:57:33
介绍
  • 场景选点后，灯光移动了，但是开启辅助器时，辅助器是不会跟随移动的，总是移动到上一次选中的位置！官网上没有相应的解释，此时就需要查看源码，再根据源码编写功能代码啦！
  • 主要是聚光灯、平行光以及环境光的灯光辅助器不能跟随变动！
  • 每次修改灯光相关参数时，记得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.dtcms.com/a/328115.html

相关文章：

  • 基于MATLAB实现的PSO优化BP神经网络
  • Java数据结构之数组
  • 电商双 11 美妆数据分析学习报告
  • 锅气：「现炒之魂·烟火人间」
  • 【Unity】Unity中ContentSizeFitter有时无法及时自适应大小问题解决
  • Flutter 基于google验证登录实现
  • HeidiSQL 连接 MySQL 报错 10061
  • Xshell连接虚拟机密码错误解决方法
  • Ansible部署应用
  • Gradle 配置教程：与 Maven 对比详解（含完整迁移指南）
  • methods和computed的区别
  • tlias智能学习辅助系统--Maven高级-继承
  • 北京JAVA基础面试30天打卡08
  • C++动态代理技术详解：实现原理与应用场景
  • Java静态代理和动态代理
  • Linux驱动开发probe字符设备的完整创建流程
  • 【游戏优化笔记】开发中如何减少建筑和树木等环境元素的资源消耗？
  • 【RHCE】自动化备份全网服务器数据平台
  • 36-综合案例开发-2
  • Chrome插件开发【manifest.json】
  • 【传奇开心果系列】Flet框架桌面程序组件Custom Ribbon自定义组件模板
  • Class34锚框
  • 分享单位开通固定公网IP，不需要找运营商申请
  • sqli-libs通关教程（41-50)
  • lesson36：MySQL从入门到精通：全面掌握数据库操作与核心原理
  • Elasticsearch JS 客户端子客户端（Child Client）实践指南
  • DAY38作业（补）
  • CTO如何通过录音转写和音频降噪，提升企业远程协作效率？
  • Secure 第四天作业
  • Linux环境部署RocketMQ