Skip to content

T
three.js

Ablesons / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

切换分支/标签
查找文件 普通视图历史永久链接Permalink
Raycaster.html 7.2 KB
Newer Older
N
commit first en-zh version  
nicholas 已提交
1 2 3 4 5 6 7 8 9 10 
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<base href="../../../" />
		<script src="list.js"></script>
		<script src="page.js"></script>
		<link type="text/css" rel="stylesheet" href="page.css" />
	</head>
	<body>
G
The translation of geometries folder  
gogoend 已提交
11 
		<h1>光线投射[name]</h1>
N
commit first en-zh version  
nicholas 已提交
12 13 

		<p class="desc">
G
The translation of geometries folder  
gogoend 已提交
14 15 
			这个类用于进行[link:https://en.wikipedia.org/wiki/Ray_casting raycasting]（光线投射）。
			光线投射用于进行鼠标拾取（在三维空间中计算出鼠标移过了什么物体）。
N
commit first en-zh version  
nicholas 已提交
16 17 
		</p>
G
The translation of geometries folder  
gogoend 已提交
18 
		<h2>示例</h2>
N
commit first en-zh version  
nicholas 已提交
19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 
		<code>
		var raycaster = new THREE.Raycaster();
		var mouse = new THREE.Vector2();

		function onMouseMove( event ) {

			// calculate mouse position in normalized device coordinates
			// (-1 to +1) for both components

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

		}

		function render() {

			// update the picking ray with the camera and mouse position
			raycaster.setFromCamera( mouse, camera );

			// calculate objects intersecting the picking ray
			var intersects = raycaster.intersectObjects( scene.children );

			for ( var i = 0; i < intersects.length; i++ ) {

				intersects[ i ].object.material.color.set( 0xff0000 );

			}

			renderer.render( scene, camera );

		}

		window.addEventListener( 'mousemove', onMouseMove, false );

		window.requestAnimationFrame(render);

		</code>
		<div>
			Examples: [example:webgl_interactive_cubes Raycasting to a Mesh]<br />
			[example:webgl_interactive_cubes_ortho Raycasting to a Mesh in using an OrthographicCamera]<br />
			[example:webgl_interactive_buffergeometry Raycasting to a Mesh with BufferGeometry]<br />
			[example:webgl_interactive_lines Raycasting to a Line]<br />
			[example:webgl_interactive_raycasting_points Raycasting to Points]<br />
			[example:webgl_geometry_terrain_raycast Terrain raycasting]<br />
			[example:webgl_octree_raycasting Raycasting using an octree]<br />
			[example:webgl_interactive_voxelpainter Raycasting to paint voxels]<br />
			[example:webgl_raycast_texture Raycast to a Texture]
		</div>


		<p>
		</p>
G
The translation of geometries folder  
gogoend 已提交
73 
		<h2>构造器</h2>
N
commit first en-zh version  
nicholas 已提交
74 75 76 

		<h3>[name]( [param:Vector3 origin], [param:Vector3 direction], [param:Float near], [param:Float far] ) {</h3>
		<p>
G
The translation of geometries folder  
gogoend 已提交
77 78 79 80 
		[page:Vector3 origin] —— 光线投射的原点向量。<br />
		[page:Vector3 direction] —— 向射线提供方向的方向向量，应当被标准化。<br />
		[page:Float near] —— 返回的所有结果比near远。near不能为负值，其默认值为0。<br />
		[page:Float far] —— 返回的所有结果都比far近。far不能小于near，其默认值为Infinity（正无穷。）</p>
N
commit first en-zh version  
nicholas 已提交
81 
		<p>
G
The translation of geometries folder  
gogoend 已提交
82 
			这将创建一个新的raycaster对象。<br />
N
commit first en-zh version  
nicholas 已提交
83 84 85 
		</p>
G
The translation of geometries folder  
gogoend 已提交
86 
		<h2>属性</h2>
N
commit first en-zh version  
nicholas 已提交
87 88 89 

		<h3>[property:float far]</h3>
		<p>
G
The translation of geometries folder  
gogoend 已提交
90 91 
			raycaster的远距离因数（投射远点）。这个值表明哪些对象可以基于该距离而被raycaster所丢弃。
			这个值不应当为负，并且应当比near属性大。
N
commit first en-zh version  
nicholas 已提交
92 93 94 95 
		</p>

		<h3>[property:float linePrecision]</h3>
		<p>
G
The translation of geometries folder  
gogoend 已提交
96 
			raycaster与[page:Line]（线）物体相交时的精度因数。
N
commit first en-zh version  
nicholas 已提交
97 98 99 100 
		</p>

		<h3>[property:float near]</h3>
		<p>
G
The translation of geometries folder  
gogoend 已提交
101 102 
			raycaster的近距离因数（投射近点）。这个值表明哪些对象可以基于该距离而被raycaster所丢弃。
			这个值不应当为负，并且应当比near属性小。
N
commit first en-zh version  
nicholas 已提交
103 104 105 106 
		</p>

		<h3>[property:Object params]</h3>
		<p>
G
The translation of geometries folder  
gogoend 已提交
107 
			具有以下属性的物体：<code>
N
commit first en-zh version  
nicholas 已提交
108 109 110 111 112 113 114 115 116 117 118 119 
{
	Mesh: {},
	Line: {},
	LOD: {},
	Points: { threshold: 1 },
	Sprite: {}
}
			</code>

		</p>

		<h3>[property:Ray ray]</h3>
G
The translation of geometries folder  
gogoend 已提交
120 
		<p>用于进行光线投射的[Page:Ray]（射线）。</p>
N
commit first en-zh version  
nicholas 已提交
121 122
G
The translation of geometries folder  
gogoend 已提交
123 
		<h2>方法</h2>
N
commit first en-zh version  
nicholas 已提交
124 125 126 

		<h3>[method:null set]( [param:Vector3 origin], [param:Vector3 direction] )</h3>
		<p>
G
The translation of geometries folder  
gogoend 已提交
127 128 
		[page:Vector3 origin] —— 光线投射的原点向量。<br />
		[page:Vector3 direction] —— 为光线提供方向的标准化方向向量。
N
commit first en-zh version  
nicholas 已提交
129 130 
		</p>
		<p>
G
The translation of geometries folder  
gogoend 已提交
131 
			使用一个新的原点和方向来更新射线。
N
commit first en-zh version  
nicholas 已提交
132 133 134 135 
		</p>

		<h3>[method:null setFromCamera]( [param:Vector2 coords], [param:Camera camera] )</h3>
		<p>
G
The translation of geometries folder  
gogoend 已提交
136 137 138 
		[page:Vector2 coords] —— 在标准化设备坐标中鼠标的二维坐标 —— X分量与Y分量应当在-1到1之间。<br />
								
		[page:Camera camera] —— 射线所来源的摄像机。
N
commit first en-zh version  
nicholas 已提交
139 140 
		</p>
		<p>
G
The translation of geometries folder  
gogoend 已提交
141 
			使用一个新的原点和方向来更新射线。
N
commit first en-zh version  
nicholas 已提交
142 143 144 145 
		</p>

		<h3>[method:Array intersectObject]( [param:Object3D object], [param:Boolean recursive], [param:Array optionalTarget] )</h3>
		<p>
G
The translation of geometries folder  
gogoend 已提交
146 147 148 
		[page:Object3D object] —— 检查与射线相交的物体。<br />
		[page:Boolean recursive] —— 若为true，则同时也会检查所有的后代。否则将只会检查对象本身。默认值为false。<br />
		[page:Array optionalTarget] — （可选）设置结果的目标数组。如果不设置这个值，则一个新的[page:Array]会被实例化；如果设置了这个值，则在每次调用之前必须清空这个数组（例如：array.length = 0;）。
N
commit first en-zh version  
nicholas 已提交
149 150 
		</p>
		<p>
G
The translation of geometries folder  
gogoend 已提交
151 152 
			检测所有在射线与物体之间，包括或不包括后代的相交部分。返回结果时，相交部分将按距离进行排序，最近的位于第一个）。<br>
			该方法返回一个包含有交叉部分的数组:
N
commit first en-zh version  
nicholas 已提交
153 154 155 156 157 
		</p>
		<code>
				[ { distance, point, face, faceIndex, object }, ... ]
		</code>
		<p>
G
The translation of geometries folder  
gogoend 已提交
158 159 160 161 162 163 
			[page:Float distance] —— 射线投射原点和相交部分之间的距离。<br />
			[page:Vector3 point] —— 相交部分的点（世界坐标）<br />
			[page:Face3 face] —— 相交的面<br />
			[page:Integer faceIndex] —— 相交的面的索引<br />
			[page:Object3D object] —— 相交的物体<br />
			[page:Vector2 uv] —— 相交部分的点的UV坐标。
N
commit first en-zh version  
nicholas 已提交
164 165 
		</p>
		<p>
G
The translation of geometries folder  
gogoend 已提交
166 167 
			当计算这条射线是否和物体相交的时候，*Raycaster*将传入的对象委托给[page:Object3D.raycast raycast]方法。
			这将可以让[page:Mesh mesh]对于光线投射的响应不同于[page:Line lines]和[page:Points pointclouds]。
N
commit first en-zh version  
nicholas 已提交
168 169 
		</p>
		<p>
G
The translation of geometries folder  
gogoend 已提交
170 171 172 
			<strong>请注意</strong>：对于网格来说，面必须朝向射线的原点，以便其能够被检测到。
			用于交互的射线穿过面的背侧时，将不会被检测到。如果需要对物体中面的两侧进行光线投射，
			你需要将[page:Mesh.material material]中的[page:Material.side side]属性设置为*THREE.DoubleSide*。
N
commit first en-zh version  
nicholas 已提交
173 174 175 176 
		</p>

		<h3>[method:Array intersectObjects]( [param:Array objects], [param:Boolean recursive], [param:Array optionalTarget] )</h3>
		<p>
G
The translation of geometries folder  
gogoend 已提交
177 178 179 
		[page:Array objects] —— 检测和射线相交的一组物体。<br />
		[page:Boolean recursive] —— 若为true，则同时也会检测所有物体的后代。否则将只会检测对象本身的相交部分。默认值为false。<br />
		[page:Array optionalTarget] —— （可选）（可选）设置结果的目标数组。如果不设置这个值，则一个新的[page:Array]会被实例化；如果设置了这个值，则在每次调用之前必须清空这个数组（例如：array.length = 0;）。
N
commit first en-zh version  
nicholas 已提交
180 181 
		</p>
		<p>
G
The translation of geometries folder  
gogoend 已提交
182 
			检测所有在射线与这些物体之间，包括或不包括后代的相交部分。返回结果时，相交部分将按距离进行排序，最近的位于第一个），相交部分和[page:.intersectObject]所返回的格式是相同的。
N
commit first en-zh version  
nicholas 已提交
183 184 185 
		</p>
G
The translation of geometries folder  
gogoend 已提交
186 
		<h2>源代码</h2>
N
commit first en-zh version  
nicholas 已提交
187 188 189 190 

		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
	</body>
</html>