Hilo/docs/api-zh/symbols/Camera3d.html
2018-01-03 11:26:57 +08:00

1110 lines
30 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="generator" content="JsDoc Toolkit"/>
<title>Camera3d - Hilo API 参考文档</title>
<style>
iframe{
border:1px solid #333;
}
</style>
<link href="../../bootstrap3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link href="../../bootstrap3.0.3/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="../../css/prettify.min.css" rel="stylesheet">
<link href="../../css/api.min.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<span>Hilo</span><span></span>
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="//hiloteam.github.io/index.html">首页</a></li>
<li><a href="//github.com/hiloteam/Hilo" target="_blank">源码下载</a></li>
<li class="active"><a href="../index.html">API文档</a></li>
<li><a href="//hiloteam.github.io/tutorial/index.html">教程文档</a></li>
<li><a href="//hiloteam.github.io/examples/index.html">作品演示</a></li>
</u>
</div>
</div>
</div>
<div class="container main">
<div class="col-md-3">
<div class="bs-sidebar well">
<!-- <div class="hilo-header">类列表</div> -->
<ul class="nav bs-sidenav">
<li class="nav-pkg">core<span></span></li>
<li class="nav-class"><a href="../symbols/Class.html">Class</a></li>
<li class="nav-class"><a href="../symbols/Hilo.html">Hilo</a></li>
<li class="nav-pkg">event<span></span></li>
<li class="nav-class"><a href="../symbols/EventMixin.html">EventMixin</a></li>
<li class="nav-pkg">game<span></span></li>
<li class="nav-class"><a href="../symbols/Camera.html">Camera</a></li>
<li class="nav-class"><a href="../symbols/Camera3d.html">Camera3d</a></li>
<li class="nav-class"><a href="../symbols/ParticleSystem.html">ParticleSystem</a></li>
<li class="nav-pkg">geom<span></span></li>
<li class="nav-class"><a href="../symbols/Matrix.html">Matrix</a></li>
<li class="nav-pkg">loader<span></span></li>
<li class="nav-class"><a href="../symbols/LoadQueue.html">LoadQueue</a></li>
<li class="nav-pkg">media<span></span></li>
<li class="nav-class"><a href="../symbols/HTMLAudio.html">HTMLAudio</a></li>
<li class="nav-class"><a href="../symbols/WebAudio.html">WebAudio</a></li>
<li class="nav-class"><a href="../symbols/WebSound.html">WebSound</a></li>
<li class="nav-pkg">renderer<span></span></li>
<li class="nav-class"><a href="../symbols/CanvasRenderer.html">CanvasRenderer</a></li>
<li class="nav-class"><a href="../symbols/DOMRenderer.html">DOMRenderer</a></li>
<li class="nav-class"><a href="../symbols/Renderer.html">Renderer</a></li>
<li class="nav-class"><a href="../symbols/WebGLRenderer.html">WebGLRenderer</a></li>
<li class="nav-pkg">tween<span></span></li>
<li class="nav-class"><a href="../symbols/Ease.html">Ease</a></li>
<li class="nav-class"><a href="../symbols/Tween.html">Tween</a></li>
<li class="nav-pkg">util<span></span></li>
<li class="nav-class"><a href="../symbols/TextureAtlas.html">TextureAtlas</a></li>
<li class="nav-class"><a href="../symbols/Ticker.html">Ticker</a></li>
<li class="nav-class"><a href="../symbols/browser.html">browser</a></li>
<li class="nav-class"><a href="../symbols/drag.html">drag</a></li>
<li class="nav-class"><a href="../symbols/util.html">util</a></li>
<li class="nav-pkg">view<span></span></li>
<li class="nav-class"><a href="../symbols/Bitmap.html">Bitmap</a></li>
<li class="nav-class"><a href="../symbols/BitmapText.html">BitmapText</a></li>
<li class="nav-class"><a href="../symbols/Button.html">Button</a></li>
<li class="nav-class"><a href="../symbols/CacheMixin.html">CacheMixin</a></li>
<li class="nav-class"><a href="../symbols/Container.html">Container</a></li>
<li class="nav-class"><a href="../symbols/DOMElement.html">DOMElement</a></li>
<li class="nav-class"><a href="../symbols/Drawable.html">Drawable</a></li>
<li class="nav-class"><a href="../symbols/Graphics.html">Graphics</a></li>
<li class="nav-class"><a href="../symbols/Sprite.html">Sprite</a></li>
<li class="nav-class"><a href="../symbols/Stage.html">Stage</a></li>
<li class="nav-class"><a href="../symbols/Text.html">Text</a></li>
<li class="nav-class"><a href="../symbols/View.html">View</a></li>
</ul>
</div>
</div>
<div class="col-md-9">
<!-- ============================== class title ============================ -->
<h1 style="margin-top:0;">
Camera3d
</h1><hr style="margin-top:10px;" />
<!-- ============================== class summary ========================== -->
<p class="description">
<span style="display:block;margin:0 0 2px 0;">
<b style="margin-right:10px;">模块</b> hilo/game/Camera3d
</span>
<span style="display:block;margin:0 0 2px 0;">
<b style="margin-right:10px;">依赖</b>
<span><a href="../symbols/Class.html">hilo/core/Class</a></span>, <span><a href="../symbols/util.html">hilo/util/util</a></span>
</span>
<span style="display:block;margin:0 0 2px 0;">
<b style="margin-right:10px;">源码</b>
<a href="../symbols/src/docs_api-zh_code_game_Camera3d.js.html">Camera3d.js</a>
</span>
<br>
Camera3d 伪3D虚拟摄像机。
</p>
<!-- ============================== properties summary ===================== -->
<div style="margin:30px 0 5px 0;">
<h3 style="display:inline;margin-right:10px;">属性概览</h3>
</div>
<table class="table table-striped table-bordered table-condensed table-symbol" cellspacing="0">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">属性</th>
<th scope="col">定义于</th>
</tr>
</thead>
<tbody>
<tr >
<td>
</td>
<td class="fixedFont">
<div>
<!-- -->
<b><a href="../symbols/Camera3d.html#fv">fv</a></b>:Number
</div>
<div class="description">
镜头视点距离(屏幕视点相对眼睛距离,绝对了坐标缩放比例)。
</div>
</td>
<td>
Camera3d
</td>
</tr>
<tr >
<td>
</td>
<td class="fixedFont">
<div>
<!-- -->
<b><a href="../symbols/Camera3d.html#fx">fx</a></b>:Number
</div>
<div class="description">
镜头视点X屏幕视点相对屏幕左上角X距离
</div>
</td>
<td>
Camera3d
</td>
</tr>
<tr >
<td>
</td>
<td class="fixedFont">
<div>
<!-- -->
<b><a href="../symbols/Camera3d.html#fy">fy</a></b>:Number
</div>
<div class="description">
镜头视点Y屏幕视点相对屏幕左上角Y距离
</div>
</td>
<td>
Camera3d
</td>
</tr>
<tr >
<td>
</td>
<td class="fixedFont">
<div>
<!-- -->
<b><a href="../symbols/Camera3d.html#rotationX">rotationX</a></b>:Number
</div>
<div class="description">
X轴旋转角度。
</div>
</td>
<td>
Camera3d
</td>
</tr>
<tr >
<td>
</td>
<td class="fixedFont">
<div>
<!-- -->
<b><a href="../symbols/Camera3d.html#rotationY">rotationY</a></b>:Number
</div>
<div class="description">
Y轴旋转角度。
</div>
</td>
<td>
Camera3d
</td>
</tr>
<tr >
<td>
</td>
<td class="fixedFont">
<div>
<!-- -->
<b><a href="../symbols/Camera3d.html#rotationZ">rotationZ</a></b>:Number
</div>
<div class="description">
Z轴旋转角度。
</div>
</td>
<td>
Camera3d
</td>
</tr>
<tr >
<td>
</td>
<td class="fixedFont">
<div>
<!-- -->
<b><a href="../symbols/Camera3d.html#stage">stage</a></b>:Object
</div>
<div class="description">
3D对象所在容器可以是stage或container结合ticker时是必须参数用来Z深度排序。
</div>
</td>
<td>
Camera3d
</td>
</tr>
<tr >
<td>
</td>
<td class="fixedFont">
<div>
<!-- -->
<b><a href="../symbols/Camera3d.html#x">x</a></b>:Number
</div>
<div class="description">
镜头三维坐标x。
</div>
</td>
<td>
Camera3d
</td>
</tr>
<tr >
<td>
</td>
<td class="fixedFont">
<div>
<!-- -->
<b><a href="../symbols/Camera3d.html#y">y</a></b>:Number
</div>
<div class="description">
镜头三维坐标y。
</div>
</td>
<td>
Camera3d
</td>
</tr>
<tr >
<td>
</td>
<td class="fixedFont">
<div>
<!-- -->
<b><a href="../symbols/Camera3d.html#z">z</a></b>:Number
</div>
<div class="description">
镜头三维坐标z。
</div>
</td>
<td>
Camera3d
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
function toggleProperties(){
var alink = $('#propToggleIcon');
if(alink.hasClass('glyphicon-circle-arrow-right')){
alink.removeClass('glyphicon-circle-arrow-right');
alink.addClass('glyphicon-circle-arrow-down');
$('#propToggleTip').html('隐藏继承属性');
$('.inheritProp').show();
}else{
alink.removeClass('glyphicon-circle-arrow-down');
alink.addClass('glyphicon-circle-arrow-right');
$('#propToggleTip').html('显示继承属性');
$('.inheritProp').hide();
}
}
</script>
<!-- ============================== methods summary ======================== -->
<div style="margin:30px 0 5px; 0">
<h3 style="display:inline;margin-right:10px;">方法概览</h3>
</div>
<table class="table table-striped table-bordered table-condensed table-symbol" cellspacing="0">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">方法</th>
<th scope="col">定义于</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>
<div class="fixedFont">
<b><a href="#constructor">Camera3d</a></b>()
</div>
<div class="description">构造函数</div>
</td>
<td>Camera3d</td>
</tr>
<tr >
<td>
</td>
<td class="fixedFont">
<div><b><a href="../symbols/Camera3d.html#project">project</a></b>(vector3D:object, view:<a href="../symbols/View.html">View</a>):Object
</div>
<div class="description">
将三维坐标转换投影为二维坐标。
</div>
</td>
<td>
Camera3d
</td>
</tr>
<tr >
<td>
</td>
<td class="fixedFont">
<div><b><a href="../symbols/Camera3d.html#rotateX">rotateX</a></b>(angle:Number)
</div>
<div class="description">
旋转X轴方向角度相当于欧拉角系统的 beta。
</div>
</td>
<td>
Camera3d
</td>
</tr>
<tr >
<td>
</td>
<td class="fixedFont">
<div><b><a href="../symbols/Camera3d.html#rotateY">rotateY</a></b>(angle:Number)
</div>
<div class="description">
旋转Y轴方向角度相当于欧拉角系统的 gamma。
</div>
</td>
<td>
Camera3d
</td>
</tr>
<tr >
<td>
</td>
<td class="fixedFont">
<div><b><a href="../symbols/Camera3d.html#rotateZ">rotateZ</a></b>(angle:Number)
</div>
<div class="description">
旋转Z轴方向角度相当于欧拉角系统的 alpha。
</div>
</td>
<td>
Camera3d
</td>
</tr>
<tr >
<td>
</td>
<td class="fixedFont">
<div><b><a href="../symbols/Camera3d.html#sortZ">sortZ</a></b>()
</div>
<div class="description">
Z深度排序。
</div>
</td>
<td>
Camera3d
</td>
</tr>
<tr >
<td>
</td>
<td class="fixedFont">
<div><b><a href="../symbols/Camera3d.html#tick">tick</a></b>()
</div>
<div class="description">
Ticker 轮询使用。
</div>
</td>
<td>
Camera3d
</td>
</tr>
<tr >
<td>
</td>
<td class="fixedFont">
<div><b><a href="../symbols/Camera3d.html#translate">translate</a></b>(x:Number, y:Number, z:Number)
</div>
<div class="description">
仿射矩阵位移变换不同于直接修改Camera3d.x/y/z.
</div>
</td>
<td>
Camera3d
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
function toggleMethods(){
var alink = $('#methodToggleIcon');
if(alink.hasClass('glyphicon-circle-arrow-right')){
alink.removeClass('glyphicon-circle-arrow-right');
alink.addClass('glyphicon-circle-arrow-down');
$('#methodToggleTip').html('隐藏继承方法');
$('.inheritMethod').show();
}else{
alink.removeClass('glyphicon-circle-arrow-down');
alink.addClass('glyphicon-circle-arrow-right');
$('#methodToggleTip').html('显示继承方法');
$('.inheritMethod').hide();
}
}
</script>
<!-- ============================== field details ========================== -->
<br/>
<div class="">
<h3 style="margin-bottom:15px;">属性详情</h3>
</div>
<a class="anchor" name="fv"> </a>
<div class="member-box">
<div class="member-header">
<b>fv</b><span class="light">:Number</span>
</div>
<div class="description">
镜头视点距离(屏幕视点相对眼睛距离,绝对了坐标缩放比例)。
</div>
</div>
<a class="anchor" name="fx"> </a>
<div class="member-box">
<div class="member-header">
<b>fx</b><span class="light">:Number</span>
</div>
<div class="description">
镜头视点X屏幕视点相对屏幕左上角X距离
</div>
</div>
<a class="anchor" name="fy"> </a>
<div class="member-box">
<div class="member-header">
<b>fy</b><span class="light">:Number</span>
</div>
<div class="description">
镜头视点Y屏幕视点相对屏幕左上角Y距离
</div>
</div>
<a class="anchor" name="rotationX"> </a>
<div class="member-box">
<div class="member-header">
<b>rotationX</b><span class="light">:Number</span>
</div>
<div class="description">
X轴旋转角度。
</div>
</div>
<a class="anchor" name="rotationY"> </a>
<div class="member-box">
<div class="member-header">
<b>rotationY</b><span class="light">:Number</span>
</div>
<div class="description">
Y轴旋转角度。
</div>
</div>
<a class="anchor" name="rotationZ"> </a>
<div class="member-box">
<div class="member-header">
<b>rotationZ</b><span class="light">:Number</span>
</div>
<div class="description">
Z轴旋转角度。
</div>
</div>
<a class="anchor" name="stage"> </a>
<div class="member-box">
<div class="member-header">
<b>stage</b><span class="light">:Object</span>
</div>
<div class="description">
3D对象所在容器可以是stage或container结合ticker时是必须参数用来Z深度排序。
</div>
</div>
<a class="anchor" name="x"> </a>
<div class="member-box">
<div class="member-header">
<b>x</b><span class="light">:Number</span>
</div>
<div class="description">
镜头三维坐标x。
</div>
</div>
<a class="anchor" name="y"> </a>
<div class="member-box">
<div class="member-header">
<b>y</b><span class="light">:Number</span>
</div>
<div class="description">
镜头三维坐标y。
</div>
</div>
<a class="anchor" name="z"> </a>
<div class="member-box">
<div class="member-header">
<b>z</b><span class="light">:Number</span>
</div>
<div class="description">
镜头三维坐标z。
</div>
</div>
<!-- ============================== constructor details ==================== -->
<br/>
<div class="details">
<a class="anchor" name="constructor"> </a>
<div class="">
<h3 style="margin-bottom:15px;">构造函数</h3>
</div>
<div class="member-box">
<div class="member-header">
<b>Camera3d</b>()
</div>
</div>
</div>
<!-- ============================== method details ========================= -->
<br/>
<div class=""><h3 style="margin-bottom:15px;">方法详情</h3></div>
<a class="anchor" name="project"> </a>
<div class="member-box">
<div class="member-header">
<b>project</b>(vector3D:object, view:<a href="../symbols/View.html">View</a>):<span class="light">Object</span>
</div>
<div class="description">将三维坐标转换投影为二维坐标。</div>
<dl class="detailList">
<dt class="heading"><span class="label">parameters</span></dt>
<dt style="margin-left:20px;font-weight:normal;">
<b>vector3D</b>:<span>object</span>
— 三维坐标对象必须含有x, y, z属性。
</dt>
<dt style="margin-left:20px;font-weight:normal;">
<b>view</b>:<span><a href="../symbols/View.html">View</a></span>
— Hilo.View对象用于自动转换坐标。
</dt>
</dl>
<dl class="detailList">
<dt class="heading"><span class="label">return</span></dt>
<dd style="margin-left:20px;font-weight:normal;"><span>Object</span> — 二维坐标对象包括缩放和z属性例子:{x:x, y:y, z:z, scale}</dd>
</dl>
</div>
<a class="anchor" name="rotateX"> </a>
<div class="member-box">
<div class="member-header">
<b>rotateX</b>(angle:Number)
</div>
<div class="description">旋转X轴方向角度相当于欧拉角系统的 beta。</div>
<dl class="detailList">
<dt class="heading"><span class="label">parameters</span></dt>
<dt style="margin-left:20px;font-weight:normal;">
<b>angle</b>:<span>Number</span>
— 旋转角度。
</dt>
</dl>
</div>
<a class="anchor" name="rotateY"> </a>
<div class="member-box">
<div class="member-header">
<b>rotateY</b>(angle:Number)
</div>
<div class="description">旋转Y轴方向角度相当于欧拉角系统的 gamma。</div>
<dl class="detailList">
<dt class="heading"><span class="label">parameters</span></dt>
<dt style="margin-left:20px;font-weight:normal;">
<b>angle</b>:<span>Number</span>
— 旋转角度。
</dt>
</dl>
</div>
<a class="anchor" name="rotateZ"> </a>
<div class="member-box">
<div class="member-header">
<b>rotateZ</b>(angle:Number)
</div>
<div class="description">旋转Z轴方向角度相当于欧拉角系统的 alpha。</div>
<dl class="detailList">
<dt class="heading"><span class="label">parameters</span></dt>
<dt style="margin-left:20px;font-weight:normal;">
<b>angle</b>:<span>Number</span>
— 旋转角度。
</dt>
</dl>
</div>
<a class="anchor" name="sortZ"> </a>
<div class="member-box">
<div class="member-header">
<b>sortZ</b>()
</div>
<div class="description">Z深度排序。</div>
</div>
<a class="anchor" name="tick"> </a>
<div class="member-box">
<div class="member-header">
<b>tick</b>()
</div>
<div class="description">Ticker 轮询使用。</div>
</div>
<a class="anchor" name="translate"> </a>
<div class="member-box">
<div class="member-header">
<b>translate</b>(x:Number, y:Number, z:Number)
</div>
<div class="description">仿射矩阵位移变换不同于直接修改Camera3d.x/y/z. 是在Camera3d依次做坐标位移 - 旋转变换 后再加上一个位移变换。主要功能可以做Zoomin/out 功能</div>
<dl class="detailList">
<dt class="heading"><span class="label">parameters</span></dt>
<dt style="margin-left:20px;font-weight:normal;">
<b>x</b>:<span>Number</span>
— x坐标
</dt>
<dt style="margin-left:20px;font-weight:normal;">
<b>y</b>:<span>Number</span>
— y坐标
</dt>
<dt style="margin-left:20px;font-weight:normal;">
<b>z</b>:<span>Number</span>
— z坐标
</dt>
</dl>
</div>
</div>
</div>
<footer class="col-md-12">
<hr>
<p>&copy; Hilo 2016</p>
</footer>
<script src="../../js/jquery.min.js"></script>
<script src="../../bootstrap3.0.3/js/bootstrap.min.js"></script>
<script src="../../js/prettify.min.js"></script>
<script type="text/javascript">
//make code pretty
$('pre').addClass('prettyprint linenums fixedFont');
window.prettyPrint && prettyPrint();
</script>
</body>
</html>