Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

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

GUI: Added MenuBar. Changed UI.js to use arguments array. Fixed a object picking bug/typo.

上级 7ac2a655
隐藏空白更改
内联 并排
Showing with 74 addition and 55 deletion
gui/index.html
浏览文件 @ 26ae7a78
...@@ -26,6 +26,7 @@ ...@@ -26,6 +26,7 @@
<script type="text/javascript" src="js/UI.js"></script> <script type="text/javascript" src="js/UI.js"></script>
<script type="text/javascript" src="js/ui/Viewport.js"></script> <script type="text/javascript" src="js/ui/Viewport.js"></script>
<script type="text/javascript" src="js/ui/Panel.js"></script> <script type="text/javascript" src="js/ui/Panel.js"></script>
<script type="text/javascript" src="js/ui/MenuBar.js"></script>
<script> <script>
...@@ -43,18 +44,23 @@ ...@@ -43,18 +44,23 @@
// //
var viewport = new Viewport( signals ); var viewport = new Viewport( signals );
viewport.setWidth( '-webkit-calc(100% - 300px)' ); viewport.setTop( '30px' );
viewport.setWidth( '-moz-calc(100% - 300px)' ); viewport.setWidth( '-webkit-calc(100% - 300px)', '-moz-calc(100% - 300px)', 'calc(100% - 300px)' );
viewport.setWidth( 'calc(100% - 300px)' ); viewport.setHeight( '-webkit-calc(100% - 32px)', '-moz-calc(100% - 32px)', 'calc(100% - 32px)' );
viewport.setHeight( '100%' );
document.body.appendChild( viewport.dom ); document.body.appendChild( viewport.dom );
var panel = new Panel( signals ); var panel = new Panel( signals );
panel.setX( '-webkit-calc(100% - 300px)' ); panel.setLeft( '-webkit-calc(100% - 300px)', '-moz-calc(100% - 300px)', 'calc(100% - 300px)' );
panel.setX( '-moz-calc(100% - 300px)' ); panel.setTop( '32px' );
panel.setX( 'calc(100% - 300px)' ); panel.setHeight( '-webkit-calc(100% - 32px)', '-moz-calc(100% - 32px)', 'calc(100% - 32px)' );
document.body.appendChild( panel.dom ); document.body.appendChild( panel.dom );
var menubar = new MenuBar( signals );
menubar.setWidth( '100%' );
menubar.setHeight( '32px' );
document.body.appendChild( menubar.dom );
// //
var geometry = new THREE.SphereGeometry( 75, 25, 15 ); var geometry = new THREE.SphereGeometry( 75, 25, 15 );
......
gui/js/UI.js
浏览文件 @ 26ae7a78
...@@ -4,138 +4,146 @@ UI.Element = function () {}; ...@@ -4,138 +4,146 @@ UI.Element = function () {};
UI.Element.prototype = { UI.Element.prototype = {
setX: function ( value ) { setStyle: function ( style, array ) {
this.dom.style.left = value; for ( var i = 0; i < array.length; i ++ ) {
return this; this.dom.style[ style ] = array[ i ];
}
}, },
setY: function ( value ) { setLeft: function () {
this.setStyle( 'left', arguments );
return this;
},
this.dom.style.top = value; setTop: function () {
this.setStyle( 'top', arguments );
return this; return this;
}, },
setWidth: function ( value ) { setWidth: function () {
this.dom.style.width = value; this.setStyle( 'width', arguments );
return this; return this;
}, },
setHeight: function ( value ) { setHeight: function () {
this.dom.style.height = value; this.setStyle( 'height', arguments );
return this; return this;
}, },
// border // border
setBorder: function ( value ) { setBorder: function () {
this.dom.style.border = value; this.setStyle( 'border', arguments );
return this; return this;
}, },
setBorderTop: function ( value ) { setBorderTop: function () {
this.dom.style.borderTop = value; this.setStyle( 'borderTop', arguments );
return this; return this;
}, },
setBorderBottom: function ( value ) { setBorderBottom: function () {
this.dom.style.borderBottom = value; this.setStyle( 'borderBottom', arguments );
return this; return this;
}, },
setBorderLeft: function ( value ) { setBorderLeft: function () {
this.dom.style.borderLeft = value; this.setStyle( 'borderLeft', arguments );
return this; return this;
}, },
setBorderRight: function ( value ) { setBorderRight: function () {
this.dom.style.borderRight = value; this.setStyle( 'borderRight', arguments );
return this; return this;
}, },
// margin // margin
setMargin: function ( value ) { setMargin: function () {
this.dom.style.margin = value; this.setStyle( 'margin', arguments );
return this; return this;
}, },
setMarginTop: function ( value ) { setMarginTop: function () {
this.dom.style.marginTop = value; this.setStyle( 'marginTop', arguments );
return this; return this;
}, },
setMarginBottom: function ( value ) { setMarginBottom: function () {
this.dom.style.marginBottom = value; this.setStyle( 'marginBottom', arguments );
return this; return this;
}, },
setMarginLeft: function ( value ) { setMarginLeft: function () {
this.dom.style.marginLeft = value; this.setStyle( 'marginLeft', arguments );
return this; return this;
}, },
setMarginRight: function ( value ) { setMarginRight: function () {
this.dom.style.marginRight = value; this.setStyle( 'marginRight', arguments );
return this; return this;
}, },
// padding // padding
setPadding: function ( value ) { setPadding: function () {
this.dom.style.padding = value; this.setStyle( 'padding', arguments );
return this; return this;
}, },
// //
setFontWeight: function ( value ) { setFontWeight: function () {
this.dom.style.fontWeight = value; this.setStyle( 'fontWeight', arguments );
return this; return this;
}, },
setColor: function ( value ) { setColor: function () {
this.dom.style.color = value; this.setStyle( 'color', arguments );
return this; return this;
}, },
setBackgroundColor: function ( value ) { setBackgroundColor: function () {
this.dom.style.backgroundColor = value; this.setStyle( 'backgroundColor', arguments );
return this; return this;
} }
......
gui/js/ui/Panel.js
浏览文件 @ 26ae7a78
...@@ -9,7 +9,8 @@ var Panel = function ( signals ) { ...@@ -9,7 +9,8 @@ var Panel = function ( signals ) {
// Properties // Properties
var properties = new UI.Panel(); var properties = new UI.Panel();
properties.setMargin( '8px' ); properties.setPadding( '8px' );
properties.setBorderTop( '1px solid #ccc' );
properties.add( new UI.Text().setText( 'PROPERTIES' ).setColor( '#666' ) ); properties.add( new UI.Text().setText( 'PROPERTIES' ).setColor( '#666' ) );
...@@ -18,9 +19,9 @@ var Panel = function ( signals ) { ...@@ -18,9 +19,9 @@ var Panel = function ( signals ) {
properties.add( new UI.Text().setText( 'position' ).setColor( '#666' ) ); properties.add( new UI.Text().setText( 'position' ).setColor( '#666' ) );
var positionX = new UI.FloatNumber( 'absolute' ).setX( '90px' ).onChanged( update ); var positionX = new UI.FloatNumber( 'absolute' ).setLeft( '90px' ).onChanged( update );
var positionY = new UI.FloatNumber( 'absolute' ).setX( '160px' ).onChanged( update ); var positionY = new UI.FloatNumber( 'absolute' ).setLeft( '160px' ).onChanged( update );
var positionZ = new UI.FloatNumber( 'absolute' ).setX( '230px' ).onChanged( update ); var positionZ = new UI.FloatNumber( 'absolute' ).setLeft( '230px' ).onChanged( update );
properties.add( positionX, positionY, positionZ ); properties.add( positionX, positionY, positionZ );
...@@ -28,9 +29,9 @@ var Panel = function ( signals ) { ...@@ -28,9 +29,9 @@ var Panel = function ( signals ) {
properties.add( new UI.Text().setText( 'rotation' ).setColor( '#666' ) ); properties.add( new UI.Text().setText( 'rotation' ).setColor( '#666' ) );
var rotationX = new UI.FloatNumber( 'absolute' ).setX( '90px' ).onChanged( update ); var rotationX = new UI.FloatNumber( 'absolute' ).setLeft( '90px' ).onChanged( update );
var rotationY = new UI.FloatNumber( 'absolute' ).setX( '160px' ).onChanged( update ); var rotationY = new UI.FloatNumber( 'absolute' ).setLeft( '160px' ).onChanged( update );
var rotationZ = new UI.FloatNumber( 'absolute' ).setX( '230px' ).onChanged( update ); var rotationZ = new UI.FloatNumber( 'absolute' ).setLeft( '230px' ).onChanged( update );
properties.add( rotationX, rotationY, rotationZ ); properties.add( rotationX, rotationY, rotationZ );
...@@ -38,9 +39,9 @@ var Panel = function ( signals ) { ...@@ -38,9 +39,9 @@ var Panel = function ( signals ) {
properties.add( new UI.Text().setText( 'scale' ).setColor( '#666' ) ); properties.add( new UI.Text().setText( 'scale' ).setColor( '#666' ) );
var scaleX = new UI.FloatNumber( 'absolute' ).setValue( 1 ).setX( '90px' ).onChanged( update ); var scaleX = new UI.FloatNumber( 'absolute' ).setValue( 1 ).setLeft( '90px' ).onChanged( update );
var scaleY = new UI.FloatNumber( 'absolute' ).setValue( 1 ).setX( '160px' ).onChanged( update ); var scaleY = new UI.FloatNumber( 'absolute' ).setValue( 1 ).setLeft( '160px' ).onChanged( update );
var scaleZ = new UI.FloatNumber( 'absolute' ).setValue( 1 ).setX( '230px' ).onChanged( update ); var scaleZ = new UI.FloatNumber( 'absolute' ).setValue( 1 ).setLeft( '230px' ).onChanged( update );
properties.add( scaleX, scaleY, scaleZ ); properties.add( scaleX, scaleY, scaleZ );
......
gui/js/ui/Viewport.js
浏览文件 @ 26ae7a78
...@@ -61,7 +61,11 @@ var Viewport = function ( signals ) { ...@@ -61,7 +61,11 @@ var Viewport = function ( signals ) {
event.preventDefault(); event.preventDefault();
var vector = new THREE.Vector3( ( event.clientX / container.dom.offsetWidth ) * 2 - 1, - ( event.clientY / container.dom.offsetHeght ) * 2 + 1, 0.5 ); var vector = new THREE.Vector3(
( ( event.clientX - container.dom.offsetLeft ) / container.dom.offsetWidth ) * 2 - 1,
- ( ( event.clientY - container.dom.offsetTop ) / container.dom.offsetHeight ) * 2 + 1,
0.5
);
projector.unprojectVector( vector, camera ); projector.unprojectVector( vector, camera );
var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() ); var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或