Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

提交 9e2c304d 编写于 作者: G Greg Tatum
浏览文件
操作

Geometry browser

上级 ffda14bc
隐藏空白更改
内联 并排
Showing with 461 addition and 46 deletion
docs/api/extras/geometries/BoxGeometry.html
浏览文件 @ 9e2c304d
......@@ -13,6 +13,8 @@
<div class="desc">BoxGeometry is the quadrilateral primitive geometry class. It is typically used for creating a cube or irregular quadrilateral of the dimensions provided with the 'width', 'height', and 'depth' constructor arguments.</div>
<iframe src='../../../scenes/geometry-browser.html#BoxGeometry'></iframe>
<h2>Example</h2>
<code>var geometry = new THREE.BoxGeometry( 1, 1, 1 );
......
docs/api/extras/geometries/CircleGeometry.html
浏览文件 @ 9e2c304d
......@@ -16,6 +16,8 @@
<h2>Example</h2>
<iframe src='../../../scenes/geometry-browser.html#CircleGeometry'></iframe>
<code>var material = new THREE.MeshBasicMaterial({
color: 0x0000ff
});
......
docs/api/extras/geometries/CylinderGeometry.html
浏览文件 @ 9e2c304d
......@@ -15,6 +15,8 @@
<h2>Example</h2>
<iframe src='../../../scenes/geometry-browser.html#CylinderGeometry'></iframe>
<code>var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
......
docs/api/extras/geometries/PlaneGeometry.html
浏览文件 @ 9e2c304d
......@@ -15,6 +15,8 @@
<h2>Example</h2>
<iframe src='../../../scenes/geometry-browser.html#PlaneGeometry'></iframe>
<code>var geometry = new THREE.PlaneGeometry( 5, 20, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
......
docs/api/extras/geometries/RingGeometry.html
浏览文件 @ 9e2c304d
......@@ -13,6 +13,8 @@
<div class="desc">A class for generating a two-dimensional ring geometry.</div>
<iframe src='../../../scenes/geometry-browser.html#RingGeometry'></iframe>
<h2>Example</h2>
<code>var geometry = new THREE.RingGeometry( 1, 5, 32 );
......@@ -29,7 +31,7 @@
innerRadius — Default is 0, but it doesn't work right when innerRadius is set to 0.<br />
outerRadius — Default is 50. <br />
thetaSegments — Number of segments. A higher number means the ring will be more round. Minimum is 3. Default is 8. <br />
phiSegments — Minimum is 3. Default is 8.<br />
phiSegments — Minimum is 1. Default is 8.<br />
thetaStart — Starting angle. Default is 0. <br />
thetaLength — Central angle. Default is Math.PI * 2.
</div>
......
docs/api/extras/geometries/SphereGeometry.html
浏览文件 @ 9e2c304d
......@@ -14,6 +14,8 @@
<div class="desc">A class for generating sphere geometries</div>
<h2>Example</h2>
<iframe src='../../../scenes/geometry-browser.html#SphereGeometry'></iframe>
<code>var geometry = new THREE.SphereGeometry( 5, 32, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
......
docs/api/extras/geometries/TextGeometry.html
浏览文件 @ 9e2c304d
......@@ -13,6 +13,14 @@
<div class="desc">This object creates a 3D object of text as a single object.</div>
<h2>Example</h2>
<iframe src='../../../scenes/geometry-browser.html#TextGeometry'></iframe>
<div>
[example:webgl_geometry_text geometry / text ]<br/>
[example:webgl_geometry_text2 geometry / text2 ]
</div>
<h2>Constructor</h2>
......@@ -24,7 +32,7 @@
<ul>
<li>size — Float. Size of the text.</li>
<li>height — Float. Thickness to extrude text. Default is 50.</li>
<li>curveSegments — Integer. Number of points on the curves.</li>
<li>curveSegments — Integer. Number of points on the curves. Default is 12.</li>
<li>font — String. Font name.</li>
<li>weight — String. Font weight (normal, bold).</li>
<li>style — String. Font style (normal, italics).</li>
......@@ -34,7 +42,81 @@
</ul>
</div>
<h2>Available Fonts</h2>
<div>
TextGeometry uses <a href='http://gero3.github.io/facetype.js/' target="_top">typeface.js</a> generated fonts.
Some existing fonts can be found located in <b>/examples/fonts</b> and must be included in the page.
</div>
<table>
<tr>
<th>Font</th>
<th>Weight</th>
<th>Style</th>
<th>File Path</th>
</tr>
<tr>
<td>helvetiker</td>
<td>normal</td>
<td>normal</td>
<td>/examples/fonts/helvetiker_regular.typeface.js</td>
</tr>
<tr>
<td>helvetiker</td>
<td>bold</td>
<td>normal</td>
<td>/examples/fonts/helvetiker_bold.typeface.js</td>
</tr>
<tr>
<td>optimer</td>
<td>normal</td>
<td>normal</td>
<td>/examples/fonts/optimer_regular.typeface.js</td>
</tr>
<tr>
<td>optimer</td>
<td>bold</td>
<td>normal</td>
<td>/examples/fonts/optimer_bold.typeface.js</td>
</tr>
<tr>
<td>gentilis</td>
<td>normal</td>
<td>normal</td>
<td>/examples/fonts/gentilis_regular.typeface.js</td>
</tr>
<tr>
<td>gentilis</td>
<td>bold</td>
<td>normal</td>
<td>/examples/fonts/gentilis_bold.typeface.js</td>
</tr>
<tr>
<td>driod sans</td>
<td>normal</td>
<td>normal</td>
<td>/examples/fonts/droid/droid_sans_regular.typeface.js</td>
</tr>
<tr>
<td>driod sans</td>
<td>bold</td>
<td>normal</td>
<td>/examples/fonts/droid/droid_sans_bold.typeface.js</td>
</tr>
<tr>
<td>droid serif</td>
<td>normal</td>
<td>normal</td>
<td>/examples/fonts/droid/droid_serif_regular.typeface.js</td>
</tr>
<tr>
<td>droid serif</td>
<td>bold</td>
<td>normal</td>
<td>/examples/fonts/droid/droid_serif_bold.typeface.js</td>
</tr>
</table>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
......
docs/scenes/geometry-browser.html
浏览文件 @ 9e2c304d
......@@ -37,6 +37,15 @@
<script src="../../build/three.min.js"></script>
<script src='../../examples/js/libs/dat.gui.min.js'></script>
<script src="../../examples/js/controls/OrbitControls.js"></script>
<script src="../../examples/fonts/gentilis_bold.typeface.js"></script>
<script src="../../examples/fonts/gentilis_regular.typeface.js"></script>
<script src="../../examples/fonts/optimer_bold.typeface.js"></script>
<script src="../../examples/fonts/optimer_regular.typeface.js"></script>
<script src="../../examples/fonts/helvetiker_bold.typeface.js"></script>
<script src="../../examples/fonts/helvetiker_regular.typeface.js"></script>
<script src="../../examples/fonts/droid/droid_serif_regular.typeface.js"></script>
<script src="../../examples/fonts/droid/droid_serif_bold.typeface.js"></script>
<script src='js/geometry.js'></script>
<script>
......@@ -94,9 +103,9 @@
]
)
);
chooseFromHash( mesh );
var options = chooseFromHash( mesh );
scene.add( mesh );
......@@ -108,8 +117,10 @@
var time = Date.now() * 0.001;
mesh.rotation.x += 0.005;
mesh.rotation.y += 0.005;
if( !options.fixed ) {
mesh.rotation.x += 0.005;
mesh.rotation.y += 0.005;
}
renderer.render( scene, camera );
......
docs/scenes/js/geometry.js
浏览文件 @ 9e2c304d
......@@ -2,6 +2,8 @@
* @author TatumCreative (Greg Tatum) / http://gregtatum.com/
*/
var twoPi = Math.PI * 2;
var constants = {
combine: {
......@@ -90,74 +92,112 @@ function updateGroupGeometry( mesh, geometry ) {
}
var guis = {
TorusGeometry : function( mesh ) {
BoxGeometry : function( mesh ) {
var data = {
radius : 10,
tube : 3,
radialSegments : 16,
tubularSegments : 100,
arc : Math.PI * 2
width : 15,
height : 15,
depth : 15,
widthSegments : 1,
heightSegments : 1,
depthSegments : 1
};
function generateGeometry() {
updateGroupGeometry( mesh,
new THREE.TorusGeometry(
data.radius, data.tube, data.radialSegments, data.tubularSegments, data.arc
new THREE.BoxGeometry(
data.width, data.height, data.depth, data.widthSegments, data.heightSegments, data.depthSegments
)
)
);
}
var folder = gui.addFolder('THREE.TorusGeometry');
var folder = gui.addFolder('THREE.BoxGeometry');
folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry )
folder.add( data, 'tube', 0.1, 10 ).onChange( generateGeometry )
folder.add( data, 'radialSegments', 2, 30 ).step(1).onChange( generateGeometry )
folder.add( data, 'tubularSegments', 3, 200 ).step(1).onChange( generateGeometry )
folder.add( data, 'arc', 0.1, Math.PI * 2 ).onChange( generateGeometry )
folder.add( data, 'width', 1, 30 ).onChange( generateGeometry );
folder.add( data, 'height', 1, 30 ).onChange( generateGeometry );
folder.add( data, 'depth', 1, 30 ).onChange( generateGeometry );
folder.add( data, 'widthSegments', 1, 10 ).step(1).onChange( generateGeometry );
folder.add( data, 'heightSegments', 1, 10 ).step(1).onChange( generateGeometry );
folder.add( data, 'depthSegments', 1, 10 ).step(1).onChange( generateGeometry );
generateGeometry()
generateGeometry();
},
TorusKnotGeometry : function( mesh ) {
CylinderGeometry : function( mesh ) {
var data = {
radius : 10,
tube : 3,
radialSegments : 64,
tubularSegments : 8,
p : 2,
q : 3,
heightScale : 1
radiusTop : 5,
radiusBottom : 5,
height : 10,
radiusSegments : 8,
heightSegments : 1,
openEnded : false,
thetaStart : 0,
thetaLength : twoPi,
};
function generateGeometry() {
updateGroupGeometry( mesh,
new THREE.TorusKnotGeometry(
data.radius, data.tube, data.radialSegments, data.tubularSegments,
data.p, data.q, data.heightScale
new THREE.CylinderGeometry(
data.radiusTop,
data.radiusBottom,
data.height,
data.radiusSegments,
data.heightSegments,
data.openEnded,
data.thetaStart,
data.thetaLength
)
)
}
var folder = gui.addFolder('THREE.TorusGeometry');
var folder = gui.addFolder('THREE.CylinderGeometry');
folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry )
folder.add( data, 'tube', 0.1, 10 ).onChange( generateGeometry )
folder.add( data, 'radialSegments', 3, 300 ).step(1).onChange( generateGeometry )
folder.add( data, 'tubularSegments', 3, 20 ).step(1).onChange( generateGeometry )
folder.add( data, 'p', 1, 20 ).step(1).onChange( generateGeometry )
folder.add( data, 'q', 1, 20 ).step(1).onChange( generateGeometry )
folder.add( data, 'heightScale', 1, 20 ).onChange( generateGeometry )
folder.add( data, 'radiusTop', 1, 30 ).onChange( generateGeometry );
folder.add( data, 'radiusBottom', 1, 30 ).onChange( generateGeometry );
folder.add( data, 'height', 1, 50 ).onChange( generateGeometry );
folder.add( data, 'radiusSegments', 3, 64 ).step(1).onChange( generateGeometry );
folder.add( data, 'heightSegments', 1, 64 ).step(1).onChange( generateGeometry );
folder.add( data, 'openEnded' ).onChange( generateGeometry );
folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
generateGeometry()
generateGeometry();
},
CircleGeometry : function( mesh ) {
var data = {
radius : 10,
segments : 32,
thetaStart : 0,
thetaLength : twoPi,
};
function generateGeometry() {
updateGroupGeometry( mesh,
new THREE.CircleGeometry(
data.radius, data.segments, data.thetaStart, data.thetaLength
)
);
}
var folder = gui.addFolder('THREE.CircleGeometry');
folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
folder.add( data, 'segments', 0, 128 ).step(1).onChange( generateGeometry );
folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
generateGeometry();
},
DodecahedronGeometry : function() {
......@@ -237,6 +277,103 @@ var guis = {
generateGeometry()
},
PlaneGeometry : function( mesh ) {
var data = {
width : 10,
height : 10,
widthSegments : 1,
heightSegments : 1
};
function generateGeometry() {
updateGroupGeometry( mesh,
new THREE.PlaneGeometry(
data.width, data.height, data.widthSegments, data.heightSegments
)
);
}
var folder = gui.addFolder('THREE.PlaneGeometry');
folder.add( data, 'width', 1, 30 ).onChange( generateGeometry );
folder.add( data, 'height', 1, 30 ).onChange( generateGeometry );
folder.add( data, 'widthSegments', 1, 30 ).step(1).onChange( generateGeometry );
folder.add( data, 'heightSegments', 1, 30 ).step(1).onChange( generateGeometry );
generateGeometry();
},
RingGeometry : function( mesh ) {
var data = {
innerRadius : 5,
outerRadius : 10,
thetaSegments : 8,
phiSegments : 8,
thetaStart : 0,
thetaLength : twoPi,
};
function generateGeometry() {
updateGroupGeometry( mesh,
new THREE.RingGeometry(
data.innerRadius, data.outerRadius, data.thetaSegments, data.phiSegments, data.thetaStart, data.thetaLength
)
);
}
var folder = gui.addFolder('THREE.RingGeometry');
folder.add( data, 'innerRadius', 0, 30 ).onChange( generateGeometry );
folder.add( data, 'outerRadius', 1, 30 ).onChange( generateGeometry );
folder.add( data, 'thetaSegments', 1, 30 ).step(1).onChange( generateGeometry );
folder.add( data, 'phiSegments', 1, 30 ).step(1).onChange( generateGeometry );
folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
generateGeometry();
},
SphereGeometry : function( mesh ) {
var data = {
radius : 15,
widthSegments : 8,
heightSegments : 6,
phiStart : 0,
phiLength : twoPi,
thetaStart : 0,
thetaLength : Math.PI,
};
function generateGeometry() {
updateGroupGeometry( mesh,
new THREE.SphereGeometry(
data.radius, data.widthSegments, data.heightSegments, data.phiStart, data.phiLength, data.thetaStart, data.thetaLength
)
);
}
var folder = gui.addFolder('THREE.SphereGeometry');
folder.add( data, 'radius', 1, 30 ).onChange( generateGeometry );
folder.add( data, 'widthSegments', 3, 32 ).step(1).onChange( generateGeometry );
folder.add( data, 'heightSegments', 2, 32 ).step(1).onChange( generateGeometry );
folder.add( data, 'phiStart', 0, twoPi ).onChange( generateGeometry );
folder.add( data, 'phiLength', 0, twoPi ).onChange( generateGeometry );
folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
generateGeometry();
},
TetrahedronGeometry : function() {
......@@ -262,6 +399,130 @@ var guis = {
generateGeometry()
},
TextGeometry : function( mesh ) {
var data = {
text : "TextGeometry",
size : 5,
height : 2,
curveSegments : 12,
font : "helvetiker",
weight : "normal",
style : "normal",
bevelEnabled : false,
bevelThickness : 1,
bevelSize : 0.5
};
var fonts = [
"helvetiker",
"optimer",
"gentilis",
"droid serif"
]
var weights = [
"normal", "bold"
]
function generateGeometry() {
var geometry = new THREE.TextGeometry( data.text, data )
geometry.center()
updateGroupGeometry( mesh, geometry );
}
//Hide the wireframe
mesh.children[0].visible = false;
var folder = gui.addFolder('THREE.TextGeometry');
folder.add( data, 'text' ).onChange( generateGeometry );
folder.add( data, 'size', 1, 30 ).onChange( generateGeometry );
folder.add( data, 'height', 1, 20 ).onChange( generateGeometry );
folder.add( data, 'curveSegments', 1, 20 ).step(1).onChange( generateGeometry );
folder.add( data, 'font', fonts ).onChange( generateGeometry );
folder.add( data, 'weight', weights ).onChange( generateGeometry );
// folder.add( data, 'style', 1, 1 ).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 );
generateGeometry();
},
TorusGeometry : function( mesh ) {
var data = {
radius : 10,
tube : 3,
radialSegments : 16,
tubularSegments : 100,
arc : twoPi
};
function generateGeometry() {
updateGroupGeometry( mesh,
new THREE.TorusGeometry(
data.radius, data.tube, data.radialSegments, data.tubularSegments, data.arc
)
)
}
var folder = gui.addFolder('THREE.TorusGeometry');
folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
folder.add( data, 'tube', 0.1, 10 ).onChange( generateGeometry );
folder.add( data, 'radialSegments', 2, 30 ).step(1).onChange( generateGeometry );
folder.add( data, 'tubularSegments', 3, 200 ).step(1).onChange( generateGeometry );
folder.add( data, 'arc', 0.1, twoPi ).onChange( generateGeometry );
generateGeometry();
},
TorusKnotGeometry : function( mesh ) {
var data = {
radius : 10,
tube : 3,
radialSegments : 64,
tubularSegments : 8,
p : 2,
q : 3,
heightScale : 1
};
function generateGeometry() {
updateGroupGeometry( mesh,
new THREE.TorusKnotGeometry(
data.radius, data.tube, data.radialSegments, data.tubularSegments,
data.p, data.q, data.heightScale
)
)
}
var folder = gui.addFolder('THREE.TorusGeometry');
folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry )
folder.add( data, 'tube', 0.1, 10 ).onChange( generateGeometry )
folder.add( data, 'radialSegments', 3, 300 ).step(1).onChange( generateGeometry )
folder.add( data, 'tubularSegments', 3, 20 ).step(1).onChange( generateGeometry )
folder.add( data, 'p', 1, 20 ).step(1).onChange( generateGeometry )
folder.add( data, 'q', 1, 20 ).step(1).onChange( generateGeometry )
folder.add( data, 'heightScale', 1, 20 ).onChange( generateGeometry )
generateGeometry()
}
}
......@@ -272,6 +533,52 @@ function chooseFromHash ( mesh ) {
switch (selectedGeometry) {
case "BoxGeometry" :
guis.BoxGeometry( mesh )
break;
case "CircleGeometry" :
guis.CircleGeometry( mesh )
break;
case "CylinderGeometry" :
guis.CylinderGeometry( mesh )
break;
case "PlaneGeometry" :
guis.PlaneGeometry( mesh )
break;
case "RingGeometry" :
guis.RingGeometry( mesh )
break;
case "SphereGeometry" :
guis.SphereGeometry( mesh )
break;
case "TextGeometry" :
guis.TextGeometry( mesh )
return {
fixed : true
};
break;
case "TorusGeometry" :
guis.TorusGeometry( mesh )
......@@ -308,5 +615,8 @@ function chooseFromHash ( mesh ) {
break;
}
//No configuration options
return {};
}
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或