Skip to content

T
three.js

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

从无法访问的项目Fork

通知 1
Star 0
Fork 0
T
three.js

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

提交 108c081e 编写于 作者: M Mr.doob
浏览文件
操作

Added deeplinking to documentation system.

上级 dd04457a
隐藏空白更改
内联 并排
Showing with 212 addition and 137 deletion
docs/api/cameras/Camera.html
浏览文件 @ 108c081e
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Camera</title>
<link rel="stylesheet" type="text/css" href="../../styles.css" />
</head>
<body>
<h1>Camera &larr; <a href="../core/Object3D.js">Object3D</a></h1>
<h1>Camera &larr; <a href="javascript:goTo('core/Object3D')">Object3D</a></h1>
<div>Abstract base class for cameras.</div>
<div>Abstract base class for cameras.</div>
<h2>Constructor</h2>
<h2>Constructor</h2>
<h3>Camera()</h3>
<h3>Camera()</h3>
<h2>Properties</h2>
<h2>Properties</h2>
<h3>matrixWorldInverse <a href="../core/Matrix4.js">Matrix4</a></h3>
<h3>matrixWorldInverse <a href="javascript:goTo('core/Matrix4')">Matrix4</a></h3>
<h3>projectionMatrix <a href="../core/Matrix4.js">Matrix4</a></h3>
<h3>projectionMatrix <a href="javascript:goTo('core/Matrix4')">Matrix4</a></h3>
<h3>projectionMatrixInverse <a href="../core/Matrix4.js">Matrix4</a></h3>
<h3>projectionMatrixInverse <a href="javascript:goTo('core/Matrix4')">Matrix4</a></h3>
<h2>Methods</h2>
<h2>Methods</h2>
<h3>lookAt( vector <a href="../core/Vector3.js">Vector3</a> )</h3>
<div>Orient camera to look at Vector3()</div>
<h3>lookAt( vector <a href="javascript:goTo('core/Vector3')">Vector3</a> )</h3>
<div>
Orient camera to look at Vector3()
</div>
<h2>Source</h2>
<h2>Source</h2>
<div><a href="https://github.com/mrdoob/three.js/blob/master/src/cameras/Camera.js" target="_blank">src/cameras/Camera.js</a></div>
</body>
</html>
<div><a href="https://github.com/mrdoob/three.js/blob/master/src/cameras/Camera.js" target="_blank">src/cameras/Camera.js</a></div>
docs/api/cameras/PerspectiveCamera.html
浏览文件 @ 108c081e
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>PerspectiveCamera</title>
<link rel="stylesheet" type="text/css" href="../../styles.css" />
</head>
<body>
<h1>PerspectiveCamera &larr; <a href="../cameras/Camera.html">Camera</a> &larr; <a href="../core/Object3D.html">Object3D</a></h1>
<h1>PerspectiveCamera &larr; <a href="javascript:goTo('cameras/Camera')">Camera</a> &larr; <a href="javascript:goTo('core/Object3D')">Object3D</a></h1>
<div>Camera with perspective projection.</div>
<div>Camera with perspective projection.</div>
<h2>Example</h2>
<h2>Constructor</h2>
<code>var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
scene.add( camera );
</code>
<h3>PerspectiveCamera( fov <a href="../core/Number.html">Number</a>, aspect <a href="../core/Number.html">Number</a>, near <a href="../core/Number.html">Number</a>, far <a href="../core/Number.html">Number</a> )</h3>
<h2>Constructor</h2>
<h3>PerspectiveCamera( fov <a href="javascript:goTo('core/Number')">Number</a>, aspect <a href="javascript:goTo('core/Number')">Number</a>, near <a href="javascript:goTo('core/Number')">Number</a>, far <a href="javascript:goTo('core/Number')">Number</a> )</h3>
<h2>Properties</h2>
<h3>fov <a href="../core/Number.html">Number</a></h3>
<div>Camera frustum vertical field of view.</div>
<h2>Properties</h2>
<h3>aspect <a href="../core/Number.html">Number</a></h3>
<div>Camera frustum aspect ratio.</div>
<h3>fov <a href="javascript:goTo('core/Number')">Number</a></h3>
<div>Camera frustum vertical field of view.</div>
<h3>near <a href="../core/Number.html">Number</a></h3>
<div>Camera frustum near plane.</div>
<h3>aspect <a href="javascript:goTo('core/Number')">Number</a></h3>
<div>Camera frustum aspect ratio.</div>
<h3>far <a href="../core/Number.html">Number</a></h3>
<div>Camera frustum far plane.</div>
<h3>near <a href="javascript:goTo('core/Number')">Number</a></h3>
<div>Camera frustum near plane.</div>
<h3>far <a href="javascript:goTo('core/Number')">Number</a></h3>
<div>Camera frustum far plane.</div>
<h2>Methods</h2>
<h3>updateProjectionMatrix()</h3>
<div>Updates camera's projection matrix. Must be called after change of parameters.</div>
<h2>Methods</h2>
<h3>setLens( focalLength <a href="../core/Number.html">Number</a>, frameSize <a href="../core/Number.html">Number</a> )</h3>
<div>
Uses focal length (in mm) to estimate and set FOV 35mm (fullframe) camera is used if frame size is not specified.<br />
Formula based on <a href="http://www.bobatkins.com/photography/technical/field_of_view.html" target="_blank">http://www.bobatkins.com/photography/technical/field_of_view.html</a>
</div>
<h3>setLens( focalLength <a href="javascript:goTo('core/Number')">Number</a>, frameSize <a href="javascript:goTo('core/Number')">Number</a> )</h3>
<div>
Uses focal length (in mm) to estimate and set FOV 35mm (fullframe) camera is used if frame size is not specified.<br />
Formula based on <a href="http://www.bobatkins.com/photography/technical/field_of_view.html" target="_blank">http://www.bobatkins.com/photography/technical/field_of_view.html</a>
</div>
<h2>Source</h2>
<h3>setViewOffset( fullWidth <a href="javascript:goTo('core/Number')">Number</a>, fullHeight <a href="javascript:goTo('core/Number')">Number</a>, x <a href="javascript:goTo('core/Number')">Number</a>, y <a href="javascript:goTo('core/Number')">Number</a>, width <a href="javascript:goTo('core/Number')">Number</a>, height <a href="javascript:goTo('core/Number')">Number</a> )</h3>
<div>
Sets an offset in a larger frustum. This is useful for multi-window or multi-monitor/multi-machine setups.<br /><br />
<div><a href="https://github.com/mrdoob/three.js/blob/master/src/cameras/PerspectiveCamera.js" target="_blank">src/cameras/PerspectiveCamera.js</a></div>
</body>
</html>
For example, if you have 3x2 monitors and each monitor is 1920x1080 and the monitors are in grid like this:<br /><br />
<pre>+---+---+---+
| A | B | C |
+---+---+---+
| D | E | F |
+---+---+---+
</pre>
then for each monitor you would call it like this:<br /><br />
<code>var w = 1920;
var h = 1080;
var fullWidth = w * 3;
var fullHeight = h * 2;
// --A--
camera.setOffset( fullWidth, fullHeight, w * 0, h * 0, w, h );
//--B--
camera.setOffset( fullWidth, fullHeight, w * 1, h * 0, w, h );
//--C--
camera.setOffset( fullWidth, fullHeight, w * 2, h * 0, w, h );
//--D--
camera.setOffset( fullWidth, fullHeight, w * 0, h * 1, w, h );
//--E--
camera.setOffset( fullWidth, fullHeight, w * 1, h * 1, w, h );
//--F--
camera.setOffset( fullWidth, fullHeight, w * 2, h * 1, w, h );
</code><br />
Note there is no reason monitors have to be the same size or in a grid.
</div>
<h3>updateProjectionMatrix()</h3>
<div>
Updates camera's projection matrix. Must be called after change of parameters.
</div>
<h2>Source</h2>
<div><a href="https://github.com/mrdoob/three.js/blob/master/src/cameras/PerspectiveCamera.js" target="_blank">src/cameras/PerspectiveCamera.js</a></div>
docs/index.html
浏览文件 @ 108c081e
......@@ -36,78 +36,150 @@
}
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
iframe {
border: 0;
#panel ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
#viewer {
overflow: auto;
}
#viewer h1 {
color: #444;
font-size: 25px;
}
#viewer h2 {
color: #999;
font-size: 18px;
margin-top: 40px;
}
#viewer h3 {
font-size: 15px;
margin-top: 30px;
}
#viewer div {
padding-left: 30px;
}
#viewer code {
display: block;
margin: 0px;
width: 90%;
padding: 20px;
white-space: pre;
background-color: #f9f9f9;
overflow: auto;
}
</style>
</head>
<body>
<div id="panel">
<h1>Core</h1>
<ul>
<li><a href="api/core/Clock.html" target="page">Clock</a></li>
<li><a href="api/core/Color.html" target="page">Color</a></li>
<li><a href="api/core/Edge.html" target="page">Edge</a></li>
<li><a href="api/core/Face3.html" target="page">Face3</a></li>
<li><a href="api/core/Face4.html" target="page">Face4</a></li>
<li><a href="api/core/Geometry.html" target="page">Geometry</a></li>
<li><a href="api/core/Math.html" target="page">Math</a></li>
<li><a href="api/core/Matrix3.html" target="page">Matrix3</a></li>
<li><a href="api/core/Matrix4.html" target="page">Matrix4</a></li>
<li><a href="api/core/Object3D.html" target="page">Object3D</a></li>
<li><a href="api/core/Projector.html" target="page">Projector</a></li>
<li><a href="api/core/Quaternion.html" target="page">Quaternion</a></li>
<li><a href="api/core/Ray.html" target="page">Ray</a></li>
<li><a href="api/core/Rectangle.html" target="page">Rectangle</a></li>
<li><a href="api/core/Spline.html" target="page">Spline</a></li>
<li><a href="api/core/UV.html" target="page">UV</a></li>
<li><a href="api/core/Vector2.html" target="page">Vector2</a></li>
<li><a href="api/core/Vector3.html" target="page">Vector3</a></li>
<li><a href="api/core/Vector4.html" target="page">Vector4</a></li>
<li><a href="api/core/Vertex.html" target="page">Vertex</a></li>
</ul>
<h1>Cameras</h1>
<ul>
<li><a href="api/cameras/PerspectiveCamera.html" target="page">PerspectiveCamera</a></li>
<li><a href="api/cameras/OrtographicCamera.html" target="page">OrtographicCamera</a></li>
</ul>
<h1>Lights</h1>
<ul>
<li><a href="api/cameras/Camera.html" target="page">Camera</a></li>
<li><a href="api/cameras/PerspectiveCamera.html" target="page">PerspectiveCamera</a></li>
<li><a href="api/cameras/OrtographicCamera.html" target="page">OrtographicCamera</a></li>
</ul>
</div>
<iframe id="page" src="api/cameras/Camera.html"></iframe>
<div id="panel"></div>
<div id="viewer"></div>
<script>
var margin = 220;
var panel = document.getElementById( 'panel' );
var page = document.getElementById( 'page' );
var viewer = document.getElementById( 'viewer' );
var pages = {
"Core": [
{ name: "Clock", path: "core/Clock" },
{ name: "Color", path: "core/Color" },
{ name: "Edge", path: "core/Edge" },
{ name: "Face3", path: "core/Face3" },
{ name: "Face4", path: "core/Face4" },
{ name: "Frustum", path: "core/Frustum" },
{ name: "Geometry", path: "core/Geometry" },
{ name: "Math", path: "core/Math" },
{ name: "Matrix3", path: "core/Matrix3" },
{ name: "Matrix4", path: "core/Matrix4" },
{ name: "Object3D", path: "core/Object3D" },
{ name: "Projector", path: "core/Projector" },
{ name: "Quaternion", path: "core/Quaternion" },
{ name: "Ray", path: "core/Ray" },
{ name: "Rectangle", path: "core/Rectangle" },
{ name: "Spline", path: "core/Spline" },
{ name: "UV", path: "core/UV" },
{ name: "Vector2", path: "core/Vector2" },
{ name: "Vector3", path: "core/Vector3" },
{ name: "Vector4", path: "core/Vector4" },
{ name: "Vertex", path: "core/Vertex" }
],
"Cameras": [
{ name: "PerspectiveCamera", path: "cameras/PerspectiveCamera" },
{ name: "OrtographicCamera", path: "cameras/OrtographicCamera" }
],
"Lights": [
{ name: "AmbientLight", path: "lights/AmbientLight" },
{ name: "DirectionalLight", path: "lights/DirectionalLight" },
{ name: "PointLight", path: "lights/PointLight" },
{ name: "SpotLight", path: "lights/SpotLight" },
]
};
var html = '';
for ( var category in pages ) {
html += '<h1>' + category + '</h1>';
for ( var i = 0; i < pages[ category ].length; i ++ ) {
var page = pages[ category ][ i ];
html += '<li><a href="javascript:goTo(\'' + page.path + '\')">' + page.name + '</a></li>';
}
}
panel.innerHTML += '<ul>' + html + '</ul>';
// Page loading
function goTo( path ) {
viewer.innerHTML = '';
window.location.hash = path
var xhr = new XMLHttpRequest();
xhr.open( 'GET', 'api/' + path + '.html', true );
xhr.onreadystatechange = function () {
if ( xhr.readyState == 4 && ( xhr.status == 200 || xhr.status == 0 ) ) {
viewer.innerHTML = xhr.responseText + '<br>';
}
};
xhr.send( null );
}
goTo( window.location.hash.substring(1) );
// Layout
var margin = 200;
function updateLayout() {
panel.style.height = window.innerHeight + 'px';
page.style.marginLeft = margin + 'px';
page.style.width = ( window.innerWidth - margin ) + 'px';
page.style.height = window.innerHeight + 'px';
viewer.style.marginLeft = margin + 'px';
viewer.style.width = ( window.innerWidth - margin ) + 'px';
viewer.style.height = window.innerHeight + 'px';
}
......
docs/styles.css 已删除 100644 → 0
浏览文件 @ dd04457a
body {
margin: 20;
color: #555;
font-family: Arial, sans-serif;
font-size: 15px;
}
h1 {
color: #444;
font-size: 25px;
}
h2 {
color: #999;
font-size: 18px;
margin-top: 40px;
}
h3 {
font-size: 15px;
margin-top: 30px;
}
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或