提交 c71d1206 编写于 作者: M Mr.doob

r104

上级 a92ec650
此差异已折叠。
此差异已折叠。
此差异已折叠。
......@@ -46,7 +46,7 @@
<h3>[property:Material customDistanceMaterial]</h3>
<p>
Same as customDepthMaterial, but used with [page:PointLight]. Default is *undefined*.
Same as [page:.customDepthMaterial customDepthMaterial], but used with [page:PointLight]. Default is *undefined*.
</p>
<h3>[property:Boolean frustumCulled]</h3>
......
......@@ -51,6 +51,7 @@
bevelEnabled: true,
bevelThickness: 1,
bevelSize: 1,
bevelOffset: 0,
bevelSegments: 1
};
......@@ -76,6 +77,7 @@
<li>bevelEnabled — bool. Apply beveling to the shape. Default is true.</li>
<li>bevelThickness — float. How deep into the original shape the bevel goes. Default is 6.</li>
<li>bevelSize — float. Distance from the shape outline that the bevel extends. Default is bevelThickness - 2.</li>
<li>bevelOffset — float. Distance from the shape outline that the bevel starts. Default is 0.</li>
<li>bevelSegments — int. Number of bevel layers. Default is 3.</li>
<li>extrudePath — THREE.CurvePath. A 3D spline path along which the shape should be extruded.</li>
<li>UVGenerator — Object. object that provides UV generator functions</li>
......
......@@ -51,6 +51,7 @@
bevelEnabled: true,
bevelThickness: 1,
bevelSize: 1,
bevelOffset: 0,
bevelSegments: 1
};
......@@ -76,6 +77,7 @@
<li>bevelEnabled — bool. Apply beveling to the shape. Default is true.</li>
<li>bevelThickness — float. How deep into the original shape the bevel goes. Default is 6.</li>
<li>bevelSize — float. Distance from the shape outline that the bevel extends. Default is bevelThickness - 2.</li>
<li>bevelOffset — float. Distance from the shape outline that the bevel starts. Default is 0.</li>
<li>bevelSegments — int. Number of bevel layers. Default is 3.</li>
<li>extrudePath — THREE.CurvePath. A 3D spline path along which the shape should be extruded.</li>
<li>UVGenerator — Object. object that provides UV generator functions</li>
......
......@@ -55,6 +55,7 @@
bevelEnabled: true,
bevelThickness: 10,
bevelSize: 8,
bevelOffset: 0,
bevelSegments: 5
} );
} );
......@@ -74,6 +75,7 @@
<li>bevelEnabled — Boolean. Turn on bevel. Default is False.</li>
<li>bevelThickness — Float. How deep into text bevel goes. Default is 10.</li>
<li>bevelSize — Float. How far from text outline is bevel. Default is 8.</li>
<li>bevelOffset — Float. How far from text outline bevel starts. Default is 0.</li>
<li>bevelSegments — Integer. Number of bevel segments. Default is 3.</li>
</ul>
</p>
......
......@@ -55,6 +55,7 @@
bevelEnabled: true,
bevelThickness: 10,
bevelSize: 8,
bevelOffset: 0,
bevelSegments: 5
} );
} );
......@@ -74,6 +75,7 @@
<li>bevelEnabled — Boolean. Turn on bevel. Default is False.</li>
<li>bevelThickness — Float. How deep into text bevel goes. Default is 10.</li>
<li>bevelSize — Float. How far from text outline is bevel. Default is 8.</li>
<li>bevelOffset — Float. How far from text outline bevel starts. Default is 0.</li>
<li>bevelSegments — Integer. Number of bevel segments. Default is 3.</li>
</ul>
</p>
......
<!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>
[page:Material] &rarr;
<h1>[name]</h1>
<p class="desc">
[name] is internally used for implementing shadow mapping with [page:PointLight]s.<br/><br/>
Can also be used to customize the shadow casting of an object by assigning an instance of [name] to [page:Object3D.customDistanceMaterial].
The following examples demonstrates this approach in order to ensure transparent parts of objects do no cast shadows.
</p>
<h2>Example</h2>
[example:webgl_shadowmap_pointlight WebGL / shadowmap / pointlight]
<script>
// iOS iframe auto-resize workaround
if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {
var scene = document.getElementById( 'scene' );
scene.style.width = getComputedStyle( scene ).width;
scene.style.height = getComputedStyle( scene ).height;
scene.setAttribute( 'scrolling', 'no' );
}
</script>
<h2>Constructor</h2>
<h3>[name]( [param:Object parameters] )</h3>
<p>
[page:Object parameters] - (optional) an object with one or more properties defining the material's appearance.
Any property of the material (including any property inherited from [page:Material]) can be passed in here.
</p>
<h2>Properties</h2>
<p>See the base [page:Material] class for common properties.</p>
<h3>[property:Texture alphaMap]</h3>
<p>The alpha map is a grayscale texture that controls the opacity across the surface
(black: fully transparent; white: fully opaque). Default is null.<br /><br />
Only the color of the texture is used, ignoring the alpha channel if one exists.
For RGB and RGBA textures, the [page:WebGLRenderer WebGL] renderer will use the
green channel when sampling this texture due to the extra bit of precision provided
for green in DXT-compressed and uncompressed RGB 565 formats. Luminance-only and
luminance/alpha textures will also still work as expected.
</p>
<h3>[property:Texture displacementMap]</h3>
<p>
The displacement map affects the position of the mesh's vertices. Unlike other maps
which only affect the light and shade of the material the displaced vertices can cast shadows,
block other objects, and otherwise act as real geometry. The displacement texture is
an image where the value of each pixel (white being the highest) is mapped against,
and repositions, the vertices of the mesh.
</p>
<h3>[property:Float displacementScale]</h3>
<p>
How much the displacement map affects the mesh (where black is no displacement,
and white is maximum displacement). Without a displacement map set, this value is not applied.
Default is 1.
</p>
<h3>[property:Float displacementBias]</h3>
<p>
The offset of the displacement map's values on the mesh's vertices.
Without a displacement map set, this value is not applied. Default is 0.
</p>
<h3>[property:Float farDistance]</h3>
<p>
The far value of the point light's internal shadow camera.
</p>
<h3>[property:Boolean fog]</h3>
<p>Whether the material is affected by fog. Default is *false*.</p>
<h3>[property:Boolean isMeshDistanceMaterial]</h3>
<p>
Used to check whether this or derived classes are mesh depth materials. Default is *true*.<br /><br />
You should not change this, as it used internally for optimisation.
</p>
<h3>[property:Boolean lights]</h3>
<p>Whether the material is affected by lights. Default is *false*.</p>
<h3>[property:Texture map]</h3>
<p>The color map. Default is null.</p>
<h3>[property:boolean morphTargets]</h3>
<p>Define whether the material uses morphTargets. Default is false.</p>
<h3>[property:Float nearDistance]</h3>
<p>
The near value of the point light's internal shadow camera.
</p>
<h3>[property:Vector3 referencePosition]</h3>
<p>
The position of the point light in world space.
</p>
<h3>[property:Boolean skinning]</h3>
<p>Define whether the material uses skinning. Default is false.</p>
<h2>Methods</h2>
<p>See the base [page:Material] class for common methods.</p>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!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>
[page:Material] &rarr;
<h1>[name]</h1>
<p class="desc">
[name] is defined by a MatCap (or Lit Sphere) texture, which encodes the material color and shading.<br/><br/>
[name] does not respond to lights since the matcap image file encodes baked lighting.
It will cast a shadow onto an object that receives shadows (and shadow clipping works), but it will not self-shadow or receive shadows.
</p>
<iframe id="scene" src="scenes/material-browser.html#MeshMatcapMaterial"></iframe>
<script>
// iOS iframe auto-resize workaround
if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {
var scene = document.getElementById( 'scene' );
scene.style.width = getComputedStyle( scene ).width;
scene.style.height = getComputedStyle( scene ).height;
scene.setAttribute( 'scrolling', 'no' );
}
</script>
<h2>Constructor</h2>
<h3>[name]( [param:Object parameters] )</h3>
<p>
[page:Object parameters] - (optional) an object with one or more properties defining the material's appearance.
Any property of the material (including any property inherited from [page:Material]) can be passed in here.<br /><br />
The exception is the property [page:Hexadecimal color], which can be passed in as a hexadecimal
string and is *0xffffff* (white) by default. [page:Color.set]( color ) is called internally.
</p>
<h2>Properties</h2>
<p>See the base [page:Material] class for common properties.</p>
<h3>[property:Texture alphaMap]</h3>
<p>The alpha map is a grayscale texture that controls the opacity across the surface
(black: fully transparent; white: fully opaque). Default is null.<br /><br />
Only the color of the texture is used, ignoring the alpha channel if one exists.
For RGB and RGBA textures, the [page:WebGLRenderer WebGL] renderer will use the
green channel when sampling this texture due to the extra bit of precision provided
for green in DXT-compressed and uncompressed RGB 565 formats. Luminance-only and
luminance/alpha textures will also still work as expected.
</p>
<h3>[property:Texture bumpMap]</h3>
<p>
The texture to create a bump map. The black and white values map to the perceived depth in relation to the lights.
Bump doesn't actually affect the geometry of the object, only the lighting. If a normal map is defined this will
be ignored.
</p>
<h3>[property:Float bumpScale]</h3>
<p>How much the bump map affects the material. Typical ranges are 0-1. Default is 1.</p>
<h3>[property:Color color]</h3>
<p>[page:Color] of the material, by default set to white (0xffffff).</p>
<h3>[property:Texture displacementMap]</h3>
<p>
The displacement map affects the position of the mesh's vertices. Unlike other maps
which only affect the light and shade of the material the displaced vertices can cast shadows,
block other objects, and otherwise act as real geometry. The displacement texture is
an image where the value of each pixel (white being the highest) is mapped against,
and repositions, the vertices of the mesh.
</p>
<h3>[property:Float displacementScale]</h3>
<p>
How much the displacement map affects the mesh (where black is no displacement,
and white is maximum displacement). Without a displacement map set, this value is not applied.
Default is 1.
</p>
<h3>[property:Float displacementBias]</h3>
<p>
The offset of the displacement map's values on the mesh's vertices.
Without a displacement map set, this value is not applied. Default is 0.
</p>
<h3>[property:Boolean isMeshMatcapMaterial]</h3>
<p>
Used to check whether this or derived classes are mesh Matcap materials. Default is *true*.<br /><br />
You should not change this, as it used internally for optimisation.
</p>
<h3>[property:Texture map]</h3>
<p>The color map. Default is null. The texture map color is modulated by the diffuse [page:.color].</p>
<h3>[property:Texture matcap]</h3>
<p>The matcap map. Default is null.</p>
<h3>[property:boolean morphNormals]</h3>
<p>
Defines whether the material uses morphNormals. Set as true to pass morphNormal
attributes from the [page:Geometry] to the shader. Default is *false*.
</p>
<h3>[property:Boolean morphTargets]</h3>
<p>Define whether the material uses morphTargets. Default is false.</p>
<h3>[property:Texture normalMap]</h3>
<p>
The texture to create a normal map. The RGB values affect the surface normal for each pixel fragment and change
the way the color is lit. Normal maps do not change the actual shape of the surface, only the lighting.
</p>
<h3>[property:Integer normalMapType]</h3>
<p>
The type of normal map.<br /><br />
Options are [page:constant THREE.TangentSpaceNormalMap] (default), and [page:constant THREE.ObjectSpaceNormalMap].
</p>
<h3>[property:Vector2 normalScale]</h3>
<p>
How much the normal map affects the material. Typical ranges are 0-1.
Default is a [page:Vector2] set to (1,1).
</p>
<h3>[property:Boolean skinning]</h3>
<p>Define whether the material uses skinning. Default is false.</p>
<h2>Methods</h2>
<p>See the base [page:Material] class for common methods.</p>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
......@@ -44,6 +44,38 @@
<h2>Properties</h2>
<p>See the base [page:Material] class for common properties.</p>
<h3>[property:Texture bumpMap]</h3>
<p>
The texture to create a bump map. The black and white values map to the perceived depth in relation to the lights.
Bump doesn't actually affect the geometry of the object, only the lighting. If a normal map is defined this will
be ignored.
</p>
<h3>[property:Float bumpScale]</h3>
<p>How much the bump map affects the material. Typical ranges are 0-1. Default is 1.</p>
<h3>[property:Texture displacementMap]</h3>
<p>
The displacement map affects the position of the mesh's vertices. Unlike other maps
which only affect the light and shade of the material the displaced vertices can cast shadows,
block other objects, and otherwise act as real geometry. The displacement texture is
an image where the value of each pixel (white being the highest) is mapped against,
and repositions, the vertices of the mesh.
</p>
<h3>[property:Float displacementScale]</h3>
<p>
How much the displacement map affects the mesh (where black is no displacement,
and white is maximum displacement). Without a displacement map set, this value is not applied.
Default is 1.
</p>
<h3>[property:Float displacementBias]</h3>
<p>
The offset of the displacement map's values on the mesh's vertices.
Without a displacement map set, this value is not applied. Default is 0.
</p>
<h3>[property:Boolean fog]</h3>
<p>Whether the material is affected by fog. Default is *false*.</p>
......@@ -57,9 +89,37 @@
<h3>[property:Boolean lights]</h3>
<p>Whether the material is affected by lights. Default is *false*.</p>
<h3>[property:boolean morphTargets]</h3>
<h3>[property:boolean morphNormals]</h3>
<p>
Defines whether the material uses morphNormals. Set as true to pass morphNormal
attributes from the [page:Geometry] to the shader. Default is *false*.
</p>
<h3>[property:Boolean morphTargets]</h3>
<p>Define whether the material uses morphTargets. Default is false.</p>
<h3>[property:Texture normalMap]</h3>
<p>
The texture to create a normal map. The RGB values affect the surface normal for each pixel fragment and change
the way the color is lit. Normal maps do not change the actual shape of the surface, only the lighting.
</p>
<h3>[property:Integer normalMapType]</h3>
<p>
The type of normal map.<br /><br />
Options are [page:constant THREE.TangentSpaceNormalMap] (default), and [page:constant THREE.ObjectSpaceNormalMap].
</p>
<h3>[property:Vector2 normalScale]</h3>
<p>
How much the normal map affects the material. Typical ranges are 0-1.
Default is a [page:Vector2] set to (1,1).
</p>
<h3>[property:Boolean skinning]</h3>
<p>Define whether the material uses skinning. Default is false.</p>
<h3>[property:boolean wireframe]</h3>
<p>
Render geometry as wireframe. Default is false (i.e. render as smooth shaded).
......
......@@ -14,7 +14,7 @@
<div class="desc">An extension of the [page:MeshPhongMaterial] with toon shading.</div>
<!-- <iframe id="scene" src="scenes/material-browser.html#MeshStandardMaterial"></iframe>
<iframe id="scene" src="scenes/material-browser.html#MeshToonMaterial"></iframe>
<script>
......@@ -30,7 +30,7 @@
}
</script> -->
</script>
<h2>Examples</h2>
[example:webgl_materials_variations_toon materials / variations / toon]<br />
......
......@@ -72,7 +72,7 @@ scene.add( lod );
<h2>Methods</h2>
<p>See the base [page:Object3D] class for common methods.</p>
<h3>[method:null addLevel]( [param:Object3D object], [param:Float distance] )</h3>
<h3>[method:this addLevel]( [param:Object3D object], [param:Float distance] )</h3>
<p>
[page:Object3D object] - The [page:Object3D] to display at this level.<br />
[page:Float distance] - The distance at which to display this level of detail.<br /><br />
......
......@@ -92,6 +92,15 @@
Default is *true*.
</p>
<h3>[property:Boolean debug.checkShaderErrors]</h3>
<p>
If [page:.checkShaderErrors checkShaderErrors] is true, defines whether material shader programs are checked
for errors during compilation and linkage process. It may be useful to disable this check in production for performance gain.
It is strongly recommended to keep these checks enabled during development.
If the shader does not compile and link - it will not work and associated material will not render.
Default is *true*.
</p>
<h3>[property:Object capabilities]</h3>
<p>
An object containing details about the capabilities of the current [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext RenderingContext].<br />
......@@ -339,7 +348,7 @@
<p>Returns an object that describes the attributes set on the WebGL context when it was created.</p>
<h3>[method:RenderTarget getRenderTarget]()</h3>
<p>Returns the current RenderTarget, if any.</p>
<p>Returns the current [page:RenderTarget RenderTarget] if there are; returns *null* otherwise.</p>
<h3>[method:Vector4 getCurrentViewport]( [param:Vector4 target] )</h3>
<p>
......@@ -429,10 +438,10 @@
<h3>[method:null setRenderTarget]( [param:WebGLRenderTarget renderTarget], [param:Integer activeCubeFace], [param:Integer activeMipMapLevel] )</h3>
<p>
renderTarget -- The [page:WebGLRenderTarget renderTarget] that needs to be activated (optional).<br />
renderTarget -- The [page:WebGLRenderTarget renderTarget] that needs to be activated. When *null* is given, the canvas is set as the active render target instead.<br />
activeCubeFace -- Specifies the active cube side (PX 0, NX 1, PY 2, NY 3, PZ 4, NZ 5) of [page:WebGLRenderTargetCube] (optional).<br />
activeMipMapLevel -- Specifies the active mipmap level (optional).<br /><br />
This method sets the active rendertarget. If the parameter is omitted the canvas is set as the active rendertarget.
This method sets the active rendertarget.
</p>
<h3>[method:null setScissor]( [param:Integer x], [param:Integer y], [param:Integer width], [param:Integer height] )<br />
......
......@@ -187,13 +187,18 @@
<h3>[property:boolean premultiplyAlpha]</h3>
<p>
False by default, which is the norm for PNG images. Set to true if the RGB values have
been stored premultiplied by alpha.
If set to *true*, the alpha channel, if present, is multiplied into the color channels when the texture is uploaded to the GPU. Defaut is *false*.<br /><br />
Note that this property has no effect for [link:https://developer.mozilla.org/de/docs/Web/API/ImageBitmap ImageBitmap].
You need to configure on bitmap creation instead. See [page:ImageBitmapLoader].
</p>
<h3>[property:boolean flipY]</h3>
<p>
True by default. Flips the image's Y axis to match the WebGL texture coordinate space.
If set to *true*, the texture is flipped along the vertical axis when uploaded to the GPU. Default is *true*.<br /><br />
Note that this property has no effect for [link:https://developer.mozilla.org/de/docs/Web/API/ImageBitmap ImageBitmap].
You need to configure on bitmap creation instead. See [page:ImageBitmapLoader].
</p>
<h3>[property:number unpackAlignment]</h3>
......
......@@ -44,7 +44,7 @@
</p>
<h3>[property:Material customDistanceMaterial]</h3>
<p>customDepthMaterial相同,但与[page:PointLight]一起使用。默认值为*undefined*。
<p>[page:.customDepthMaterial customDepthMaterial]相同,但与[page:PointLight]一起使用。默认值为*undefined*。
</p>
<h3>[property:Boolean frustumCulled]</h3>
......
<!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>
[page:Material] &rarr;
<h1>[name]</h1>
<p class="desc">
TODO
</p>
<h2>Example</h2>
[example:webgl_shadowmap_pointlight WebGL / shadowmap / pointlight]
<script>
// iOS iframe auto-resize workaround
if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {
var scene = document.getElementById( 'scene' );
scene.style.width = getComputedStyle( scene ).width;
scene.style.height = getComputedStyle( scene ).height;
scene.setAttribute( 'scrolling', 'no' );
}
</script>
<h2>构造函数(Constructor)</h2>
<h3>[name]( [param:Object parameters] )</h3>
<p>[page:Object parameters] - (可选)用于定义材质外观的对象,具有一个或多个属性。
材质的任何属性都可以从此处传入(包括从[page:Material]继承的任何属性)。
</p>
<h2>属性(Properties)</h2>
<p>常用属性请参见基类[page:Material]。</p>
<h3>[property:Texture alphaMap]</h3>
<p>alpha贴图是一种灰度纹理,用于控制整个表面的不透明度(黑色:完全透明;白色:完全不透明)。默认值为null。<br /><br />
仅使用纹理的颜色,忽略alpha通道(如果存在)。对于RGB和RGBA纹理,[page:WebGLRenderer WebGL]渲染器在采样此纹理时将使用绿色通道,
因为在DXT压缩和未压缩RGB 565格式中为绿色提供了额外的精度。Luminance-only以及luminance/alpha纹理也仍然有效。
</p>
<h3>[property:Texture displacementMap]</h3>
<p> 位移贴图会影响网格顶点的位置,与仅影响材质的光照和阴影的其他贴图不同,移位的顶点可以投射阴影,阻挡其他对象,以及充当真实的几何体。
位移纹理是指:网格的所有顶点被映射为图像中每个像素的值(白色是最高的),并且被重定位。
</p>
<h3>[property:Float displacementScale]</h3>
<p>位移贴图对网格的影响程度(黑色是无位移,白色是最大位移)。如果没有设置位移贴图,则不会应用此值。默认值为1。
</p>
<h3>[property:Float displacementBias]</h3>
<p> 位移贴图在网格顶点上的偏移量。如果没有设置位移贴图,则不会应用此值。默认值为0。
</p>
<h3>[property:Float farDistance]</h3>
<p>
TODO
</p>
<h3>[property:Boolean fog]</h3>
<p> 材质是否受雾影响。默认值为*false*。</p>
<h3>[property:Boolean isMeshDistanceMaterial]</h3>
<p> 用于检查此类或派生类是否为深度网格材质。默认值为 *true*。<br /><br />
因为其通常用在内部优化,所以不应该更改该属性值。
</p>
<h3>[property:Boolean lights]</h3>
<p>材质是否受到光照的影响。默认值为 *false*。</p>
<h3>[property:Texture map]</h3>
<p>颜色贴图。默认为null。</p>
<h3>[property:boolean morphTargets]</h3>
<p>材质是否使用morphTargets。默认值为false。</p>
<h3>[property:Float nearDistance]</h3>
<p>
TODO
</p>
<h3>[property:Vector3 referencePosition]</h3>
<p>
TODO
</p>
<h3>[property:Boolean skinning]</h3>
<p>材质是否使用蒙皮。默认值为false。</p>
<h2>方法(Methods)</h2>
<p>常用方法请参见基类[page:Material]。</p>
<h2>源码(Source)</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
<!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>
[page:Material] &rarr;
<h1>[name]</h1>
<p class="desc">
TODO
</p>
<iframe id="scene" src="scenes/material-browser.html#MeshMatcapMaterial"></iframe>
<script>
// iOS iframe auto-resize workaround
if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {
var scene = document.getElementById( 'scene' );
scene.style.width = getComputedStyle( scene ).width;
scene.style.height = getComputedStyle( scene ).height;
scene.setAttribute( 'scrolling', 'no' );
}
</script>
<h2>构造函数(Constructor)</h2>
<h3>[name]( [param:Object parameters] )</h3>
<p>[page:Object parameters] - (可选)用于定义材质外观的对象,具有一个或多个属性。
材质的任何属性都可以从此处传入(包括从[page:Material]继承的任何属性)。<br /><br />
属性[page:Hexadecimal color]例外,其可以作为十六进制字符串传递,默认情况下为 *0xffffff*(白色),内部调用[page:Color.set](color)。
</p>
<h2>属性(Properties)</h2>
<p>常用属性请参见基类[page:Material]。</p>
<h3>[property:Texture alphaMap]</h3>
<p>Talpha贴图是一种灰度纹理,用于控制整个表面的不透明度(黑色:完全透明;白色:完全不透明)。默认值为null。<br /><br />
仅使用纹理的颜色,忽略alpha通道(如果存在)。对于RGB和RGBA纹理,[page:WebGLRenderer WebGL]渲染器在采样此纹理时将使用绿色通道,
因为在DXT压缩和未压缩RGB 565格式中为绿色提供了额外的精度。Luminance-only以及luminance/alpha纹理也仍然有效。
</p>
<h3>[property:Texture bumpMap]</h3>
<p> 用于创建凹凸贴图的纹理。黑色和白色值映射到与光照相关的感知深度。凹凸实际上不会影响对象的几何形状,只影响光照。如果定义了法线贴图,则将忽略该贴图。
</p>
<h3>[property:Float bumpScale]</h3>
<p> 凹凸贴图会对材质产生多大影响。典型范围是0-1。默认值为1。</p>
<h3>[property:Color color]</h3>
<p>材质的颜色([page:Color]),默认值为白色 (0xffffff)。</p>
<h3>[property:Texture displacementMap]</h3>
<p> 位移贴图会影响网格顶点的位置,与仅影响材质的光照和阴影的其他贴图不同,移位的顶点可以投射阴影,阻挡其他对象,
以及充当真实的几何体。位移纹理是指:网格的所有顶点被映射为图像中每个像素的值(白色是最高的),并且被重定位。
</p>
<h3>[property:Float displacementScale]</h3>
<p> 位移贴图对网格的影响程度(黑色是无位移,白色是最大位移)。如果没有设置位移贴图,则不会应用此值。默认值为1。
</p>
<h3>[property:Float displacementBias]</h3>
<p>
位移贴图在网格顶点上的偏移量。如果没有设置位移贴图,则不会应用此值。默认值为0。
</p>
<h3>[property:Boolean isMeshMatcapMaterial]</h3>
<p>TODO<br /><br />
因为其通常用在内部优化,所以不应该更改该属性值。
</p>
<h3>[property:Texture map]</h3>
<p>颜色贴图。默认为null。纹理贴图颜色由漫反射颜色[page:.color]调节。</p>
<h3>[property:Texture matcap]</h3>
<p>TODO</p>
<h3>[property:boolean morphNormals]</h3>
<p> 定义是否使用morphNormals。设置为true可将morphNormal属性从[page:Geometry]传递到shader。默认值为*false*。
</p>
<h3>[property:Boolean morphTargets]</h3>
<p>定义材质是否使用morphTargets。默认值为false。</p>
<h3>[property:Texture normalMap]</h3>
<p> 用于创建法线贴图的纹理。RGB值会影响每个像素片段的曲面法线,并更改颜色照亮的方式。法线贴图不会改变曲面的实际形状,只会改变光照。
</p>
<h3>[property:Integer normalMapType]</h3>
<p> 法线贴图的类型。<br /><br />
选项为[page:constant THREE.TangentSpaceNormalMap](默认)和[page:constant THREE.ObjectSpaceNormalMap]。
</p>
<h3>[property:Vector2 normalScale]</h3>
<p> 法线贴图对材质的影响程度。典型范围是0-1。默认值是[page:Vector2]设置为(1,1)。
</p>
<h3>[property:Boolean skinning]</h3>
<p>材质是否使用蒙皮。默认值为false。</p>
<h2>方法(Methods)</h2>
<p>常用方法请参见基类[page:Material]。</p>
<h2>源码(Source)</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
......@@ -42,6 +42,27 @@
<h2>属性(Properties)</h2>
<p>常用属性请参见基类[page:Material]。</p>
<h3>[property:Texture bumpMap]</h3>
<p> 用于创建凹凸贴图的纹理。黑色和白色值映射到与光照相关的感知深度。凹凸实际上不会影响对象的几何形状,只影响光照。如果定义了法线贴图,则将忽略该贴图。
</p>
<h3>[property:Float bumpScale]</h3>
<p> 凹凸贴图会对材质产生多大影响。典型范围是0-1。默认值为1。</p>
<h3>[property:Texture displacementMap]</h3>
<p> 位移贴图会影响网格顶点的位置,与仅影响材质的光照和阴影的其他贴图不同,移位的顶点可以投射阴影,阻挡其他对象,
以及充当真实的几何体。位移纹理是指:网格的所有顶点被映射为图像中每个像素的值(白色是最高的),并且被重定位。
</p>
<h3>[property:Float displacementScale]</h3>
<p> 位移贴图对网格的影响程度(黑色是无位移,白色是最大位移)。如果没有设置位移贴图,则不会应用此值。默认值为1。
</p>
<h3>[property:Float displacementBias]</h3>
<p>
位移贴图在网格顶点上的偏移量。如果没有设置位移贴图,则不会应用此值。默认值为0。
</p>
<h3>[property:Boolean fog]</h3>
<p>材质是否受雾影响。默认值为*false*。</p>
......@@ -54,9 +75,29 @@
<h3>[property:Boolean lights]</h3>
<p>材质是否受到光照的影响。默认值为 *false*。</p>
<h3>[property:boolean morphTargets]</h3>
<h3>[property:boolean morphNormals]</h3>
<p> 定义是否使用morphNormals。设置为true可将morphNormal属性从[page:Geometry]传递到shader。默认值为*false*。
</p>
<h3>[property:Boolean morphTargets]</h3>
<p>定义材质是否使用morphTargets。默认值为false。</p>
<h3>[property:Texture normalMap]</h3>
<p> 用于创建法线贴图的纹理。RGB值会影响每个像素片段的曲面法线,并更改颜色照亮的方式。法线贴图不会改变曲面的实际形状,只会改变光照。
</p>
<h3>[property:Integer normalMapType]</h3>
<p> 法线贴图的类型。<br /><br />
选项为[page:constant THREE.TangentSpaceNormalMap](默认)和[page:constant THREE.ObjectSpaceNormalMap]。
</p>
<h3>[property:Vector2 normalScale]</h3>
<p> 法线贴图对材质的影响程度。典型范围是0-1。默认值是[page:Vector2]设置为(1,1)。
</p>
<h3>[property:Boolean skinning]</h3>
<p>材质是否使用蒙皮。默认值为false。</p>
<h3>[property:boolean wireframe]</h3>
<p>
将几何体渲染为线框。默认值为*false*(即渲染为平滑着色)。
......
......@@ -14,7 +14,7 @@
<div class="desc">[page:MeshPhongMaterial]卡通着色的扩展。</div>
<!-- <iframe id="scene" src="scenes/material-browser.html#MeshStandardMaterial"></iframe>
<iframe id="scene" src="scenes/material-browser.html#MeshToonMaterial"></iframe>
<script>
......@@ -30,7 +30,7 @@
}
</script> -->
</script>
<h2>例子(Examples)</h2>
[example:webgl_materials_variations_toon materials / variations / toon]<br />
......
......@@ -69,7 +69,7 @@ scene.add( lod );
<h2>方法</h2>
<p>请参阅其基类[page:Object3D]来查看共有方法。</p>
<h3>[method:null addLevel]( [param:Object3D object], [param:Float distance] )</h3>
<h3>[method:this addLevel]( [param:Object3D object], [param:Float distance] )</h3>
<p>
[page:Object3D object] —— 在这个层次中将要显示的[page:Object3D]。<br />
[page:Float distance] —— 将显示这一细节层次的距离。<br /><br />
......
......@@ -79,6 +79,15 @@
默认是*true*
</p>
<h3>[property:Boolean debug.checkShaderErrors]</h3>
<p>
如果[page:.checkShaderErrors checkShaderErrors]为true,定义是否检查材质着色器程序
编译和链接过程中的错误。 禁用此检查生产以获得性能增益可能很有用。
强烈建议在开发期间保持启用这些检查。
如果着色器没有编译和链接 - 它将无法工作,并且相关材料将不会呈现。
默认是*true*
</p>
<h3>[property:Object capabilities]</h3>
<p>
一个包含当前渲染环境([link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext RenderingContext])的功能细节的对象。<br />
......
......@@ -188,11 +188,15 @@
<p>
默认为false,这是PNG图像的规范。
如果RGB值已被Alpha预乘,请将其设为true。
Note that this property has no effect for [link:https://developer.mozilla.org/de/docs/Web/API/ImageBitmap ImageBitmap].
You need to configure on bitmap creation instead. See [page:ImageBitmapLoader].
</p>
<h3>[property:boolean flipY]</h3>
<p>
默认为true。翻转图像的Y轴以匹配WebGL纹理坐标空间。
Note that this property has no effect for [link:https://developer.mozilla.org/de/docs/Web/API/ImageBitmap ImageBitmap].
You need to configure on bitmap creation instead. See [page:ImageBitmapLoader].
</p>
<h3>[property:number unpackAlignment]</h3>
......
......@@ -24,9 +24,9 @@
<h2>Properties</h2>
<h3>[property:Float tolerance]</h3>
<h3>[property:VertexList assigned]</h3>
<p>
The epsilon value that is used for internal comparative operations. The calculation of this value depends on the size of the geometry. Default is -1.
This [page:VertexList vertex list] holds all vertices that are assigned to a face. Default is an empty vertex list.
</p>
<h3>[property:Array faces]</h3>
......@@ -39,9 +39,9 @@
This array holds the faces that are generated within a single iteration. Default is an empty array.
</p>
<h3>[property:VertexList assigned]</h3>
<h3>[property:Float tolerance]</h3>
<p>
This [page:VertexList vertex list] holds all vertices that are assigned to a face. Default is an empty vertex list.
The epsilon value that is used for internal comparative operations. The calculation of this value depends on the size of the geometry. Default is -1.
</p>
<h3>[property:VertexList unassigned]</h3>
......@@ -56,20 +56,18 @@
<h2>Methods</h2>
<h3>[method:QuickHull setFromPoints]( [param:Array points] )</h3>
[page:Array points] - Array of [page:Vector3 Vector3s] that the resulting convex hull will contain.<br /><br />
<p>Computes to convex hull for the given array of points.</p>
<h3>[method:QuickHull setFromObject]( [param:Object3D object] )</h3>
[page:Object3D object] - [page:Object3D] to compute the convex hull of.<br /><br />
<h3>[method:HalfEdge addAdjoiningFace]( [param:VertexNode eyeVertex], [param:HalfEdge horizonEdge] )</h3>
[page:VertexNode eyeVertex] - The vertex that is added to the hull.<br /><br />
[page:HalfEdge horizonEdge] - A single edge of the horizon.<br /><br />
<p>Computes the convex hull of an [page:Object3D] (including its children),
accounting for the world transforms of both the object and its childrens.</p>
<p>Creates a face with the vertices 'eyeVertex.point', 'horizonEdge.tail' and 'horizonEdge.head' in CCW order.
All the half edges are created in CCW order thus the face is always pointing outside the hull</p>
<h3>[method:QuickHull makeEmpty]()</h3>
<h3>[method:QuickHull addNewFaces]( [param:VertexNode eyeVertex], [param:HalfEdge horizonEdge] )</h3>
[page:VertexNode eyeVertex] - The vertex that is added to the hull.<br /><br />
[page:HalfEdge horizon] - An array of half-edges that form the horizon.<br /><br />
<p>Makes this convex hull empty.</p>
<p>Adds 'horizon.length' faces to the hull, each face will be linked with the horizon opposite face and the face on the left/right.</p>
<h3>[method:QuickHull addVertexToFace]( [param:VertexNode vertex], [param:Face face] )</h3>
[page:VertexNodeNode vertex] - The vertex to add.<br /><br />
......@@ -77,16 +75,46 @@
<p>Adds a vertex to the 'assigned' list of vertices and assigns it to the given face.</p>
<h3>[method:QuickHull removeVertexFromFace]( [param:VertexNode vertex], [param:Face face] )</h3>
[page:VertexNode vertex] - The vertex to remove.<br /><br />
[page:Face face] - The target face.<br /><br />
<h3>[method:QuickHull addVertexToHull]( [param:VertexNode eyeVertex] )</h3>
[page:VertexNode eyeVertex] - The vertex that is added to the hull.<br /><br />
<p>Removes a vertex from the 'assigned' list of vertices and from the given face. It also makes sure that the link from 'face' to the first vertex it sees in 'assigned' is linked correctly after the removal.</p>
<p>Adds a vertex to the hull with the following algorithm
<ul>
<li>Compute the 'horizon' which is a chain of half edges. For an edge to belong to this group it must be the edge connecting a face that can see 'eyeVertex' and a face which cannot see 'eyeVertex'.</li>
<li>All the faces that can see 'eyeVertex' have its visible vertices removed from the assigned vertex list.</li>
<li>A new set of faces is created with each edge of the 'horizon' and 'eyeVertex'. Each face is connected with the opposite horizon face and the face on the left/right.</li>
<li>The vertices removed from all the visible faces are assigned to the new faces if possible.</li>
</ul>
</p>
<h3>[method:VertexNode removeAllVerticesFromFace]( [param:Face face] )</h3>
[page:Face face] - The given face.<br /><br />
<h3>[method:QuickHull cleanup]()</h3>
<p>Removes all the visible vertices that a given face is able to see which are stored in the 'assigned' vertext list.</p>
<p>Cleans up internal properties after computing the convex hull.</p>
<h3>[method:QuickHull compute]()</h3>
<p>Starts the execution of the quick hull algorithm.</p>
<h3>[method:Object computeExtremes]()</h3>
<p>Computes the extremes values (min/max vectors) which will be used to compute the inital hull.</p>
<h3>[method:QuickHull computeHorizon]( [param:Vector3 eyePoint], [param:HalfEdge crossEdge], [param:Face face], [param:Array horizon] )</h3>
[page:Vector3 eyePoint] - The 3D-coordinates of a point.<br /><br />
[page:HalfEdge crossEdge] - The edge used to jump to the current face.<br /><br />
[page:Face face] - The current face being tested.<br /><br />
[page:Array horizon] - The edges that form part of the horizon in CCW order.<br /><br />
<p>Computes a chain of half edges in CCW order called the 'horizon'. For an edge to be part of the horizon it must join a face that can see 'eyePoint' and a face that cannot see 'eyePoint'.</p>
<h3>[method:QuickHull computeInitialHull]()</h3>
<p>Computes the initial simplex assigning to its faces all the points that are candidates to form part of the hull.</p>
<h3>[method:QuickHull containsPoint]( [param:Vector3 point] )</h3>
[page:Vector3 point] - A point in 3D space.<br /><br />
<p>Returns *true* if the given point is inside this convex hull.</p>
<h3>[method:QuickHull deleteFaceVertices]( [param:Face face], [param:Face absorbingFace] )</h3>
[page:Face face] - The given face.<br /><br />
......@@ -100,22 +128,20 @@
</ul>
</p>
<h3>[method:QuickHull resolveUnassignedPoints]( [param:Array newFaces] )</h3>
[page:Face newFaces] - An array of new faces.<br /><br />
<h3>[method:Vector3 intersectRay]( [param:Ray ray], [param:Vector3 target] )</h3>
[page:Ray ray] - The given ray.<br /><br />
[page:Vector3 target] - The target vector representing the intersection point.<br /><br />
<p>Reassigns as many vertices as possible from the unassigned list to the new faces.</p>
<p>Performs a ray intersection test with this convext hull. If no intersection is found, *null* is returned.</p>
<h3>[method:Object computeExtremes]()</h3>
<h3>[method:Boolean intersectsRay]( [param:Ray ray] )</h3>
[page:Ray ray] - The given ray.<br /><br />
<p>Computes the extremes values (min/max vectors) which will be used to compute the inital hull.</p>
<p>Returns *true* if the given ray intersects with this convex hull.</p>
<h3>[method:QuickHull computeInitialHull]()</h3>
<p>Computes the initial simplex assigning to its faces all the points that are candidates to form part of the hull.</p>
<h3>[method:QuickHull reindexFaces]()</h3>
<h3>[method:QuickHull makeEmpty]()</h3>
<p>Removes inactive (e.g. deleted) faces from the internal face list.</p>
<p>Makes this convex hull empty.</p>
<h3>[method:VertexNode nextVertexToAdd]()</h3>
......@@ -127,46 +153,36 @@
</ul>
</p>
<h3>[method:QuickHull computeHorizon]( [param:Vector3 eyePoint], [param:HalfEdge crossEdge], [param:Face face], [param:Array horizon] )</h3>
[page:Vector3 eyePoint] - The 3D-coordinates of a point.<br /><br />
[page:HalfEdge crossEdge] - The edge used to jump to the current face.<br /><br />
[page:Face face] - The current face being tested.<br /><br />
[page:Array horizon] - The edges that form part of the horizon in CCW order.<br /><br />
<h3>[method:QuickHull reindexFaces]()</h3>
<p>Computes a chain of half edges in CCW order called the 'horizon'. For an edge to be part of the horizon it must join a face that can see 'eyePoint' and a face that cannot see 'eyePoint'.</p>
<p>Removes inactive (e.g. deleted) faces from the internal face list.</p>
<h3>[method:HalfEdge addAdjoiningFace]( [param:VertexNode eyeVertex], [param:HalfEdge horizonEdge] )</h3>
[page:VertexNode eyeVertex] - The vertex that is added to the hull.<br /><br />
[page:HalfEdge horizonEdge] - A single edge of the horizon.<br /><br />
<h3>[method:VertexNode removeAllVerticesFromFace]( [param:Face face] )</h3>
[page:Face face] - The given face.<br /><br />
<p>Creates a face with the vertices 'eyeVertex.point', 'horizonEdge.tail' and 'horizonEdge.head' in CCW order.
All the half edges are created in CCW order thus the face is always pointing outside the hull</p>
<p>Removes all the visible vertices that a given face is able to see which are stored in the 'assigned' vertext list.</p>
<h3>[method:QuickHull addNewFaces]( [param:VertexNode eyeVertex], [param:HalfEdge horizonEdge] )</h3>
[page:VertexNode eyeVertex] - The vertex that is added to the hull.<br /><br />
[page:HalfEdge horizon] - An array of half-edges that form the horizon.<br /><br />
<h3>[method:QuickHull removeVertexFromFace]( [param:VertexNode vertex], [param:Face face] )</h3>
[page:VertexNode vertex] - The vertex to remove.<br /><br />
[page:Face face] - The target face.<br /><br />
<p>Adds 'horizon.length' faces to the hull, each face will be linked with the horizon opposite face and the face on the left/right.</p>
<p>Removes a vertex from the 'assigned' list of vertices and from the given face. It also makes sure that the link from 'face' to the first vertex it sees in 'assigned' is linked correctly after the removal.</p>
<h3>[method:QuickHull addVertexToHull]( [param:VertexNode eyeVertex] )</h3>
[page:VertexNode eyeVertex] - The vertex that is added to the hull.<br /><br />
<h3>[method:QuickHull resolveUnassignedPoints]( [param:Array newFaces] )</h3>
[page:Face newFaces] - An array of new faces.<br /><br />
<p>Adds a vertex to the hull with the following algorithm
<ul>
<li>Compute the 'horizon' which is a chain of half edges. For an edge to belong to this group it must be the edge connecting a face that can see 'eyeVertex' and a face which cannot see 'eyeVertex'.</li>
<li>All the faces that can see 'eyeVertex' have its visible vertices removed from the assigned vertex list.</li>
<li>A new set of faces is created with each edge of the 'horizon' and 'eyeVertex'. Each face is connected with the opposite horizon face and the face on the left/right.</li>
<li>The vertices removed from all the visible faces are assigned to the new faces if possible.</li>
</ul>
</p>
<p>Reassigns as many vertices as possible from the unassigned list to the new faces.</p>
<h3>[method:QuickHull cleanup]()</h3>
<h3>[method:QuickHull setFromObject]( [param:Object3D object] )</h3>
[page:Object3D object] - [page:Object3D] to compute the convex hull of.<br /><br />
<p>Cleans up internal properties after computing the convex hull.</p>
<p>Computes the convex hull of an [page:Object3D] (including its children),
accounting for the world transforms of both the object and its childrens.</p>
<h3>[method:QuickHull compute]()</h3>
<h3>[method:QuickHull setFromPoints]( [param:Array points] )</h3>
[page:Array points] - Array of [page:Vector3 Vector3s] that the resulting convex hull will contain.<br /><br />
<p>Starts the execution of the quick hull algorithm.</p>
<p>Computes to convex hull for the given array of points.</p>
<h2>Source</h2>
......
......@@ -5,6 +5,7 @@
<title>three.js / documentation</title>
<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="index.css">
<link rel="shortcut icon" href="../favicon.ico" />
</head>
<body>
<script type="text/javascript">
......
......@@ -253,7 +253,9 @@ var list = {
"Material": "api/en/materials/Material",
"MeshBasicMaterial": "api/en/materials/MeshBasicMaterial",
"MeshDepthMaterial": "api/en/materials/MeshDepthMaterial",
"MeshDistanceMaterial": "api/en/materials/MeshDistanceMaterial",
"MeshLambertMaterial": "api/en/materials/MeshLambertMaterial",
"MeshMatcapMaterial": "api/en/materials/MeshMatcapMaterial",
"MeshNormalMaterial": "api/en/materials/MeshNormalMaterial",
"MeshPhongMaterial": "api/en/materials/MeshPhongMaterial",
"MeshPhysicalMaterial": "api/en/materials/MeshPhysicalMaterial",
......@@ -683,7 +685,9 @@ var list = {
"Material": "api/zh/materials/Material",
"MeshBasicMaterial": "api/zh/materials/MeshBasicMaterial",
"MeshDepthMaterial": "api/zh/materials/MeshDepthMaterial",
"MeshDistanceMaterial": "api/zh/materials/MeshDistanceMaterial",
"MeshLambertMaterial": "api/zh/materials/MeshLambertMaterial",
"MeshMatcapMaterial": "api/zh/materials/MeshMatcapMaterial",
"MeshNormalMaterial": "api/zh/materials/MeshNormalMaterial",
"MeshPhongMaterial": "api/zh/materials/MeshPhongMaterial",
"MeshPhysicalMaterial": "api/zh/materials/MeshPhysicalMaterial",
......
......@@ -54,6 +54,13 @@
for realizing custom rendering destinations. These objects are only deallocated by executing [page:WebGLRenderTarget.dispose]().
</p>
<h2>Scenes</h2>
<p>
The renderer maintains for scenes special data structures for sorting and rendering. If for some reasons a scene object becomes obsolete in an application,
call [page:Scene.dispose]() in order to free these resources.
</p>
<h2>Miscellaneous</h2>
<p>
......@@ -91,7 +98,7 @@
nothing happens. No resources were allocated so there is also no need for clean up.
</p>
<h3>Why happens when you call *dispose()* on a texture but the image is not loaded yet?</h3>
<h3>What happens when you call *dispose()* on a texture but the image is not loaded yet?</h3>
<p>
Internal resources for a texture are only allocated if the image has fully loaded. If you dispose a texture before the image was loaded,
......
......@@ -62,11 +62,72 @@
...
</code>
<h2>Caveats</h2>
<h2>Importable Examples</h2>
<p>
The core of three.js is focused on the most important components of a 3D engine. Many other components like loaders or controls are part of the
examples directory. three.js ensures that these files are kept in sync with the core but users have to import them separately if they are required
for their project. However, most of these files are not modules which makes their usage in certain cases inconvenient. In order to address this issue,
we are working to provide all the examples as modules in the [link:https://github.com/mrdoob/three.js/tree/master/examples/jsm examples/jsm] directory.
If you install three.js via npm, you can import them like so:
</p>
<code>
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
</code>
<p>
The following examples files are already available as modules:
<ul>
<li>controls
<ul>
<li>MapControls</li>
<li>OrbitControls</li>
<li>TrackballControls</li>
</ul>
</li>
<li>exporters
<ul>
<li>ColladaExporter</li>
<li>GLTFExporter</li>
<li>MMDExporter</li>
<li>OBJExporter</li>
<li>PLYExporter</li>
<li>STLExporter</li>
<li>TypedGeometryExporter</li>
</ul>
</li>
<li>loaders
<ul>
<li>GLTFLoader</li>
<li>MTLLoader</li>
<li>OBJLoader</li>
<li>STLLoader</li>
</ul>
</li>
<li>pmrem
<ul>
<li>PMREMCubeUVPacker</li>
<li>PMREMGenerator</li>
</ul>
</li>
<li>utils
<ul>
<li>BufferGeometryUtils</li>
<li>GeometryUtils</li>
<li>MathUtils</li>
<li>SceneUtils</li>
<li>ShadowMapViewer</li>
<li>SkeletonUtils</li>
<li>TypedArrayUtils</li>
<li>UVsDebug</li>
</ul>
</li>
</ul>
</p>
<p>
Currently it's not possible to import the files within the "examples/js" directory in this way.
This is due to some of the files relying on global namespace pollution of THREE. For more information see <a href="https://github.com/mrdoob/three.js/issues/9562" target="_blank">Transform `examples/js` to support modules #9562</a>.
Note: When using code from the examples directory, it's important that all files match the version of
your three.js main file. For example it's no good approach to use *GLTFLoader* and *OrbitControls* from R96 together
with three.js R103. You can easily keep your files in sync by using the modules from the JSM directory. If the file
is not available as a module, you can still use third-party npm packages or convert the file to a module by yourself.
In both cases, ensure the code is compatible with your three.js main file.
</p>
</body>
</html>
......@@ -860,6 +860,7 @@ var guis = {
bevelEnabled: false,
bevelThickness: 1,
bevelSize: 0.5,
bevelOffset: 0.0,
bevelSegments: 3
};
......@@ -887,6 +888,7 @@ var guis = {
bevelEnabled: data.bevelEnabled,
bevelThickness: data.bevelThickness,
bevelSize: data.bevelSize,
bevelOffset: data.bevelOffset,
bevelSegments: data.bevelSegments
} );
geometry.center();
......@@ -910,7 +912,8 @@ var guis = {
folder.add( data, 'weight', weights ).onChange( generateGeometry );
folder.add( data, 'bevelEnabled' ).onChange( generateGeometry );
folder.add( data, 'bevelThickness', 0.1, 3 ).onChange( generateGeometry );
folder.add( data, 'bevelSize', 0.1, 3 ).onChange( generateGeometry );
folder.add( data, 'bevelSize', 0, 3 ).onChange( generateGeometry );
folder.add( data, 'bevelOffset', -0.5, 1.5 ).onChange( generateGeometry );
folder.add( data, 'bevelSegments', 0, 8 ).step( 1 ).onChange( generateGeometry );
generateGeometry();
......@@ -929,6 +932,7 @@ var guis = {
bevelEnabled: false,
bevelThickness: 1,
bevelSize: 0.5,
bevelOffset: 0.0,
bevelSegments: 3
};
......@@ -956,6 +960,7 @@ var guis = {
bevelEnabled: data.bevelEnabled,
bevelThickness: data.bevelThickness,
bevelSize: data.bevelSize,
bevelOffset: data.bevelOffset,
bevelSegments: data.bevelSegments
} );
geometry.center();
......@@ -979,7 +984,8 @@ var guis = {
folder.add( data, 'weight', weights ).onChange( generateGeometry );
folder.add( data, 'bevelEnabled' ).onChange( generateGeometry );
folder.add( data, 'bevelThickness', 0.1, 3 ).onChange( generateGeometry );
folder.add( data, 'bevelSize', 0.1, 3 ).onChange( generateGeometry );
folder.add( data, 'bevelSize', 0, 3 ).onChange( generateGeometry );
folder.add( data, 'bevelOffset', -0.5, 1.5 ).onChange( generateGeometry );
folder.add( data, 'bevelSegments', 0, 8 ).step( 1 ).onChange( generateGeometry );
generateGeometry();
......@@ -1276,6 +1282,7 @@ var guis = {
bevelEnabled: true,
bevelThickness: 1,
bevelSize: 1,
bevelOffset: 0,
bevelSegments: 1
};
......@@ -1302,7 +1309,8 @@ var guis = {
folder.add( data, 'steps', 1, 10 ).step( 1 ).onChange( generateGeometry );
folder.add( data, 'depth', 1, 20 ).onChange( generateGeometry );
folder.add( data, 'bevelThickness', 1, 5 ).step( 1 ).onChange( generateGeometry );
folder.add( data, 'bevelSize', 1, 5 ).step( 1 ).onChange( generateGeometry );
folder.add( data, 'bevelSize', 0, 5 ).step( 1 ).onChange( generateGeometry );
folder.add( data, 'bevelOffset', -4, 5 ).step( 1 ).onChange( generateGeometry );
folder.add( data, 'bevelSegments', 1, 5 ).step( 1 ).onChange( generateGeometry );
generateGeometry();
......@@ -1317,6 +1325,7 @@ var guis = {
bevelEnabled: true,
bevelThickness: 1,
bevelSize: 1,
bevelOffset: 0,
bevelSegments: 1
};
......@@ -1343,7 +1352,8 @@ var guis = {
folder.add( data, 'steps', 1, 10 ).step( 1 ).onChange( generateGeometry );
folder.add( data, 'depth', 1, 20 ).onChange( generateGeometry );
folder.add( data, 'bevelThickness', 1, 5 ).step( 1 ).onChange( generateGeometry );
folder.add( data, 'bevelSize', 1, 5 ).step( 1 ).onChange( generateGeometry );
folder.add( data, 'bevelSize', 0, 5 ).step( 1 ).onChange( generateGeometry );
folder.add( data, 'bevelOffset', -4, 5 ).step( 1 ).onChange( generateGeometry );
folder.add( data, 'bevelSegments', 1, 5 ).step( 1 ).onChange( generateGeometry );
generateGeometry();
......
......@@ -87,6 +87,9 @@ function getObjectsKeys( obj ) {
}
var textureLoader = new THREE.TextureLoader();
var cubeTextureLoader = new THREE.CubeTextureLoader();
var envMaps = ( function () {
var path = '../../examples/textures/cube/SwedishRoyalCastle/';
......@@ -97,10 +100,10 @@ var envMaps = ( function () {
path + 'pz' + format, path + 'nz' + format
];
var reflectionCube = new THREE.CubeTextureLoader().load( urls );
var reflectionCube = cubeTextureLoader.load( urls );
reflectionCube.format = THREE.RGBFormat;
var refractionCube = new THREE.CubeTextureLoader().load( urls );
var refractionCube = cubeTextureLoader.load( urls );
refractionCube.mapping = THREE.CubeRefractionMapping;
refractionCube.format = THREE.RGBFormat;
......@@ -112,18 +115,81 @@ var envMaps = ( function () {
} )();
var envMapKeys = getObjectsKeys( envMaps );
var diffuseMaps = ( function () {
var bricks = textureLoader.load( '../../examples/textures/brick_diffuse.jpg' );
bricks.wrapS = THREE.RepeatWrapping;
bricks.wrapT = THREE.RepeatWrapping;
bricks.repeat.set( 9, 1 );
return {
none: null,
bricks: bricks
};
} )();
var roughnessMaps = ( function () {
var bricks = textureLoader.load( '../../examples/textures/brick_roughness.jpg' );
bricks.wrapT = THREE.RepeatWrapping;
bricks.wrapS = THREE.RepeatWrapping;
bricks.repeat.set( 9, 1 );
return {
none: null,
bricks: bricks
};
} )();
var matcaps = ( function () {
return {
none: null,
porcelainWhite: textureLoader.load( '../../examples/textures/matcaps/matcap-porcelain-white.jpg' )
};
} )();
var textureMaps = ( function () {
var alphaMaps = ( function () {
var fibers = textureLoader.load( '../../examples/textures/alphaMap.jpg' );
fibers.wrapT = THREE.RepeatWrapping;
fibers.wrapS = THREE.RepeatWrapping;
fibers.repeat.set( 9, 1 );
return {
none: null,
grass: new THREE.TextureLoader().load( '../../examples/textures/terrain/grasslight-thin.jpg' )
fibers: fibers
};
} )();
var textureMapKeys = getObjectsKeys( textureMaps );
var gradientMaps = ( function () {
var threeTone = textureLoader.load( '../../examples/textures/gradientMaps/threeTone.jpg' );
threeTone.minFilter = THREE.NearestFilter;
threeTone.magFilter = THREE.NearestFilter;
var fiveTone = textureLoader.load( '../../examples/textures/gradientMaps/fiveTone.jpg' );
fiveTone.minFilter = THREE.NearestFilter;
fiveTone.magFilter = THREE.NearestFilter;
return {
none: null,
threeTone: threeTone,
fiveTone: fiveTone
};
} )();
var envMapKeys = getObjectsKeys( envMaps );
var diffuseMapKeys = getObjectsKeys( diffuseMaps );
var roughnessMapKeys = getObjectsKeys( roughnessMaps );
var matcapKeys = getObjectsKeys( matcaps );
var alphaMapKeys = getObjectsKeys( alphaMaps );
var gradientMapKeys = getObjectsKeys( gradientMaps );
function generateVertexColors( geometry ) {
......@@ -247,7 +313,7 @@ function guiMaterial( gui, mesh, material, geometry ) {
var folder = gui.addFolder( 'THREE.Material' );
folder.add( material, 'transparent' );
folder.add( material, 'opacity', 0, 1 );
folder.add( material, 'opacity', 0, 1 ).step( 0.01 );
// folder.add( material, 'blending', constants.blendingMode );
// folder.add( material, 'blendSrc', constants.destinationFactors );
// folder.add( material, 'blendDst', constants.destinationFactors );
......@@ -257,7 +323,7 @@ function guiMaterial( gui, mesh, material, geometry ) {
// folder.add( material, 'polygonOffset' );
// folder.add( material, 'polygonOffsetFactor' );
// folder.add( material, 'polygonOffsetUnits' );
folder.add( material, 'alphaTest', 0, 1 );
folder.add( material, 'alphaTest', 0, 1 ).step( 0.01 ).onChange( needsUpdate( material, geometry ) );
folder.add( material, 'visible' );
folder.add( material, 'side', constants.side ).onChange( needsUpdate( material, geometry ) );
......@@ -267,10 +333,9 @@ function guiMeshBasicMaterial( gui, mesh, material, geometry ) {
var data = {
color: material.color.getHex(),
envMaps: envMapKeys,
map: textureMapKeys,
specularMap: textureMapKeys,
alphaMap: textureMapKeys
envMaps: envMapKeys[ 0 ],
map: diffuseMapKeys[ 0 ],
alphaMap: alphaMapKeys[ 0 ]
};
var folder = gui.addFolder( 'THREE.MeshBasicMaterial' );
......@@ -282,9 +347,8 @@ function guiMeshBasicMaterial( gui, mesh, material, geometry ) {
folder.add( material, 'fog' );
folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
folder.add( data, 'map', textureMapKeys ).onChange( updateTexture( material, 'map', textureMaps ) );
folder.add( data, 'specularMap', textureMapKeys ).onChange( updateTexture( material, 'specularMap', textureMaps ) );
folder.add( data, 'alphaMap', textureMapKeys ).onChange( updateTexture( material, 'alphaMap', textureMaps ) );
folder.add( data, 'map', diffuseMapKeys ).onChange( updateTexture( material, 'map', diffuseMaps ) );
folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
folder.add( material, 'combine', constants.combine );
folder.add( material, 'reflectivity', 0, 1 );
folder.add( material, 'refractionRatio', 0, 1 );
......@@ -293,11 +357,17 @@ function guiMeshBasicMaterial( gui, mesh, material, geometry ) {
function guiMeshDepthMaterial( gui, mesh, material, geometry ) {
var data = {
alphaMap: alphaMapKeys[ 0 ]
};
var folder = gui.addFolder( 'THREE.MeshDepthMaterial' );
folder.add( material, 'wireframe' );
folder.add( material, 'wireframeLinewidth', 0, 10 );
folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
}
function guiMeshNormalMaterial( gui, mesh, material, geometry ) {
......@@ -332,10 +402,9 @@ function guiMeshLambertMaterial( gui, mesh, material, geometry ) {
var data = {
color: material.color.getHex(),
emissive: material.emissive.getHex(),
envMaps: envMapKeys,
map: textureMapKeys,
specularMap: textureMapKeys,
alphaMap: textureMapKeys
envMaps: envMapKeys[ 0 ],
map: diffuseMapKeys[ 0 ],
alphaMap: alphaMapKeys[ 0 ]
};
var folder = gui.addFolder( 'THREE.MeshLambertMaterial' );
......@@ -349,26 +418,39 @@ function guiMeshLambertMaterial( gui, mesh, material, geometry ) {
folder.add( material, 'fog' );
folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
folder.add( data, 'map', textureMapKeys ).onChange( updateTexture( material, 'map', textureMaps ) );
folder.add( data, 'specularMap', textureMapKeys ).onChange( updateTexture( material, 'specularMap', textureMaps ) );
folder.add( data, 'alphaMap', textureMapKeys ).onChange( updateTexture( material, 'alphaMap', textureMaps ) );
folder.add( data, 'map', diffuseMapKeys ).onChange( updateTexture( material, 'map', diffuseMaps ) );
folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
folder.add( material, 'combine', constants.combine );
folder.add( material, 'reflectivity', 0, 1 );
folder.add( material, 'refractionRatio', 0, 1 );
}
function guiMeshMatcapMaterial( gui, mesh, material ) {
var data = {
color: material.color.getHex(),
matcap: matcapKeys[ 1 ],
alphaMap: alphaMapKeys[ 0 ]
};
var folder = gui.addFolder( 'THREE.MeshMatcapMaterial' );
folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
folder.add( data, 'matcap', matcapKeys ).onChange( updateTexture( material, 'matcap', matcaps ) );
folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
}
function guiMeshPhongMaterial( gui, mesh, material, geometry ) {
var data = {
color: material.color.getHex(),
emissive: material.emissive.getHex(),
specular: material.specular.getHex(),
envMaps: envMapKeys,
map: textureMapKeys,
lightMap: textureMapKeys,
specularMap: textureMapKeys,
alphaMap: textureMapKeys
envMaps: envMapKeys[ 0 ],
map: diffuseMapKeys[ 0 ],
alphaMap: alphaMapKeys[ 0 ]
};
var folder = gui.addFolder( 'THREE.MeshPhongMaterial' );
......@@ -384,10 +466,27 @@ function guiMeshPhongMaterial( gui, mesh, material, geometry ) {
folder.add( material, 'vertexColors', constants.colors ).onChange( needsUpdate( material, geometry ) );
folder.add( material, 'fog' );
folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
folder.add( data, 'map', textureMapKeys ).onChange( updateTexture( material, 'map', textureMaps ) );
folder.add( data, 'lightMap', textureMapKeys ).onChange( updateTexture( material, 'lightMap', textureMaps ) );
folder.add( data, 'specularMap', textureMapKeys ).onChange( updateTexture( material, 'specularMap', textureMaps ) );
folder.add( data, 'alphaMap', textureMapKeys ).onChange( updateTexture( material, 'alphaMap', textureMaps ) );
folder.add( data, 'map', diffuseMapKeys ).onChange( updateTexture( material, 'map', diffuseMaps ) );
folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
}
function guiMeshToonMaterial( gui, mesh, material ) {
var data = {
color: material.color.getHex(),
map: diffuseMapKeys[ 0 ],
gradientMap: gradientMapKeys[ 1 ],
alphaMap: alphaMapKeys[ 0 ]
};
var folder = gui.addFolder( 'THREE.MeshToonMaterial' );
folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
folder.add( data, 'map', diffuseMapKeys ).onChange( updateTexture( material, 'map', diffuseMaps ) );
folder.add( data, 'gradientMap', gradientMapKeys ).onChange( updateTexture( material, 'gradientMap', gradientMaps ) );
folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
}
......@@ -396,11 +495,10 @@ function guiMeshStandardMaterial( gui, mesh, material, geometry ) {
var data = {
color: material.color.getHex(),
emissive: material.emissive.getHex(),
envMaps: envMapKeys,
map: textureMapKeys,
lightMap: textureMapKeys,
specularMap: textureMapKeys,
alphaMap: textureMapKeys
envMaps: envMapKeys[ 0 ],
map: diffuseMapKeys[ 0 ],
roughnessMap: roughnessMapKeys[ 0 ],
alphaMap: alphaMapKeys[ 0 ]
};
var folder = gui.addFolder( 'THREE.MeshStandardMaterial' );
......@@ -416,11 +514,11 @@ function guiMeshStandardMaterial( gui, mesh, material, geometry ) {
folder.add( material, 'vertexColors', constants.colors ).onChange( needsUpdate( material, geometry ) );
folder.add( material, 'fog' );
folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
folder.add( data, 'map', textureMapKeys ).onChange( updateTexture( material, 'map', textureMaps ) );
folder.add( data, 'lightMap', textureMapKeys ).onChange( updateTexture( material, 'lightMap', textureMaps ) );
folder.add( data, 'alphaMap', textureMapKeys ).onChange( updateTexture( material, 'alphaMap', textureMaps ) );
folder.add( data, 'map', diffuseMapKeys ).onChange( updateTexture( material, 'map', diffuseMaps ) );
folder.add( data, 'roughnessMap', roughnessMapKeys ).onChange( updateTexture( material, 'roughnessMap', roughnessMaps ) );
folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
// TODO roughnessMap and metalnessMap
// TODO metalnessMap
}
......@@ -429,11 +527,10 @@ function guiMeshPhysicalMaterial( gui, mesh, material, geometry ) {
var data = {
color: material.color.getHex(),
emissive: material.emissive.getHex(),
envMaps: envMapKeys,
map: textureMapKeys,
lightMap: textureMapKeys,
specularMap: textureMapKeys,
alphaMap: textureMapKeys
envMaps: envMapKeys[ 0 ],
map: diffuseMapKeys[ 0 ],
roughnessMap: roughnessMapKeys[ 0 ],
alphaMap: alphaMapKeys[ 0 ]
};
var folder = gui.addFolder( 'THREE.MeshPhysicalMaterial' );
......@@ -452,11 +549,11 @@ function guiMeshPhysicalMaterial( gui, mesh, material, geometry ) {
folder.add( material, 'vertexColors', constants.colors ).onChange( needsUpdate( material, geometry ) );
folder.add( material, 'fog' );
folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
folder.add( data, 'map', textureMapKeys ).onChange( updateTexture( material, 'map', textureMaps ) );
folder.add( data, 'lightMap', textureMapKeys ).onChange( updateTexture( material, 'lightMap', textureMaps ) );
folder.add( data, 'alphaMap', textureMapKeys ).onChange( updateTexture( material, 'alphaMap', textureMaps ) );
folder.add( data, 'map', diffuseMapKeys ).onChange( updateTexture( material, 'map', diffuseMaps ) );
folder.add( data, 'roughnessMap', roughnessMapKeys ).onChange( updateTexture( material, 'roughnessMap', roughnessMaps ) );
folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
// TODO roughnessMap and metalnessMap
// TODO metalnessMap
}
......@@ -487,6 +584,16 @@ function chooseFromHash( gui, mesh, geometry ) {
break;
case 'MeshMatcapMaterial' :
material = new THREE.MeshMatcapMaterial( { matcap: matcaps.porcelainWhite } );
guiMaterial( gui, mesh, material, geometry );
guiMeshMatcapMaterial( gui, mesh, material, geometry );
return material;
break;
case 'MeshPhongMaterial' :
material = new THREE.MeshPhongMaterial( { color: 0x2194CE } );
......@@ -497,6 +604,21 @@ function chooseFromHash( gui, mesh, geometry ) {
break;
case 'MeshToonMaterial' :
material = new THREE.MeshToonMaterial( { color: 0x2194CE, gradientMap: gradientMaps.threeTone } );
guiMaterial( gui, mesh, material, geometry );
guiMeshToonMaterial( gui, mesh, material, geometry );
// only use a single point light
lights[ 0 ].visible = false;
lights[ 2 ].visible = false;
return material;
break;
case 'MeshStandardMaterial' :
material = new THREE.MeshStandardMaterial( { color: 0x2194CE } );
......
......@@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="apple-touch-icon" href="images/icon.png">
<link rel="manifest" href="manifest.json">
<link rel="shortcut icon" href="../favicon.ico" />
</head>
<body ontouchstart="">
<script type="text/javascript">
......@@ -140,8 +141,11 @@
<script src="js/Sidebar.Geometry.CircleGeometry.js"></script>
<script src="js/Sidebar.Geometry.CylinderGeometry.js"></script>
<script src="js/Sidebar.Geometry.IcosahedronGeometry.js"></script>
<script src="js/Sidebar.Geometry.OctahedronGeometry.js"></script>
<script src="js/Sidebar.Geometry.PlaneGeometry.js"></script>
<script src="js/Sidebar.Geometry.RingGeometry.js"></script>
<script src="js/Sidebar.Geometry.SphereGeometry.js"></script>
<script src="js/Sidebar.Geometry.TetrahedronGeometry.js"></script>
<script src="js/Sidebar.Geometry.TorusGeometry.js"></script>
<script src="js/Sidebar.Geometry.TorusKnotGeometry.js"></script>
<script src="js/Sidebar.Geometry.TubeGeometry.js"></script>
......
......@@ -482,7 +482,11 @@ Editor.prototype = {
focus: function ( object ) {
this.signals.objectFocused.dispatch( object );
if ( object !== undefined ) {
this.signals.objectFocused.dispatch( object );
}
},
......@@ -498,6 +502,8 @@ Editor.prototype = {
this.storage.clear();
this.camera.copy( this.DEFAULT_CAMERA );
this.scene.name = "Scene";
this.scene.userData = {};
this.scene.background.setHex( 0xaaaaaa );
this.scene.fog = null;
......
......@@ -173,7 +173,7 @@ History.prototype = {
// Append Undos to History
for ( var i = 0 ; i < this.undos.length; i ++ ) {
for ( var i = 0; i < this.undos.length; i ++ ) {
if ( this.undos[ i ].hasOwnProperty( "json" ) ) {
......@@ -185,7 +185,7 @@ History.prototype = {
// Append Redos to History
for ( var i = 0 ; i < this.redos.length; i ++ ) {
for ( var i = 0; i < this.redos.length; i ++ ) {
if ( this.redos[ i ].hasOwnProperty( "json" ) ) {
......
......@@ -86,6 +86,22 @@ Menubar.Add = function ( editor ) {
} );
options.add( option );
// Ring
var option = new UI.Row();
option.setClass( 'option' );
option.setTextContent( strings.getKey( 'menubar/add/ring' ) );
option.onClick( function () {
var geometry = new THREE.RingBufferGeometry( 0.5, 1, 8, 1, 0, Math.PI * 2 );
var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
mesh.name = 'Ring';
editor.execute( new AddObjectCommand( mesh ) );
} );
options.add( option );
// Cylinder
var option = new UI.Row();
......@@ -134,6 +150,38 @@ Menubar.Add = function ( editor ) {
} );
options.add( option );
// Octahedron
var option = new UI.Row();
option.setClass( 'option' );
option.setTextContent( strings.getKey( 'menubar/add/octahedron' ) );
option.onClick( function () {
var geometry = new THREE.OctahedronBufferGeometry( 1, 0 );
var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
mesh.name = 'Octahedron';
editor.execute( new AddObjectCommand( mesh ) );
} );
options.add( option );
// Tetrahedron
var option = new UI.Row();
option.setClass( 'option' );
option.setTextContent( strings.getKey( 'menubar/add/tetrahedron' ) );
option.onClick( function () {
var geometry = new THREE.TetrahedronBufferGeometry( 1, 0 );
var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
mesh.name = 'Tetrahedron';
editor.execute( new AddObjectCommand( mesh ) );
} );
options.add( option );
// Torus
var option = new UI.Row();
......@@ -388,6 +436,21 @@ Menubar.Add = function ( editor ) {
} );
options.add( option );
// OrthographicCamera
var option = new UI.Row();
option.setClass( 'option' );
option.setTextContent( strings.getKey( 'menubar/add/orthographiccamera' ) );
option.onClick( function () {
var camera = new THREE.OrthographicCamera();
camera.name = 'OrthographicCamera';
editor.execute( new AddObjectCommand( camera ) );
} );
options.add( option );
return container;
};
......@@ -199,6 +199,68 @@ Menubar.Edit = function ( editor ) {
} );
options.add( option );
options.add( new UI.HorizontalRule() );
// Set textures to sRGB. See #15903
var option = new UI.Row();
option.setClass( 'option' );
option.setTextContent( strings.getKey( 'menubar/edit/fixcolormaps' ) );
option.onClick( function () {
editor.scene.traverse( fixColorMap );
} );
options.add( option );
var colorMaps = [ 'map', 'envMap', 'emissiveMap' ];
function fixColorMap( obj ) {
var material = obj.material;
if ( material !== undefined ) {
if ( Array.isArray( material ) === true ) {
for ( var i = 0; i < material.length; i ++ ) {
fixMaterial( material[ i ] );
}
} else {
fixMaterial( material );
}
editor.signals.sceneGraphChanged.dispatch();
}
}
function fixMaterial( material ) {
var needsUpdate = material.needsUpdate;
for ( var i = 0; i < colorMaps.length; i ++ ) {
var map = material[ colorMaps[ i ] ];
if ( map ) {
map.encoding = THREE.sRGBEncoding;
needsUpdate = true;
}
}
material.needsUpdate = needsUpdate;
}
return container;
......
......@@ -393,14 +393,11 @@ Menubar.File = function ( editor ) {
//
var link = document.createElement( 'a' );
link.style.display = 'none';
document.body.appendChild( link ); // Firefox workaround, see #6594
function save( blob, filename ) {
link.href = URL.createObjectURL( blob );
link.download = filename || 'data.json';
link.click();
link.dispatchEvent( new MouseEvent( 'click' ) );
// URL.revokeObjectURL( url ); breaks Firefox...
......
......@@ -20,6 +20,7 @@ var Script = function ( editor ) {
header.add( title );
var buttonSVG = ( function () {
var svg = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' );
svg.setAttribute( 'width', 32 );
svg.setAttribute( 'height', 32 );
......@@ -28,6 +29,7 @@ var Script = function ( editor ) {
path.setAttribute( 'stroke', '#fff' );
svg.appendChild( path );
return svg;
} )();
var close = new UI.Element( buttonSVG );
......@@ -80,7 +82,7 @@ var Script = function ( editor ) {
if ( ! validate( value ) ) return;
if ( typeof( currentScript ) === 'object' ) {
if ( typeof ( currentScript ) === 'object' ) {
if ( value !== currentScript.source ) {
......@@ -88,6 +90,7 @@ var Script = function ( editor ) {
}
return;
}
if ( currentScript !== 'programInfo' ) return;
......@@ -118,7 +121,7 @@ var Script = function ( editor ) {
}, 300 );
});
} );
// prevent backspace from deleting objects
var wrapper = codemirror.getWrapperElement();
......@@ -177,7 +180,7 @@ var Script = function ( editor ) {
for ( var i = 0; i < errors.length; i ++ ) {
var error = errors[ i ];
error.message = error.message.replace(/Line [0-9]+: /, '');
error.message = error.message.replace( /Line [0-9]+: /, '' );
}
......@@ -189,7 +192,7 @@ var Script = function ( editor ) {
jsonlint.parseError = function ( message, info ) {
message = message.split('\n')[3];
message = message.split( '\n' )[ 3 ];
errors.push( {
......@@ -217,11 +220,11 @@ var Script = function ( editor ) {
try {
var shaderType = currentScript === 'vertexShader' ?
glslprep.Shader.VERTEX : glslprep.Shader.FRAGMENT;
glslprep.Shader.VERTEX : glslprep.Shader.FRAGMENT;
glslprep.parseGlsl( string, shaderType );
} catch( error ) {
} catch ( error ) {
if ( error instanceof glslprep.SyntaxError ) {
......@@ -254,7 +257,7 @@ var Script = function ( editor ) {
for ( var i = 0, n = programs.length; i !== n; ++ i ) {
var diagnostics = programs[i].diagnostics;
var diagnostics = programs[ i ].diagnostics;
if ( diagnostics === undefined ||
diagnostics.material !== currentObject.material ) continue;
......@@ -262,7 +265,7 @@ var Script = function ( editor ) {
if ( ! diagnostics.runnable ) valid = false;
var shaderInfo = diagnostics[ currentScript ];
var lineOffset = shaderInfo.prefix.split(/\r\n|\r|\n/).length;
var lineOffset = shaderInfo.prefix.split( /\r\n|\r|\n/ ).length;
while ( true ) {
......@@ -305,7 +308,7 @@ var Script = function ( editor ) {
return valid !== undefined ? valid : errors.length === 0;
});
} );
};
......@@ -317,23 +320,23 @@ var Script = function ( editor ) {
} );
codemirror.setOption( 'extraKeys', {
'Ctrl-Space': function(cm) { server.complete(cm); },
'Ctrl-I': function(cm) { server.showType(cm); },
'Ctrl-O': function(cm) { server.showDocs(cm); },
'Alt-.': function(cm) { server.jumpToDef(cm); },
'Alt-,': function(cm) { server.jumpBack(cm); },
'Ctrl-Q': function(cm) { server.rename(cm); },
'Ctrl-.': function(cm) { server.selectName(cm); }
'Ctrl-Space': function ( cm ) { server.complete( cm ); },
'Ctrl-I': function ( cm ) { server.showType( cm ); },
'Ctrl-O': function ( cm ) { server.showDocs( cm ); },
'Alt-.': function ( cm ) { server.jumpToDef( cm ); },
'Alt-,': function ( cm ) { server.jumpBack( cm ); },
'Ctrl-Q': function ( cm ) { server.rename( cm ); },
'Ctrl-.': function ( cm ) { server.selectName( cm ); }
} );
codemirror.on( 'cursorActivity', function( cm ) {
codemirror.on( 'cursorActivity', function ( cm ) {
if ( currentMode !== 'javascript' ) return;
server.updateArgHints( cm );
} );
codemirror.on( 'keypress', function( cm, kb ) {
codemirror.on( 'keypress', function ( cm, kb ) {
if ( currentMode !== 'javascript' ) return;
var typed = String.fromCharCode( kb.which || kb.keyCode );
......@@ -358,7 +361,7 @@ var Script = function ( editor ) {
var mode, name, source;
if ( typeof( script ) === 'object' ) {
if ( typeof ( script ) === 'object' ) {
mode = 'javascript';
name = script.name;
......
/**
* @author Temdog007 / http://github.com/Temdog007
*/
Sidebar.Geometry.OctahedronGeometry = function ( editor, object ) {
var strings = editor.strings;
var signals = editor.signals;
var container = new UI.Row();
var geometry = object.geometry;
var parameters = geometry.parameters;
// radius
var radiusRow = new UI.Row();
var radius = new UI.Number( parameters.radius ).onChange( update );
radiusRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/octahedron_geometry/radius' ) ).setWidth( '90px' ) );
radiusRow.add( radius );
container.add( radiusRow );
// detail
var detailRow = new UI.Row();
var detail = new UI.Integer( parameters.detail ).setRange( 0, Infinity ).onChange( update );
detailRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/octahedron_geometry/detail' ) ).setWidth( '90px' ) );
detailRow.add( detail );
container.add( detailRow );
//
function update() {
editor.execute( new SetGeometryCommand( object, new THREE[ geometry.type ](
radius.getValue(),
detail.getValue()
) ) );
signals.objectChanged.dispatch( object );
}
return container;
};
Sidebar.Geometry.OctahedronBufferGeometry = Sidebar.Geometry.OctahedronGeometry;
/**
* @author Temdog007 / http://github.com/Temdog007
*/
Sidebar.Geometry.RingGeometry = function ( editor, object ) {
var strings = editor.strings;
var signals = editor.signals;
var container = new UI.Row();
var geometry = object.geometry;
var parameters = geometry.parameters;
// innerRadius
var innerRadiusRow = new UI.Row();
var innerRadius = new UI.Number( parameters.innerRadius ).onChange( update );
innerRadiusRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/ring_geometry/innerRadius' ) ).setWidth( '90px' ) );
innerRadiusRow.add( innerRadius );
container.add( innerRadiusRow );
// outerRadius
var outerRadiusRow = new UI.Row();
var outerRadius = new UI.Number( parameters.outerRadius ).onChange( update );
outerRadiusRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/ring_geometry/outerRadius' ) ).setWidth( '90px' ) );
outerRadiusRow.add( outerRadius );
container.add( outerRadiusRow );
// thetaSegments
var thetaSegmentsRow = new UI.Row();
var thetaSegments = new UI.Integer( parameters.thetaSegments ).setRange( 3, Infinity ).onChange( update );
thetaSegmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/ring_geometry/thetaSegments' ) ).setWidth( '90px' ) );
thetaSegmentsRow.add( thetaSegments );
container.add( thetaSegmentsRow );
// phiSegments
var phiSegmentsRow = new UI.Row();
var phiSegments = new UI.Integer( parameters.phiSegments ).setRange( 3, Infinity ).onChange( update );
phiSegmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/ring_geometry/phiSegments' ) ).setWidth( '90px' ) );
phiSegmentsRow.add( phiSegments );
container.add( phiSegmentsRow );
// thetaStart
var thetaStartRow = new UI.Row();
var thetaStart = new UI.Number( parameters.thetaStart * THREE.Math.RAD2DEG ).setStep( 10 ).onChange( update );
thetaStartRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/ring_geometry/thetastart' ) ).setWidth( '90px' ) );
thetaStartRow.add( thetaStart );
container.add( thetaStartRow );
// thetaLength
var thetaLengthRow = new UI.Row();
var thetaLength = new UI.Number( parameters.thetaLength * THREE.Math.RAD2DEG ).setStep( 10 ).onChange( update );
thetaLengthRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/ring_geometry/thetalength' ) ).setWidth( '90px' ) );
thetaLengthRow.add( thetaLength );
container.add( thetaLengthRow );
//
function update() {
editor.execute( new SetGeometryCommand( object, new THREE[ geometry.type ](
innerRadius.getValue(),
outerRadius.getValue(),
thetaSegments.getValue(),
phiSegments.getValue(),
thetaStart.getValue() * THREE.Math.DEG2RAD,
thetaLength.getValue() * THREE.Math.DEG2RAD
) ) );
}
return container;
};
Sidebar.Geometry.RingBufferGeometry = Sidebar.Geometry.RingGeometry;
/**
* @author Temdog007 / http://github.com/Temdog007
*/
Sidebar.Geometry.TetrahedronGeometry = function ( editor, object ) {
var strings = editor.strings;
var signals = editor.signals;
var container = new UI.Row();
var geometry = object.geometry;
var parameters = geometry.parameters;
// radius
var radiusRow = new UI.Row();
var radius = new UI.Number( parameters.radius ).onChange( update );
radiusRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/tetrahedron_geometry/radius' ) ).setWidth( '90px' ) );
radiusRow.add( radius );
container.add( radiusRow );
// detail
var detailRow = new UI.Row();
var detail = new UI.Integer( parameters.detail ).setRange( 0, Infinity ).onChange( update );
detailRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/tetrahedron_geometry/detail' ) ).setWidth( '90px' ) );
detailRow.add( detail );
container.add( detailRow );
//
function update() {
editor.execute( new SetGeometryCommand( object, new THREE[ geometry.type ](
radius.getValue(),
detail.getValue()
) ) );
signals.objectChanged.dispatch( object );
}
return container;
};
Sidebar.Geometry.TetrahedronBufferGeometry = Sidebar.Geometry.TetrahedronGeometry;
......@@ -179,6 +179,8 @@ Sidebar.Geometry = function ( editor ) {
}
if ( geometry.boundingSphere === null ) geometry.computeBoundingSphere();
geometryBoundingSphere.setValue( Math.floor( geometry.boundingSphere.radius * 1000 ) / 1000 );
} else {
......
......@@ -83,10 +83,14 @@ Sidebar.Material = function ( editor ) {
'MeshDepthMaterial': 'MeshDepthMaterial',
'MeshNormalMaterial': 'MeshNormalMaterial',
'MeshLambertMaterial': 'MeshLambertMaterial',
'MeshMatcapMaterial': 'MeshMatcapMaterial',
'MeshPhongMaterial': 'MeshPhongMaterial',
'MeshToonMaterial': 'MeshToonMaterial',
'MeshStandardMaterial': 'MeshStandardMaterial',
'MeshPhysicalMaterial': 'MeshPhysicalMaterial',
'RawShaderMaterial': 'RawShaderMaterial',
'ShaderMaterial': 'ShaderMaterial',
'ShadowMaterial': 'ShadowMaterial',
'SpriteMaterial': 'SpriteMaterial'
} ).setWidth( '150px' ).setFontSize( '12px' ).onChange( update );
......@@ -257,6 +261,20 @@ Sidebar.Material = function ( editor ) {
container.add( materialVertexColorsRow );
// depth packing
var materialDepthPackingRow = new UI.Row();
var materialDepthPacking = new UI.Select().setOptions( {
[ THREE.BasicDepthPacking ]: 'BasicDepthPacking',
[ THREE.RGBADepthPacking ]: 'RGBADepthPacking'
} );
materialDepthPacking.onChange( update );
materialDepthPackingRow.add( new UI.Text( strings.getKey( 'sidebar/material/depthPacking' ) ).setWidth( '90px' ) );
materialDepthPackingRow.add( materialDepthPacking );
container.add( materialDepthPackingRow );
// skinning
var materialSkinningRow = new UI.Row();
......@@ -271,7 +289,7 @@ Sidebar.Material = function ( editor ) {
var materialMapRow = new UI.Row();
var materialMapEnabled = new UI.Checkbox( false ).onChange( update );
var materialMap = new UI.Texture().onChange( update );
var materialMap = new UI.Texture().onChange( updateMaterial );
materialMapRow.add( new UI.Text( strings.getKey( 'sidebar/material/map' ) ).setWidth( '90px' ) );
materialMapRow.add( materialMapEnabled );
......@@ -279,6 +297,18 @@ Sidebar.Material = function ( editor ) {
container.add( materialMapRow );
// matcap map
var materialMatcapMapRow = new UI.Row();
var materialMatcapMapEnabled = new UI.Checkbox( false ).onChange( update );
var materialMatcapMap = new UI.Texture().onChange( update );
materialMatcapMapRow.add( new UI.Text( strings.getKey( 'sidebar/material/matcap' ) ).setWidth( '90px' ) );
materialMatcapMapRow.add( materialMatcapMapEnabled );
materialMatcapMapRow.add( materialMatcapMap );
container.add( materialMatcapMapRow );
// alpha map
var materialAlphaMapRow = new UI.Row();
......@@ -371,7 +401,7 @@ Sidebar.Material = function ( editor ) {
var materialEnvMapRow = new UI.Row();
var materialEnvMapEnabled = new UI.Checkbox( false ).onChange( update );
var materialEnvMap = new UI.Texture( THREE.SphericalReflectionMapping ).onChange( update );
var materialEnvMap = new UI.Texture( THREE.SphericalReflectionMapping ).onChange( updateMaterial );
var materialReflectivity = new UI.Number( 1 ).setWidth( '30px' ).onChange( update );
materialEnvMapRow.add( new UI.Text( strings.getKey( 'sidebar/material/envmap' ) ).setWidth( '90px' ) );
......@@ -411,7 +441,7 @@ Sidebar.Material = function ( editor ) {
var materialEmissiveMapRow = new UI.Row();
var materialEmissiveMapEnabled = new UI.Checkbox( false ).onChange( update );
var materialEmissiveMap = new UI.Texture().onChange( update );
var materialEmissiveMap = new UI.Texture().onChange( updateMaterial );
materialEmissiveMapRow.add( new UI.Text( strings.getKey( 'sidebar/material/emissivemap' ) ).setWidth( '90px' ) );
materialEmissiveMapRow.add( materialEmissiveMapEnabled );
......@@ -419,6 +449,18 @@ Sidebar.Material = function ( editor ) {
container.add( materialEmissiveMapRow );
// gradient map
var materialGradientMapRow = new UI.Row();
var materialGradientMapEnabled = new UI.Checkbox( false ).onChange( update );
var materialGradientMap = new UI.Texture().onChange( update );
materialGradientMapRow.add( new UI.Text( strings.getKey( 'sidebar/material/gradientmap' ) ).setWidth( '90px' ) );
materialGradientMapRow.add( materialGradientMapEnabled );
materialGradientMapRow.add( materialGradientMap );
container.add( materialGradientMapRow );
// side
var materialSideRow = new UI.Row();
......@@ -438,7 +480,7 @@ Sidebar.Material = function ( editor ) {
// shading
var materialShadingRow = new UI.Row();
var materialShading = new UI.Checkbox(false).setLeft( '100px' ).onChange( update );
var materialShading = new UI.Checkbox( false ).setLeft( '100px' ).onChange( update );
materialShadingRow.add( new UI.Text( strings.getKey( 'sidebar/material/flatshaded' ) ).setWidth( '90px' ) );
materialShadingRow.add( materialShading );
......@@ -537,10 +579,16 @@ Sidebar.Material = function ( editor ) {
}
if ( material instanceof THREE[ materialClass.getValue() ] === false ) {
if ( material.type !== materialClass.getValue() ) {
material = new THREE[ materialClass.getValue() ]();
if ( material.type == "RawShaderMaterial" ) {
material.vertexShader = vertexShaderVariables + material.vertexShader;
}
editor.execute( new SetMaterialCommand( currentObject, material, currentMaterialSlot ), 'New Material: ' + materialClass.getValue() );
// TODO Copy other references in the scene graph
// keeping name and UUID then.
......@@ -610,6 +658,17 @@ Sidebar.Material = function ( editor ) {
}
if ( material.depthPacking !== undefined ) {
var depthPacking = parseInt( materialDepthPacking.getValue() );
if ( material.depthPacking !== depthPacking ) {
editor.execute( new SetMaterialValueCommand( currentObject, 'depthPacking', depthPacking, currentMaterialSlot ) );
}
}
if ( material.skinning !== undefined && material.skinning !== materialSkinning.getValue() ) {
editor.execute( new SetMaterialValueCommand( currentObject, 'skinning', materialSkinning.getValue(), currentMaterialSlot ) );
......@@ -637,6 +696,27 @@ Sidebar.Material = function ( editor ) {
}
if ( material.matcap !== undefined ) {
var mapEnabled = materialMatcapMapEnabled.getValue() === true;
if ( objectHasUvs ) {
var matcap = mapEnabled ? materialMatcapMap.getValue() : null;
if ( material.matcap !== matcap ) {
editor.execute( new SetMaterialMapCommand( currentObject, 'matcap', matcap, currentMaterialSlot ) );
}
} else {
if ( mapEnabled ) textureWarning = true;
}
}
if ( material.alphaMap !== undefined ) {
var mapEnabled = materialAlphaMapEnabled.getValue() === true;
......@@ -891,6 +971,20 @@ Sidebar.Material = function ( editor ) {
}
if ( material.gradientMap !== undefined ) {
var gradientMapEnabled = materialGradientMapEnabled.getValue() === true;
var gradientMap = gradientMapEnabled ? materialGradientMap.getValue() : null;
if ( material.gradientMap !== gradientMap ) {
editor.execute( new SetMaterialMapCommand( currentObject, 'gradientMap', gradientMap, currentMaterialSlot ) );
}
}
if ( material.side !== undefined ) {
var side = parseInt( materialSide.getValue() );
......@@ -945,7 +1039,7 @@ Sidebar.Material = function ( editor ) {
if ( material.wireframe !== undefined && material.wireframe !== materialWireframe.getValue() ) {
editor.execute( new SetMaterialValueCommand( currentObject, 'wireframe', materialWireframe.getValue(), currentMaterialSlot) );
editor.execute( new SetMaterialValueCommand( currentObject, 'wireframe', materialWireframe.getValue(), currentMaterialSlot ) );
}
......@@ -967,6 +1061,28 @@ Sidebar.Material = function ( editor ) {
}
function updateMaterial( texture ) {
if ( texture !== null ) {
if ( texture.encoding !== THREE.sRGBEncoding ) {
texture.encoding = THREE.sRGBEncoding;
var object = currentObject;
if ( object !== null ) {
object.material.needsUpdate = true;
}
}
}
update();
}
//
function setRowVisibility() {
......@@ -983,8 +1099,10 @@ Sidebar.Material = function ( editor ) {
'clearCoatRoughness': materialClearCoatRoughnessRow,
'vertexShader': materialProgramRow,
'vertexColors': materialVertexColorsRow,
'depthPacking': materialDepthPackingRow,
'skinning': materialSkinningRow,
'map': materialMapRow,
'matcap': materialMatcapMapRow,
'alphaMap': materialAlphaMapRow,
'bumpMap': materialBumpMapRow,
'normalMap': materialNormalMapRow,
......@@ -996,6 +1114,7 @@ Sidebar.Material = function ( editor ) {
'lightMap': materialLightMapRow,
'aoMap': materialAOMapRow,
'emissiveMap': materialEmissiveMapRow,
'gradientMap': materialGradientMapRow,
'side': materialSideRow,
'flatShading': materialShadingRow,
'blending': materialBlendingRow,
......@@ -1122,6 +1241,12 @@ Sidebar.Material = function ( editor ) {
}
if ( material.depthPacking !== undefined ) {
materialDepthPacking.setValue( material.depthPacking );
}
if ( material.skinning !== undefined ) {
materialSkinning.setValue( material.skinning );
......@@ -1140,6 +1265,18 @@ Sidebar.Material = function ( editor ) {
}
if ( material.matcap !== undefined ) {
materialMatcapMapEnabled.setValue( material.matcap !== null );
if ( material.matcap !== null || resetTextureSelectors ) {
materialMatcapMap.setValue( material.matcap );
}
}
if ( material.alphaMap !== undefined ) {
materialAlphaMapEnabled.setValue( material.alphaMap !== null );
......@@ -1240,6 +1377,18 @@ Sidebar.Material = function ( editor ) {
}
if ( material.gradientMap !== undefined ) {
materialGradientMapEnabled.setValue( material.gradientMap !== null );
if ( material.gradientMap !== null || resetTextureSelectors ) {
materialGradientMap.setValue( material.gradientMap );
}
}
if ( material.reflectivity !== undefined ) {
materialReflectivity.setValue( material.reflectivity );
......@@ -1377,6 +1526,12 @@ Sidebar.Material = function ( editor ) {
} );
var vertexShaderVariables = [
'uniform mat4 projectionMatrix;',
'uniform mat4 modelViewMatrix;\n',
'attribute vec3 position;\n\n',
].join( '\n' );
return container;
};
......@@ -146,6 +146,46 @@ Sidebar.Object = function ( editor ) {
container.add( objectFovRow );
// left
var objectLeftRow = new UI.Row();
var objectLeft = new UI.Number().onChange( update );
objectLeftRow.add( new UI.Text( strings.getKey( 'sidebar/object/left' ) ).setWidth( '90px' ) );
objectLeftRow.add( objectLeft );
container.add( objectLeftRow );
// right
var objectRightRow = new UI.Row();
var objectRight = new UI.Number().onChange( update );
objectRightRow.add( new UI.Text( strings.getKey( 'sidebar/object/right' ) ).setWidth( '90px' ) );
objectRightRow.add( objectRight );
container.add( objectRightRow );
// top
var objectTopRow = new UI.Row();
var objectTop = new UI.Number().onChange( update );
objectTopRow.add( new UI.Text( strings.getKey( 'sidebar/object/top' ) ).setWidth( '90px' ) );
objectTopRow.add( objectTop );
container.add( objectTopRow );
// bottom
var objectBottomRow = new UI.Row();
var objectBottom = new UI.Number().onChange( update );
objectBottomRow.add( new UI.Text( strings.getKey( 'sidebar/object/bottom' ) ).setWidth( '90px' ) );
objectBottomRow.add( objectBottom );
container.add( objectBottomRow );
// near
var objectNearRow = new UI.Row();
......@@ -400,15 +440,53 @@ Sidebar.Object = function ( editor ) {
}
if ( object.left !== undefined && Math.abs( object.left - objectLeft.getValue() ) >= 0.01 ) {
editor.execute( new SetValueCommand( object, 'left', objectLeft.getValue() ) );
object.updateProjectionMatrix();
}
if ( object.right !== undefined && Math.abs( object.right - objectRight.getValue() ) >= 0.01 ) {
editor.execute( new SetValueCommand( object, 'right', objectRight.getValue() ) );
object.updateProjectionMatrix();
}
if ( object.top !== undefined && Math.abs( object.top - objectTop.getValue() ) >= 0.01 ) {
editor.execute( new SetValueCommand( object, 'top', objectTop.getValue() ) );
object.updateProjectionMatrix();
}
if ( object.bottom !== undefined && Math.abs( object.bottom - objectBottom.getValue() ) >= 0.01 ) {
editor.execute( new SetValueCommand( object, 'bottom', objectBottom.getValue() ) );
object.updateProjectionMatrix();
}
if ( object.near !== undefined && Math.abs( object.near - objectNear.getValue() ) >= 0.01 ) {
editor.execute( new SetValueCommand( object, 'near', objectNear.getValue() ) );
if ( object.isOrthographicCamera ) {
object.updateProjectionMatrix();
}
}
if ( object.far !== undefined && Math.abs( object.far - objectFar.getValue() ) >= 0.01 ) {
editor.execute( new SetValueCommand( object, 'far', objectFar.getValue() ) );
if ( object.isOrthographicCamera ) {
object.updateProjectionMatrix();
}
}
......@@ -518,17 +596,21 @@ Sidebar.Object = function ( editor ) {
var properties = {
'fov': objectFovRow,
'left': objectLeftRow,
'right': objectRightRow,
'top': objectTopRow,
'bottom': objectBottomRow,
'near': objectNearRow,
'far': objectFarRow,
'intensity': objectIntensityRow,
'color': objectColorRow,
'groundColor': objectGroundColorRow,
'distance' : objectDistanceRow,
'angle' : objectAngleRow,
'penumbra' : objectPenumbraRow,
'decay' : objectDecayRow,
'castShadow' : objectShadowRow,
'receiveShadow' : objectReceiveShadow,
'distance': objectDistanceRow,
'angle': objectAngleRow,
'penumbra': objectPenumbraRow,
'decay': objectDecayRow,
'castShadow': objectShadowRow,
'receiveShadow': objectReceiveShadow,
'shadow': objectShadowRadius
};
......@@ -617,6 +699,30 @@ Sidebar.Object = function ( editor ) {
}
if ( object.left !== undefined ) {
objectLeft.setValue( object.left );
}
if ( object.right !== undefined ) {
objectRight.setValue( object.right );
}
if ( object.top !== undefined ) {
objectTop.setValue( object.top );
}
if ( object.bottom !== undefined ) {
objectBottom.setValue( object.bottom );
}
if ( object.near !== undefined ) {
objectNear.setValue( object.near );
......
......@@ -16,8 +16,8 @@ Sidebar.Settings = function ( editor ) {
// language
var options = {
'en': 'English',
'zh': '中文'
en: 'English',
zh: '中文'
};
var languageRow = new UI.Row();
......@@ -72,7 +72,7 @@ Sidebar.Settings = function ( editor ) {
themeRow.add( new UI.Text( strings.getKey( 'sidebar/settings/theme' ) ).setWidth( '90px' ) );
themeRow.add( theme );
container.add( themeRow );
container.add( themeRow );
container.add( new Sidebar.Settings.Shortcuts( editor ) );
container.add( new Sidebar.Settings.Viewport( editor ) );
......
......@@ -31,6 +31,7 @@ var Strings = function ( config ) {
'menubar/edit/clone': 'Clone',
'menubar/edit/delete': 'Delete (Del)',
'menubar/edit/minify_shaders': 'Minify Shaders',
'menubar/edit/fixcolormaps': 'Fix Color Maps',
'menubar/add': 'Add',
'menubar/add/group': 'Group',
......@@ -38,8 +39,11 @@ var Strings = function ( config ) {
'menubar/add/box': 'Box',
'menubar/add/circle': 'Circle',
'menubar/add/cylinder': 'Cylinder',
'menubar/add/ring': 'Ring',
'menubar/add/sphere': 'Sphere',
'menubar/add/icosahedron': 'Icosahedron',
'menubar/add/octahedron': 'Octahedron',
'menubar/add/tetrahedron': 'Tetrahedron',
'menubar/add/torus': 'Torus',
'menubar/add/tube': 'Tube',
'menubar/add/torusknot': 'TorusKnot',
......@@ -51,6 +55,7 @@ var Strings = function ( config ) {
'menubar/add/hemispherelight': 'HemisphereLight',
'menubar/add/ambientlight': 'AmbientLight',
'menubar/add/perspectivecamera': 'PerspectiveCamera',
'menubar/add/orthographiccamera': 'OrthographicCamera',
'menubar/status/autosave': 'autosave',
......@@ -81,6 +86,10 @@ var Strings = function ( config ) {
'sidebar/object/rotation': 'Rotation',
'sidebar/object/scale': 'Scale',
'sidebar/object/fov': 'Fov',
'sidebar/object/left': 'Left',
'sidebar/object/right': 'Right',
'sidebar/object/top': 'Top',
'sidebar/object/bottom': 'Bottom',
'sidebar/object/near': 'Near',
'sidebar/object/far': 'Far',
'sidebar/object/intensity': 'Intensity',
......@@ -132,6 +141,12 @@ var Strings = function ( config ) {
'sidebar/geometry/icosahedron_geometry/radius': 'Radius',
'sidebar/geometry/icosahedron_geometry/detail': 'Detail',
'sidebar/geometry/octahedron_geometry/radius': 'Radius',
'sidebar/geometry/octahedron_geometry/detail': 'Detail',
'sidebar/geometry/tetrahedron_geometry/radius': 'Radius',
'sidebar/geometry/tetrahedron_geometry/detail': 'Detail',
'sidebar/geometry/lathe_geometry/segments': 'Segments',
'sidebar/geometry/lathe_geometry/phistart': 'Phi start (°)',
'sidebar/geometry/lathe_geometry/philength': 'Phi length (°)',
......@@ -142,6 +157,13 @@ var Strings = function ( config ) {
'sidebar/geometry/plane_geometry/widthsegments': 'Width segments',
'sidebar/geometry/plane_geometry/heightsegments': 'Height segments',
'sidebar/geometry/ring_geometry/innerRadius': 'Inner radius',
'sidebar/geometry/ring_geometry/outerRadius': 'Outer radius',
'sidebar/geometry/ring_geometry/thetaSegments': 'Theta segments',
'sidebar/geometry/ring_geometry/phiSegments': 'Phi segments',
'sidebar/geometry/ring_geometry/thetastart': 'Theta start',
'sidebar/geometry/ring_geometry/thetalength': 'Theta length',
'sidebar/geometry/sphere_geometry/radius': 'Radius',
'sidebar/geometry/sphere_geometry/widthsegments': 'Width segments',
'sidebar/geometry/sphere_geometry/heightsegments': 'Height segments',
......@@ -183,6 +205,7 @@ var Strings = function ( config ) {
'sidebar/material/vertex': 'Vertex',
'sidebar/material/fragment': 'fragment',
'sidebar/material/color': 'Color',
'sidebar/material/depthPacking': 'Depth Packing',
'sidebar/material/roughness': 'Roughness',
'sidebar/material/metalness': 'Metalness',
'sidebar/material/emissive': 'Emissive',
......@@ -195,6 +218,7 @@ var Strings = function ( config ) {
'sidebar/material/vertexcolors/face': 'Face',
'sidebar/material/vertexcolors/vertex': 'Vertex',
'sidebar/material/skinning': 'Skinning',
'sidebar/material/matcap': 'Matcap',
'sidebar/material/map': 'Map',
'sidebar/material/alphamap': 'Alpha Map',
'sidebar/material/bumpmap': 'Bump Map',
......@@ -207,6 +231,7 @@ var Strings = function ( config ) {
'sidebar/material/lightmap': 'Light Map',
'sidebar/material/aomap': 'AO Map',
'sidebar/material/emissivemap': 'Emissive Map',
'sidebar/material/gradientmap': 'Gradient Map',
'sidebar/material/side': 'Side',
'sidebar/material/side/front': 'Front',
'sidebar/material/side/back': 'Back',
......@@ -288,6 +313,7 @@ var Strings = function ( config ) {
'menubar/edit/clone': '拷贝',
'menubar/edit/delete': '删除 (Del)',
'menubar/edit/minify_shaders': '压缩着色器',
'menubar/edit/fixcolormaps': '修复颜色贴图',
'menubar/add': '添加',
'menubar/add/group': '',
......@@ -295,8 +321,11 @@ var Strings = function ( config ) {
'menubar/add/box': '正方体',
'menubar/add/circle': '',
'menubar/add/cylinder': '圆柱体',
'menubar/add/ring': '',
'menubar/add/sphere': '球体',
'menubar/add/icosahedron': '二十面体',
'menubar/add/octahedron': '八面体',
'menubar/add/tetrahedron': '四面体',
'menubar/add/torus': '圆环体',
'menubar/add/torusknot': '环面纽结体',
'menubar/add/tube': '',
......@@ -308,6 +337,7 @@ var Strings = function ( config ) {
'menubar/add/hemispherelight': '半球光',
'menubar/add/ambientlight': '环境光',
'menubar/add/perspectivecamera': '透视相机',
'menubar/add/orthographiccamera': '正交相机',
'menubar/status/autosave': '自动保存',
......@@ -338,6 +368,10 @@ var Strings = function ( config ) {
'sidebar/object/rotation': '旋转',
'sidebar/object/scale': '缩放',
'sidebar/object/fov': '视角',
'sidebar/object/left': '',
'sidebar/object/right': '',
'sidebar/object/top': '',
'sidebar/object/bottom': '',
'sidebar/object/near': '近点',
'sidebar/object/far': '远点',
'sidebar/object/intensity': '强度',
......@@ -389,6 +423,12 @@ var Strings = function ( config ) {
'sidebar/geometry/icosahedron_geometry/radius': '半径',
'sidebar/geometry/icosahedron_geometry/detail': '面片分段',
'sidebar/geometry/octahedron_geometry/radius': '半径',
'sidebar/geometry/octahedron_geometry/detail': '面片分段',
'sidebar/geometry/tetrahedron_geometry/radius': '半径',
'sidebar/geometry/tetrahedron_geometry/detail': '面片分段',
'sidebar/geometry/lathe_geometry/segments': '分段',
'sidebar/geometry/lathe_geometry/phistart': '经度起点',
'sidebar/geometry/lathe_geometry/philength': '经度长度',
......@@ -399,6 +439,13 @@ var Strings = function ( config ) {
'sidebar/geometry/plane_geometry/widthsegments': '宽度分段',
'sidebar/geometry/plane_geometry/heightsegments': '长度分段',
'sidebar/geometry/ring_geometry/innerRadius': '内半径',
'sidebar/geometry/ring_geometry/outerRadius': '外半径',
'sidebar/geometry/ring_geometry/thetaSegments': '弧度分段',
'sidebar/geometry/ring_geometry/phiSegments': '经度分段',
'sidebar/geometry/ring_geometry/thetastart': '弧度起点',
'sidebar/geometry/ring_geometry/thetalength': '弧度长度',
'sidebar/geometry/sphere_geometry/radius': '半径',
'sidebar/geometry/sphere_geometry/widthsegments': '宽度分段',
'sidebar/geometry/sphere_geometry/heightsegments': '长度分段',
......
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
import {Quaternion} from "../../..";
export namespace MathUtils {
export function setQuaternionFromProperEuler(q: Quaternion, a: number, b: number, c: number, order: string): void ;
}
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册