mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-09 04:56:01 +10:00
Mr.doob
4e5dff61c8
Unfortunately "File" doesn't have path information, so textures won't load :/ Tried to also drop .js files, but the Workers part ruined the party too :/ :/
186 lines
4.0 KiB
HTML
186 lines
4.0 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.Viewports.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>
|
|
|
|
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.borderLeft = '1px solid #e0e0e0';
|
|
// xr.style.backgroundColor = '#ffffff';
|
|
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 reader = new FileReader();
|
|
|
|
reader.onload = function ( event ) {
|
|
|
|
var parser = new DOMParser();
|
|
var xml = parser.parseFromString( event.target.result, 'text/xml' );
|
|
|
|
var loader = new THREE.ColladaLoader();
|
|
loader.parse( xml, function ( collada ) {
|
|
|
|
console.log( collada );
|
|
|
|
signals.added.dispatch( collada.scene );
|
|
|
|
} );
|
|
|
|
/*
|
|
var loader = new THREE.JSONLoader();
|
|
loader.createModel( event.target.result, function ( geometry ) {
|
|
|
|
var material = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } );
|
|
var mesh = new THREE.Mesh( geometry, material );
|
|
|
|
signals.added.dispatch( mesh );
|
|
|
|
} );
|
|
*/
|
|
|
|
};
|
|
|
|
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( window.innerWidth * xhalf, window.innerHeight );
|
|
|
|
code.setPosition( window.innerWidth * xhalf, 0 );
|
|
code.setSize( window.innerWidth - ( window.innerWidth * xhalf ), window.innerHeight );
|
|
|
|
xr.style.left = ( window.innerWidth * xhalf ) + 'px';
|
|
xr.style.height = window.innerHeight + 'px';
|
|
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|