samien
/
three.js
зеркало из https://github.com/mrdoob/three.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372
							<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8" />
		<base href="../../../" />
		<script src="page.js"></script>
		<link type="text/css" rel="stylesheet" href="page.css" />
	</head>
	<body>
		<h1>颜色（[name]）</h1>

		<p class="desc">
		表示一个颜色。
		</p>

		<p>
			[name] 实例由线性 <i>工作颜色空间</i> 中的 RGB 分量表示，默认为 `LinearSRGBColorSpace`。
			常规使用 `SRGBColorSpace` (例如十六进制和 CSS 字符串) 的输入被自动转换到工作颜色空间。
		</p>

		<p>
			<code>
// converted automatically from SRGBColorSpace to LinearSRGBColorSpace
const color = new THREE.Color().setHex( 0x112233 );
			</code>
		</p>

		<p>
			可以明确指定源颜色空间，以确保正确转换。
		</p>

		<p>
			<code>
// assumed already LinearSRGBColorSpace; no conversion
const color = new THREE.Color().setRGB( 0.5, 0.5, 0.5 );

// converted explicitly from SRGBColorSpace to LinearSRGBColorSpace
const color = new THREE.Color().setRGB( 0.5, 0.5, 0.5, SRGBColorSpace );
			</code>
		</p>

		<p>
			如果禁用 THREE.ColorManagement ，则不会发生任何转换。详情请参阅 <i>Color management</i>。
		</p>

		<p>
			迭代 Color 实例将按相应的顺序生成其分量 (r, g, b)。
		</p>

		<h2>代码示例</h2>

		<p>颜色可以用以下任意一种方式初始化。</p>
		<code>
		//empty constructor - will default white
		const color1 = new THREE.Color();

		//Hexadecimal color (recommended)
		const color2 = new THREE.Color( 0xff0000 );

		//RGB string
		const color3 = new THREE.Color("rgb(255, 0, 0)");
		const color4 = new THREE.Color("rgb(100%, 0%, 0%)");

		//X11 color name - all 140 color names are supported.
		//Note the lack of CamelCase in the name
		const color5 = new THREE.Color( 'skyblue' );

		//HSL string
		const color6 = new THREE.Color("hsl(0, 100%, 50%)");

		//Separate RGB values between 0 and 1
		const color7 = new THREE.Color( 1, 0, 0 );
		</code>


		<h2>构造器（Constructor）</h2>


		<h3>[name]( [param:Color_Hex_or_String r], [param:Float g], [param:Float b] )</h3>
		<p>
		[page:Color_Hex_or_String r] - (可选参数)  如果参数g和b被定义，则r表示颜色中的红色分量。
		如果未被定义，r可以是一个十六进制 [link:https://en.wikipedia.org/wiki/Web_colors#Hex_triplet hexadecimal triplet] 颜色值或CSS样式的字符串或一个`Color`实例。<br />
		[page:Float g] - (可选参数) 如果被定义，表示颜色中的绿色分量。<br />
		[page:Float b] - (可选参数) 如果被定义，表示颜色中的蓝色分量。<br /><br />

		注意使用十六进制 [link:https://en.wikipedia.org/wiki/Web_colors#Hex_triplet hexadecimal triplet] 定义一个颜色在three.js中是标准的方法，而且其余
		文档也将会使用这个方法。<br /><br />

		当所有参数被定义时，r是红色分量，g是绿色分量，b是蓝色分量。<br />
		当只有 [page:Color_Hex_or_String r] 被定义时：<br />
		<ul>
			<li>它可用一个十六进制 [link:https://en.wikipedia.org/wiki/Web_colors#Hex_triplet hexadecimal triplet] 值表示颜色（推荐）。</li>
			<li>它可以是一个另一个颜色实例。</li>
			<li>它可以是另外一个CSS样式。例如：
				<ul>
					<li>'rgb(250, 0,0)'</li>
					<li>'rgb(100%,0%,0%)'</li>
					<li>'hsl(0, 100%, 50%)'</li>
					<li>'#ff0000'</li>
					<li>'#f00'</li>
					<li>'red'</li>
				</ul>

			</li>
		</ul>
		</p>

		<h2>属性（Properties）</h2>

		<h3>[property:Boolean isColor]</h3>
		<p>
			只读属性，用于检查给定对象是否为[name]类型。
		</p>

		<h3>[property:Float r]</h3>
		<p>
			红色通道的值在0到1之间。默认值为1。
		</p>

		<h3>[property:Float g]</h3>
		<p>
			绿色通道的值在0到1之间。默认值为1。
		</p>

		<h3>[property:Float b]</h3>
		<p>
			蓝色通道的值在0到1之间。默认值为1。
		</p>


		<h2>方法（Methods）</h2>

		<h3>[method:this add]( [param:Color color] ) </h3>
		<p>将给定颜色的RGB值添加到此颜色的RGB值。</p>

		<h3>[method:this addColors]( [param:Color color1], [param:Color color2] ) </h3>
		<p>将此颜色的RGB值设置为 [page:Color color1] 和 [page:Color color2] 的RGB值之和。</p>

		<h3>[method:this addScalar]( [param:Number s] ) </h3>
		<p>给现有的RGB值都加上 [page:Number s] 。</p>

		<h3>[method:this applyMatrix3]( [param:Matrix3 m] )</h3>
		<p>
			将变换 [page:Matrix3 m] 应用于此颜色的 RGB 分量。
		</p>

		<h3>[method:Color clone]() </h3>
		<p>返回一个与当前颜色的 [page:.r r], [page:.g g] 和 [page:.b b] 相同的颜色。</p>

		<h3>[method:this copy]( [param:Color color] ) </h3>
		<p>
			从 [page:Color color] 中拷贝 [page:.r r], [page:.g g] 和 [page:.b b] 值到当前的颜色。
		</p>

		<h3>[method:this convertLinearToSRGB]() </h3>
		<p>
			将此颜色从线性空间转换成sRGB空间。
		</p>

		<h3>[method:this convertSRGBToLinear]() </h3>
		<p>
			将此颜色从sRGB空间转换成线性空间。
		</p>

		<h3>[method:this copyLinearToSRGB]( [param:Color color]] ) </h3>
		<p>
		[page:Color color] — 需要拷贝的颜色。<br />

		将传入的 [param:Color color] 拷贝给当前颜色，然后将当前颜色从线性空间转换到sRGB空间。
		</p>

		<h3>[method:this copySRGBToLinear]( [param:Color color] ) </h3>
		<p>
		[page:Color color] — 需要拷贝的颜色。<br />

		将传入的 [param:Color color] 拷贝给当前颜色，然后将当前颜色从sRGB空间转换到线性空间。
		</p>

		<h3>[method:Boolean equals]( [param:Color color] ) </h3>
		<p>将 [param:Color color] 的RGB值与该对象的RGB值进行比较。如果它们都是相同的，返回true，否则返回false。</p>

		<h3>[method:this fromArray]( [param:Array array], [param:Integer offset] ) </h3>
		<p>
		[page:Array array] - 格式为 [ [page:Float r], [page:Float g], [page:Float b] ] 的数组 [page:Array]。<br />
		[page:Integer offset] - 数组中可选偏移量<br /><br />

		从格式为[ [page:Float r], [page:Float g], [page:Float b] ]的数组数据中来创建Color对象。
		</p>

		<h3>[method:this fromBufferAttribute]( [param:BufferAttribute attribute], [param:Integer index] )</h3>
		<p>
		[page:BufferAttribute attribute] - 数据源<br />
		[page:Integer index] - 索引值<br /><br />

		根据参数 [page:BufferAttribute attribute] 设置该颜色。
		</p>

		<h3>[method:Integer getHex]( [param:string colorSpace] = SRGBColorSpace )</h3>
		<p>返回此颜色的十六进制值。</p>

		<h3>[method:String getHexString]( [param:string colorSpace] = SRGBColorSpace )</h3>
		<p>将此颜色的十六进制值作为字符串返回 (例如, 'FFFFFF')。</p>

		<h3>[method:Object getHSL]( [param:Object target], [param:string colorSpace] = LinearSRGBColorSpace )</h3>
		<p>
			[page:Object target] — 结果将复制到这个对象中。向对象添加h、s和l键(如果不存在)。<br /><br />

			将此颜色的 [page:.r r], [page:.g g] 和 [page:.b b] 值转换为 [link:https://en.wikipedia.org/wiki/HSL_and_HSV HSL]格式，然后返回一个格式如下的对象：

			<code>
				{ h: 0, s: 0, l: 0 }
			</code>

		</p>

		<h3>[method:Color getRGB]( [param:Color target], [param:string colorSpace] = LinearSRGBColorSpace )</h3>
		<p>
			[page:Color target] - 结果将复制到这个对象中.<br /><br />

			Returns the RGB values of this color as an instance of [page:Color].
		</p>

		<h3>[method:String getStyle]( [param:string colorSpace] = SRGBColorSpace )</h3>
		<p>以CSS样式字符串的形式返回该颜色的值。例如:“rgb(255,0,0)”。</p>

		<h3>[method:this lerp]( [param:Color color], [param:Float alpha] ) </h3>
		<p>
		[page:Color color] - 用于收敛的颜色。<br />
		[page:Float alpha] - 介于0到1的数字。<br /><br />

		将该颜色的RGB值线性插值到传入参数的RGB值。alpha参数可以被认为是两种颜色之间的比例值，其中0是当前颜色和1.0是第一个参数的颜色。
		</p>

		<h3>[method:this lerpColors]( [param:Color color1], [param:Color color2], [param:Float alpha] )</h3>
		<p>
		[page:Color color1] - 开始的颜色。<br />
		[page:Color color2] - 结束收敛的颜色。<br />
		[page:Float alpha] - 介于0到1的数字。<br /><br />

		将该颜色设置为线性插值颜色 [page:Color color1] 和 [page:Color color2] - 在此 alpha 是连接两种颜色的直线百分比距离
		alpha = 0 时为 [page:Color color1]， alpha = 1 时为 [page:Color color2]。
		</p>

		<h3>[method:this lerpHSL]( [param:Color color], [param:Float alpha] ) </h3>
		<p>
		[page:Color color] - 用于收敛的颜色。<br />
		[page:Float alpha] - 介于0到1的数字。<br /><br />

		将该颜色的HSL值线性插值到传递参数的HSL值。它不同于上诉的[page:lerp]。通过不直接从一种颜色插入到另一种颜色，
		而是通过插值这两种颜色之间的所有色相(H)、亮度(L)、饱和度(S)。alpha参数可以被认为是两种颜色之间的比例值，
		其中0是当前颜色和1.0是第一个参数的颜色。
		</p>

		<h3>[method:this multiply]( [param:Color color] ) </h3>
		<p>将此颜色的RGB值乘以给定的 [page:Color color] 的RGB值。</p>

		<h3>[method:this multiplyScalar]( [param:Number s] ) </h3>
		<p>将此颜色的RGB值乘以给定的[page:Number s]的值。</p>

		<h3>[method:this offsetHSL]( [param:Float h], [param:Float s], [param:Float l] ) </h3>
		<p>
			将给定的 [page:Float h], [page:Float s], 和 [page:Float l]值加到当前颜色值。
			内部的机制为：先将该颜色的 [page:.r r], [page:.g g] 和 [page:.b b] 值转换为HSL，然后与传入的[page:Float h], [page:Float s], 和 [page:Float l]
			相加，最后再将结果转成RGB值。
		</p>

		<h3>[method:this set]( [param:Color_Hex_or_String r], [param:Float g], [param:Float b] )</h3>
		<p>
			[page:Color_Hex_or_String r] - (optional) 如果定义了参数 [page:Float g] 和 [page:Float b]，则为颜色的红色分量。 
			如果未定义，则可以是 [link:https://en.wikipedia.org/wiki/Web_colors#Hex_triplet hexadecimal triplet] (推荐)，CSS 样式字符串或其他 `Color` 实例。<br />
			[page:Float g] - (optional) 如果定义了，则为颜色的绿色分量。<br />
			[page:Float b] - (optional) 如果定义了，则为颜色的蓝色分量。<br /><br />

			有关可能的参数的完整详细信息，请参阅上面的构造函数。根据输入类型，委托给 [page:.copy]、[page:.setStyle]、[page:.setRGB] 或 [page:.setHex]。
		</p>

		<h3>[method:this setFromVector3]( [param:Vector3 vector] )</h3>
		<p>
			根据指定 [page:Vector3 vector] 的 x、y 和 z 分量设置此颜色的 [page:.r r]、[page:.g g] 和 [page:.b b] 分量。
		</p>

		<h3>[method:this setHex]( [param:Integer hex], [param:string colorSpace] = SRGBColorSpace ) </h3>
		<p>
		[page:Integer hex] — [link:https://en.wikipedia.org/wiki/Web_colors#Hex_triplet hexadecimal triplet] 格式。<br /><br />

		采用十六进制值设置此颜色。

		</p>

		<h3>[method:this setHSL]( [param:Float h], [param:Float s], [param:Float l], [param:string colorSpace] = LinearSRGBColorSpace ) </h3>
		<p>
		[page:Float h] — 色相值处于0到1之间。hue value between 0.0 and 1.0 <br />
		[page:Float s] — 饱和度值处于0到1之间。<br />
		[page:Float l] — 亮度值处于0到1之间。<br /><br />

		采用HLS值设置此颜色。
		</p>

		<h3>[method:this setRGB]( [param:Float r], [param:Float g], [param:Float b], [param:string colorSpace] = LinearSRGBColorSpace ) </h3>
		<p>
		[page:Float r] — 红色通道的值在0到1之间。<br />
		[page:Float g] — 绿色通道的值在0到1之间。<br />
		[page:Float b] — 蓝色通道的值在0到1之间。<br /><br />

		采用RGB值设置此颜色。
		</p>

		<h3>[method:this setScalar]( [param:Float scalar] ) </h3>
		<p>
		[page:Float scalar] — 处于0到1之间的值<br /><br />

		将颜色的RGB值都设为该 [page:Float scalar] 的值。
		</p>

		<h3>[method:this setStyle]( [param:String style], [param:string colorSpace] = SRGBColorSpace ) </h3>
		<p>
		[page:String style] — 颜色css样式的字符串<br /><br />

		采用ccs样式的字符串设置此颜色。例如,
		"rgb(250, 0,0)",
		"rgb(100%, 0%, 0%)",
		"hsl(0, 100%, 50%)",
		"#ff0000",
		"#f00", 或者
		"red" ( 或者任何 [link:https://en.wikipedia.org/wiki/X11_color_names#Color_name_chart X11 color name]
		- 所有140种颜色名称都支持 ).<br />

		半透明颜色例如 "rgba(255, 0, 0, 0.5)" and "hsla(0, 100%, 50%, 0.5)" 也能支持,
		但是alpha通道的值将会被丢弃。<br /><br />

		注意，对于X11颜色名称，多个单词(如暗橙色)变成字符串“darkorange”。
		</p>

		<h3>[method:this setColorName]( [param:String style], [param:string colorSpace] = SRGBColorSpace ) </h3>
		<p>
		[page:String style] — 颜色名字的英文单词 ( 具体请查阅 [link:https://en.wikipedia.org/wiki/X11_color_names#Color_name_chart X11 color names] )<br /><br />

		通过颜色名字设置该颜色。如果你不使用其他 CSS 颜色样式形式，那么这种方式会略快于 [page:.setStyle] 方法。<br/><br/>

		为了方便使用，颜色名称都可以通过 Color.NAMES 访问，例如：<code>Color.NAMES.aliceblue // returns 0xF0F8FF</code>
		</p>

		<h3>[method:this sub]( [param:Color color] ) </h3>
		<p>
		从该颜色的RGB分量中减去传入颜色的RGB分量。如果分量结果是负，则该分量为零。
		</p>

		<h3>[method:Array toArray]( [param:Array array], [param:Integer offset] ) </h3>
		<p>
		[page:Array array] -  存储颜色的可选数组 <br />
		[page:Integer offset] - 数组的可选偏移量<br /><br />

		返回一个格式为[ r, g, b ] 数组。
		</p>

		<h3>[method:Number toJSON]()</h3>
		<p>
		此方法定义 [name] 的序列化结果。以十六进制值的形式返回颜色。
		</p>

		<h2>源码（Source）</h2>

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