Skip to content

T
three.js

车家大少爷 / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

提交 dddfcc6a 编写于 作者: M Michael Herzog 提交者： Mr.doob
浏览文件
操作

Documentation: Add more live examples (#9776) 

* Documentation: Add more live examples

* Documentation: Correct format
上级 2f8155f7
隐藏空白更改
内联 并排
Showing with 282 addition and 84 deletion
docs/api/geometries/ExtrudeGeometry.html
浏览文件 @ dddfcc6a
......@@ -12,7 +12,53 @@
<h1>[name]</h1>
<div class="desc">Creates extruded geometry from a path shape</div>
<div class="desc">Creates extruded geometry from a path shape.</div>
<iframe id="scene" src="scenes/geometry-browser.html#ExtrudeGeometry"></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>Example</h2>
<code>
var length = 12, width = 8;
var shape = new THREE.Shape();
shape.moveTo( 0,0 );
shape.lineTo( 0, width );
shape.lineTo( length, width );
shape.lineTo( length, 0 );
shape.lineTo( 0, 0 );
var extrudeSettings = {
steps: 2,
amount: 16,
bevelEnabled: true,
bevelThickness: 1,
bevelSize: 1,
bevelSegments: 1
};
var geometry = new THREE.ExtrudeGeometry( shape, data );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var mesh = new THREE.Mesh( geometry, material ) ;
scene.add( mesh );
</code>
<h2>Constructor</h2>
......@@ -23,20 +69,20 @@
shapes — Shape or an array of shapes. <br />
options — Object that can contain the following parameters.
<ul>
<li>curveSegments — int. number of points on the curves</li>
<li>steps — int. number of points used for subdividing segements of extrude spline</li>
<li>amount — int. Depth to extrude the shape</li>
<li>bevelEnabled — bool. turn on bevel</li>
<li>bevelThickness — float. how deep into the original shape bevel goes</li>
<li>bevelSize — float. how far from shape outline is bevel</li>
<li>bevelSegments — int. number of bevel layers</li>
<li>extrudePath — THREE.CurvePath. 3d spline path to extrude shape along. (creates Frames if (frames aren't defined)</li>
<li>frames — THREE.TubeGeometry.FrenetFrames. containing arrays of tangents, normals, binormals</li>
<li>material — int. material index for front and back faces</li>
<li>extrudeMaterial — int. material index for extrusion and beveled faces</li>
<li>UVGenerator — Object. object that provides UV generator functions</li>
</ul>
<ul>
<li>curveSegments — int. number of points on the curves</li>
<li>steps — int. number of points used for subdividing segements of extrude spline</li>
<li>amount — int. Depth to extrude the shape</li>
<li>bevelEnabled — bool. turn on bevel</li>
<li>bevelThickness — float. how deep into the original shape bevel goes</li>
<li>bevelSize — float. how far from shape outline is bevel</li>
<li>bevelSegments — int. number of bevel layers</li>
<li>extrudePath — THREE.CurvePath. 3d spline path to extrude shape along. (creates Frames if frames aren't defined)</li>
<li>frames — THREE.TubeGeometry.FrenetFrames. containing arrays of tangents, normals, binormals</li>
<li>material — int. material index for front and back faces</li>
<li>extrudeMaterial — int. material index for extrusion and beveled faces</li>
<li>UVGenerator — Object. object that provides UV generator functions</li>
</ul>
</div>
<div>
......@@ -53,42 +99,42 @@
<div>
shapes — An Array of shapes to add. <br />
options — Object that can contain the following parameters.
<ul>
<li>curveSegments — int. number of points on the curves</li>
<li>steps — int. number of points used for subdividing segements of extrude spline</li>
<li>amount — int. Depth to extrude the shape</li>
<li>bevelEnabled — bool. turn on bevel</li>
<li>bevelThickness — float. how deep into the original shape bevel goes</li>
<li>bevelSize — float. how far from shape outline is bevel</li>
<li>bevelSegments — int. number of bevel layers</li>
<li>extrudePath — THREE.CurvePath. 3d spline path to extrude shape along. (creates Frames if (frames aren't defined)</li>
<li>frames — THREE.TubeGeometry.FrenetFrames. containing arrays of tangents, normals, binormals</li>
<li>material — int. material index for front and back faces</li>
<li>extrudeMaterial — int. material index for extrusion and beveled faces</li>
<li>UVGenerator — Object. object that provides UV generator functions</li>
</ul>
</div>
<ul>
<li>curveSegments — int. number of points on the curves</li>
<li>steps — int. number of points used for subdividing segements of extrude spline</li>
<li>amount — int. Depth to extrude the shape</li>
<li>bevelEnabled — bool. turn on bevel</li>
<li>bevelThickness — float. how deep into the original shape bevel goes</li>
<li>bevelSize — float. how far from shape outline is bevel</li>
<li>bevelSegments — int. number of bevel layers</li>
<li>extrudePath — THREE.CurvePath. 3d spline path to extrude shape along. (creates Frames if (frames aren't defined)</li>
<li>frames — THREE.TubeGeometry.FrenetFrames. containing arrays of tangents, normals, binormals</li>
<li>material — int. material index for front and back faces</li>
<li>extrudeMaterial — int. material index for extrusion and beveled faces</li>
<li>UVGenerator — Object. object that provides UV generator functions</li>
</ul>
</div>
<div>Adds the shapes to the list to extrude.</div>
<h3>[method:null addShape]([page:Shape shape], [page:Object options])</h3>
<div>
shape — A shape to add. <br />
options — Object that can contain the following parameters.
<ul>
<li>curveSegments — int. number of points on the curves</li>
<li>steps — int. number of points used for subdividing segements of extrude spline</li>
<li>amount — int. Depth to extrude the shape</li>
<li>bevelEnabled — bool. turn on bevel</li>
<li>bevelThickness — float. how deep into the original shape bevel goes</li>
<li>bevelSize — float. how far from shape outline is bevel</li>
<li>bevelSegments — int. number of bevel layers</li>
<li>extrudePath — THREE.CurvePath. 3d spline path to extrude shape along. (creates Frames if (frames aren't defined)</li>
<li>frames — THREE.TubeGeometry.FrenetFrames. containing arrays of tangents, normals, binormals</li>
<li>material — int. material index for front and back faces</li>
<li>extrudeMaterial — int. material index for extrusion and beveled faces</li>
<li>UVGenerator — Object. object that provides UV generator functions</li>
</ul>
</div>
<ul>
<li>curveSegments — int. number of points on the curves</li>
<li>steps — int. number of points used for subdividing segements of extrude spline</li>
<li>amount — int. Depth to extrude the shape</li>
<li>bevelEnabled — bool. turn on bevel</li>
<li>bevelThickness — float. how deep into the original shape bevel goes</li>
<li>bevelSize — float. how far from shape outline is bevel</li>
<li>bevelSegments — int. number of bevel layers</li>
<li>extrudePath — THREE.CurvePath. 3d spline path to extrude shape along. (creates Frames if (frames aren't defined)</li>
<li>frames — THREE.TubeGeometry.FrenetFrames. containing arrays of tangents, normals, binormals</li>
<li>material — int. material index for front and back faces</li>
<li>extrudeMaterial — int. material index for extrusion and beveled faces</li>
<li>UVGenerator — Object. object that provides UV generator functions</li>
</ul>
</div>
<div>Add the shape to the list to extrude.</div>
......
docs/api/geometries/ShapeGeometry.html
浏览文件 @ dddfcc6a
......@@ -12,25 +12,44 @@
<h1>[name]</h1>
<div class="desc">Creates a one-sided polygonal geometry from one or more path shapes. Similar to [page:ExtrudeGeometry]</div>
<div class="desc">Creates a one-sided polygonal geometry from one or more path shapes. Similar to [page:ExtrudeGeometry].</div>
<h2>Example</h2>
<iframe id="scene" src="scenes/geometry-browser.html#ShapeGeometry"></iframe>
<script>
<code>
var rectLength = 120, rectWidth = 40;
// 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' );
var rectShape = new THREE.Shape();
rectShape.moveTo( 0,0 );
rectShape.lineTo( 0, rectWidth );
rectShape.lineTo( rectLength, rectWidth );
rectShape.lineTo( rectLength, 0 );
rectShape.lineTo( 0, 0 );
}
var rectGeom = new THREE.ShapeGeometry( rectShape );
var rectMesh = new THREE.Mesh( rectGeom, new THREE.MeshBasicMaterial( { color: 0xff0000 } ) ) ;
</script>
scene.add( rectMesh );
<h2>Example</h2>
<code>
var length = 16, width = 12;
var shape = new THREE.Shape();
shape.moveTo( 0,0 );
shape.lineTo( 0, width );
shape.lineTo( length, width );
shape.lineTo( length, 0 );
shape.lineTo( 0, 0 );
var geometry = new THREE.ShapeGeometry( shape );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var mesh = new THREE.Mesh( geometry, material ) ;
scene.add( mesh );
</code>
<h2>Constructor</h2>
......
docs/api/geometries/TubeGeometry.html
浏览文件 @ dddfcc6a
......@@ -12,35 +12,55 @@
<h1>[name]</h1>
<div class="desc">Creates a tube that extrudes along a 3d curve</div>
<div class="desc">Creates a tube that extrudes along a 3d curve.</div>
<iframe id="scene" src="scenes/geometry-browser.html#TubeGeometry"></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>Example</h2>
<code>
var CustomSinCurve = THREE.Curve.create(
function ( scale ) { //custom curve constructor
this.scale = (scale === undefined) ? 1 : scale;
},
function ( t ) { //getPoint: t is between 0-1
var tx = t * 3 - 1.5,
ty = Math.sin( 2 * Math.PI * t ),
tz = 0;
return new THREE.Vector3(tx, ty, tz).multiplyScalar(this.scale);
}
);
var path = new CustomSinCurve( 10 );
var geometry = new THREE.TubeGeometry(
path, //path
20, //segments
2, //radius
8, //radiusSegments
false //closed
);
</code>
<code>
var CustomSinCurve = THREE.Curve.create(
function ( scale ) { //custom curve constructor
this.scale = ( scale === undefined ) ? 1 : scale;
},
function ( t ) { //getPoint: t is between 0-1
var tx = t * 3 - 1.5,
ty = Math.sin( 2 * Math.PI * t ),
tz = 0;
return new THREE.Vector3( tx, ty, tz ).multiplyScalar( this.scale );
}
);
var path = new CustomSinCurve( 10 );
var geometry = new THREE.TubeGeometry( path, 20, 2, 8, false );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
</code>
<h2>Constructor</h2>
......
docs/scenes/js/geometry.js
浏览文件 @ dddfcc6a
......@@ -1126,6 +1126,119 @@ var guis = {
generateGeometry();
},
TubeGeometry : function( mesh ) {
var data = {
segments : 20,
radius : 2,
radiusSegments: 8
};
var CustomSinCurve = THREE.Curve.create(
function ( scale ) {
this.scale = ( scale === undefined ) ? 1 : scale;
},
function ( t ) {
var tx = t * 3 - 1.5;
var ty = Math.sin( 2 * Math.PI * t );
var tz = 0;
return new THREE.Vector3( tx, ty, tz ).multiplyScalar( this.scale );
}
);
var path = new CustomSinCurve( 10 );
function generateGeometry() {
updateGroupGeometry( mesh,
new THREE.TubeGeometry( path, data.segments, data.radius, data.radiusSegments, false )
);
}
var folder = gui.addFolder( 'THREE.TubeGeometry' );
folder.add( data, 'segments', 1, 100 ).step( 1 ).onChange( generateGeometry );
folder.add( data, 'radius', 1, 10 ).onChange( generateGeometry );
folder.add( data, 'radiusSegments', 1, 20 ).step( 1 ).onChange( generateGeometry );
generateGeometry();
},
ShapeGeometry: function( mesh ) {
var length = 16, width = 12;
var shape = new THREE.Shape();
shape.moveTo( 0,0 );
shape.lineTo( 0, width );
shape.lineTo( length, width );
shape.lineTo( length, 0 );
shape.lineTo( 0, 0 );
function generateGeometry() {
updateGroupGeometry( mesh,
new THREE.ShapeGeometry( shape )
);
}
var folder = gui.addFolder( 'THREE.ShapeGeometry' );
generateGeometry();
},
ExtrudeGeometry: function( mesh ) {
var data = {
steps: 2,
amount: 16,
bevelEnabled: true,
bevelThickness: 1,
bevelSize: 1,
bevelSegments: 1
};
var length = 12, width = 8;
var shape = new THREE.Shape();
shape.moveTo( 0,0 );
shape.lineTo( 0, width );
shape.lineTo( length, width );
shape.lineTo( length, 0 );
shape.lineTo( 0, 0 );
function generateGeometry() {
updateGroupGeometry( mesh,
new THREE.ExtrudeGeometry( shape, data )
);
}
var folder = gui.addFolder( 'THREE.ExtrudeGeometry' );
folder.add( data, 'steps', 1, 10 ).step( 1 ).onChange( generateGeometry );
folder.add( data, 'amount', 1, 20 ).step( 1 ).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, 'bevelSegments', 1, 5 ).step( 1 ).onChange( generateGeometry );
generateGeometry();
}
};
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或