mirror of
https://github.com/Doodle3D/Doodle3D-Slicer.git
synced 2024-12-24 12:03:48 +01:00
132 lines
3.2 KiB
HTML
132 lines
3.2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<title>three.js webgl - transform controls</title>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
margin: 0px;
|
||
|
|
background-color: #000000;
|
||
|
|
color: #fff;
|
||
|
|
font-family:Monospace;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 15px;
|
||
|
|
line-height: 30px;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
#info {
|
||
|
|
position: absolute;
|
||
|
|
top: 0px; width: 100%;
|
||
|
|
padding: 15px;
|
||
|
|
z-index:100;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div id="info">
|
||
|
|
"W" translate | "E" rotate | "R" scale | "+" increase size | "-" decrease size<br />
|
||
|
|
Press "Q" twice to toggle world/local space
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="../build/three.min.js"></script>
|
||
|
|
<script src="js/controls/TransformControls.js"></script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
var camera, scene, renderer, control;
|
||
|
|
|
||
|
|
init();
|
||
|
|
render();
|
||
|
|
|
||
|
|
function init() {
|
||
|
|
|
||
|
|
renderer = new THREE.WebGLRenderer();
|
||
|
|
renderer.setPixelRatio( window.devicePixelRatio );
|
||
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
||
|
|
renderer.sortObjects = false;
|
||
|
|
document.body.appendChild( renderer.domElement );
|
||
|
|
|
||
|
|
//
|
||
|
|
|
||
|
|
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 3000 );
|
||
|
|
camera.position.set( 1000, 500, 1000 );
|
||
|
|
camera.lookAt( new THREE.Vector3( 0, 200, 0 ) );
|
||
|
|
|
||
|
|
scene = new THREE.Scene();
|
||
|
|
scene.add( new THREE.GridHelper( 500, 100 ) );
|
||
|
|
|
||
|
|
var light = new THREE.DirectionalLight( 0xffffff, 2 );
|
||
|
|
light.position.set( 1, 1, 1 );
|
||
|
|
scene.add( light );
|
||
|
|
|
||
|
|
|
||
|
|
var texture = THREE.ImageUtils.loadTexture( 'textures/crate.gif', THREE.UVMapping, render );
|
||
|
|
texture.anisotropy = renderer.getMaxAnisotropy();
|
||
|
|
|
||
|
|
var geometry = new THREE.BoxGeometry( 200, 200, 200 );
|
||
|
|
var material = new THREE.MeshLambertMaterial( { map: texture } );
|
||
|
|
|
||
|
|
control = new THREE.TransformControls( camera, renderer.domElement );
|
||
|
|
control.addEventListener( 'change', render );
|
||
|
|
|
||
|
|
var mesh = new THREE.Mesh( geometry, material );
|
||
|
|
scene.add( mesh );
|
||
|
|
|
||
|
|
control.attach( mesh );
|
||
|
|
scene.add( control );
|
||
|
|
|
||
|
|
window.addEventListener( 'resize', onWindowResize, false );
|
||
|
|
|
||
|
|
window.addEventListener( 'keydown', function ( event ) {
|
||
|
|
//console.log(event.which);
|
||
|
|
switch ( event.keyCode ) {
|
||
|
|
case 81: // Q
|
||
|
|
control.setSpace( control.space == "local" ? "world" : "local" );
|
||
|
|
break;
|
||
|
|
case 87: // W
|
||
|
|
control.setMode( "translate" );
|
||
|
|
break;
|
||
|
|
case 69: // E
|
||
|
|
control.setMode( "rotate" );
|
||
|
|
break;
|
||
|
|
case 82: // R
|
||
|
|
control.setMode( "scale" );
|
||
|
|
break;
|
||
|
|
case 187:
|
||
|
|
case 107: // +,=,num+
|
||
|
|
control.setSize( control.size + 0.1 );
|
||
|
|
break;
|
||
|
|
case 189:
|
||
|
|
case 10: // -,_,num-
|
||
|
|
control.setSize( Math.max(control.size - 0.1, 0.1 ) );
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
function onWindowResize() {
|
||
|
|
|
||
|
|
camera.aspect = window.innerWidth / window.innerHeight;
|
||
|
|
camera.updateProjectionMatrix();
|
||
|
|
|
||
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
||
|
|
|
||
|
|
render();
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
function render() {
|
||
|
|
|
||
|
|
control.update();
|
||
|
|
|
||
|
|
renderer.render( scene, camera );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|