mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-08 20:46:21 +10:00
210 lines
4.4 KiB
HTML
210 lines
4.4 KiB
HTML
<html>
|
|
<head>
|
|
<title>three.js gui</title>
|
|
<style>
|
|
@font-face {
|
|
|
|
font-family: 'Inconsolata';
|
|
src: url('files/inconsolata.woff') format('woff');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
|
|
}
|
|
|
|
body {
|
|
|
|
margin: 0;
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
button {
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
pre {
|
|
|
|
font-family: 'Inconsolata';
|
|
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<script type="text/javascript" src="../build/Three.js"></script>
|
|
|
|
<script type="text/javascript" src="js/libs/signals.min.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.Toolbar.js"></script>
|
|
<script type="text/javascript" src="js/Code.js"></script>
|
|
<script type="text/javascript" src="js/Code.Templates.js"></script>
|
|
|
|
<script>
|
|
|
|
window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;
|
|
window.URL = window.URL || window.webkitURL || window.mozURL;
|
|
|
|
var Signal = signals.Signal;
|
|
|
|
var signals = {
|
|
|
|
added: new Signal(),
|
|
updated: new Signal()
|
|
|
|
};
|
|
|
|
var ui = new UI();
|
|
document.body.appendChild( ui.getDOMElement() );
|
|
|
|
var code = new Code()
|
|
document.body.appendChild( code.getDOMElement() );
|
|
|
|
var xhalf = 0.7;
|
|
|
|
var xr = document.createElement( 'div' );
|
|
xr.style.position = 'absolute';
|
|
xr.style.top = '0px';
|
|
xr.style.width = '1px';
|
|
xr.style.cursor = 'col-resize';
|
|
xr.addEventListener( 'mousedown', function ( event ) {
|
|
|
|
event.preventDefault();
|
|
|
|
document.body.style.cursor = 'col-resize';
|
|
document.addEventListener( 'mousemove', onMouseMove, false );
|
|
document.addEventListener( 'mouseup', onMouseUp, false );
|
|
|
|
function onMouseMove( event ) {
|
|
|
|
event.preventDefault();
|
|
|
|
xhalf = Math.max( 0, Math.min( 1, event.clientX / window.innerWidth ) );
|
|
|
|
update();
|
|
|
|
}
|
|
|
|
function onMouseUp( event ) {
|
|
|
|
document.body.style.cursor = 'auto';
|
|
document.removeEventListener( 'mousemove', onMouseMove, false );
|
|
document.removeEventListener( 'mouseup', onMouseUp, false );
|
|
|
|
}
|
|
|
|
}, false );
|
|
xr.addEventListener( 'dblclick', function ( event ) {
|
|
|
|
xhalf = 0.7;
|
|
update();
|
|
|
|
}, false );
|
|
document.body.appendChild( xr );
|
|
|
|
//
|
|
|
|
document.addEventListener( 'dragover', function ( event ) {
|
|
|
|
event.preventDefault();
|
|
|
|
}, false );
|
|
document.addEventListener( 'dragleave', function ( event ) {
|
|
|
|
event.preventDefault();
|
|
|
|
}, false );
|
|
document.addEventListener( 'drop', function ( event ) {
|
|
|
|
event.preventDefault();
|
|
|
|
var file = event.dataTransfer.files[ 0 ];
|
|
var extension = file.name.split( '.' )[1].toLowerCase();
|
|
var reader = new FileReader();
|
|
|
|
reader.onload = function ( event ) {
|
|
|
|
var contents = event.target.result;
|
|
|
|
switch ( extension ) {
|
|
|
|
case 'js':
|
|
|
|
var loader = new THREE.JSONLoader();
|
|
loader.createModel( JSON.parse( contents ), function ( geometry ) {
|
|
|
|
geometry.gui = {
|
|
paremeters: {
|
|
},
|
|
getCode: function () {
|
|
|
|
return 'new THREE.JSONLoader( TODO )';
|
|
|
|
}
|
|
};
|
|
|
|
var material = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } );
|
|
var mesh = new THREE.Mesh( geometry, material );
|
|
|
|
signals.added.dispatch( mesh );
|
|
|
|
} );
|
|
|
|
break;
|
|
|
|
case 'dae':
|
|
|
|
var parser = new DOMParser();
|
|
var xml = parser.parseFromString( contents, 'text/xml' );
|
|
|
|
var loader = new THREE.ColladaLoader();
|
|
loader.parse( xml, function ( collada ) {
|
|
|
|
signals.added.dispatch( collada.scene );
|
|
|
|
} );
|
|
|
|
break;
|
|
|
|
|
|
|
|
}
|
|
|
|
};
|
|
|
|
reader.readAsText( file );
|
|
|
|
}, false );
|
|
|
|
// Add Sphere
|
|
|
|
var geometry = new THREE.SphereGeometry( 75, 20, 10 );
|
|
var material = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } );
|
|
var mesh = new THREE.Mesh( geometry, material );
|
|
|
|
signals.added.dispatch( mesh );
|
|
|
|
//
|
|
|
|
update();
|
|
window.addEventListener( 'resize', function ( event ) { update() }, false );
|
|
|
|
function update() {
|
|
|
|
ui.setSize( Math.floor( window.innerWidth * xhalf ), window.innerHeight );
|
|
|
|
code.setPosition( Math.floor( window.innerWidth * xhalf ), 0 );
|
|
code.setSize( window.innerWidth - Math.floor( window.innerWidth * xhalf ), window.innerHeight );
|
|
|
|
xr.style.left = Math.floor( window.innerWidth * xhalf ) + 'px';
|
|
xr.style.height = window.innerHeight + 'px';
|
|
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|