Skip to content

Instantly share code, notes, and snippets.

@yorikvanhavre

yorikvanhavre/ace_editor_threejs.html

Created April 12, 2013 03:34
Show Gist options
  • Save yorikvanhavre/5369131 to your computer and use it in GitHub Desktop.
Save yorikvanhavre/5369131 to your computer and use it in GitHub Desktop.
Download ZIP
Dan Falck showed me this
Raw
ace_editor_threejs.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE in Action</title>
<style type="text/css" media="screen">
#b3 {
position: absolute;
top: 5%;
right: 0;
bottom: 0;
left: 0;
margin:0
}
#b4 {
position: absolute;
top: 5%;
right: 0;
bottom: 0;
left: 30%;
margin:0
}
#editor2 {
position: absolute;
top: 10%;
right: 0;
bottom: 0;
left: 0;
margin:0
}
#canvashost {
position: absolute;
top: 50%;
right: 0;
bottom: 0;
left: 0;
margin:0
}
</style>
</head>
<body>
<div id="b3">
<input onclick="ClearOutput()" type="button" value="Clear Code" />
</div>
<div id="b4">
<input onclick="pushit()" type="button" value="plot" />
</div>
<pre id="editor2" style="height: 220px; width: 400px;">
Webgl path editor
</pre>
<div id="canvashost" style="background-color: black; z-index:-1;height: 300px; width: 400px;">
</div>
<script src="https://raw.github.com/ajaxorg/ace-builds/master/src/ace.js"></script>
<script src="src='https://raw.github.com/ajaxorg/ace-builds/master/src/mode-yaml.js"></script>
<script src="src='https://raw.github.com/ajaxorg/ace-builds/master/src/theme-cobalt.js"></script>
</script>
<script>
var editor2 = ace.edit("editor2");
editor2.setTheme("ace/theme/cobalt");
editor2.session.setMode("ace/mode/yaml");
editor2.renderer.setShowGutter(false)
document.getElementById('editor2').style.fontSize='16px';
</script>
<script type="text/javascript">
function ClearOutput(){
//document.getElementById("gcode").value = "";
editor2.setValue("")
}
</script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r50/three.min.js"></script>
<script type="text/javascript">
var container;
var lastpoint;
var camera, controls, scene, renderer;
var cross;
function plotit(mydata){
//window.onload = function(){
window.addEventListener('DOMMouseScroll', mousewheel, false);
window.addEventListener('mousewheel', mousewheel, false);
init();
animate();
function init(){
container = document.getElementById('canvashost');
scene = new THREE.Scene();
object = new THREE.AxisHelper( 50);
object.position.set( 0, 0, 0 );
scene.add( object );
camera = new THREE.PerspectiveCamera(
65, // Field of view
300 / 300, // Aspect ratio
0.1, // Near plane
1000 // Far plane
);
//camera.position.set( -15, 10, 10 );
camera.position.set( 0, 0, 30 );
camera.lookAt( scene.position );
//camera.lookAt( 0,0,0 );
controls = new THREE.TrackballControls( camera );
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
controls.keys = [ 65, 83, 68 ];
var geometry = new THREE.Geometry();
var a = new THREE.Vector3( 0, 0, 0 );
var b = new THREE.Vector3( 0, 10, 0 );
geometry.vertices.push( a );
geometry.vertices.push( b );
lastpoint = new THREE.Vector3( b.x, b.y, b.z );
var vers;
function y( vers ) {
geometry.vertices.push(new THREE.Vector3( vers[0],vers[1], vers[2] ) ) ;
}
mydata.forEach(function(x,i,mydata) {y(mydata[i]);});
var line = new THREE.Line(
geometry, new THREE.LineBasicMaterial(
{ color: 0x00FF00, opacity: 0.5 } ) );
scene.add( line );
// lights
light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 1, 1, 1 );
scene.add( light );
light = new THREE.DirectionalLight( 0x002288 );
light.position.set( -1, -1, -1 );
scene.add( light );
light = new THREE.AmbientLight( 0x222222 );
scene.add( light );
// renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize( 400, 300 );
container.appendChild( renderer.domElement );
} // end of plotit() function
function animate(){
requestAnimationFrame( animate );
render();
stats.update();
}
function render(){
controls.update();
renderer.render( scene, camera );
}
//function addLine(){
var addLine = function(){
var x = parseFloat(document.getElementById('xPos').value);
var y = parseFloat(document.getElementById('yPos').value);
var z = parseFloat(document.getElementById('zPos').value);
try{
var geometry = new THREE.Geometry();
var a = new THREE.Vector3( lastpoint.x, lastpoint.y, lastpoint.z );
var b = new THREE.Vector3( x, y, z );
geometry.vertices.push( a );
geometry.vertices.push( b );
var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0xFF0000, opacity: 0.5 } ) );
scene.add( line );
lastpoint = new THREE.Vector3( b.x, b.y, b.z );
}
catch(err){
alert(err);
}
}
function mousewheel(event) {
var fovMAX = 165;
var fovMIN = 1;
var delta = event.detail? event.detail*(-120) : event.wheelDelta
camera.fov -= delta * 0.05;
camera.fov = Math.max( Math.min( camera.fov, fovMAX ), fovMIN );
camera.projectionMatrix = new THREE.Matrix4().makePerspective(camera.fov, window.innerWidth / window.innerHeight, camera.near, camera.far);
}
}
</script>
<script>
function pushit(){
var vertdata = [
[ 3.8750000, 0.0000000, 0.0000000],
[ 3.8750000, 8.0517767, 0.0000000],
[ 7.9482234, 12.1250000, 0.0000000],
[ 12.0000000, 12.1250000, 0.0000000],
[ 12.1393087, 12.1254395, 0.0000000],
[ 12.4155424, 12.0890726, 0.0000000],
[ 12.6846661, 12.0169612, 0.0000000],
[ 12.9420749, 11.9103389, 0.0000000],
[ 13.1833646, 11.7710303, 0.0000000],
[ 13.4044066, 11.6014188, 0.0000000],
[ 13.6014188, 11.4044066, 0.0000000],
[ 13.7710303, 11.1833646, 0.0000000],
[ 13.9103389, 10.9420749, 0.0000000],
[ 14.0169612, 10.6846661, 0.0000000],
[ 14.0890726, 10.4155424, 0.0000000],
[ 14.1254395, 10.1393087, 0.0000000],
[ 14.1250000, 10.0000000, 0.0000000],
[ 14.1250000, 4.8722813, 0.0000000],
[ 13.9661701, 4.8748010, 0.0000000],
[ 13.6493047, 4.8535308, 0.0000000],
[ 13.3367184, 4.7974421, 0.0000000],
[ 13.0322254, 4.7072195, 0.0000000],
[ 12.7395411, 4.5839637, 0.0000000],
[ 12.4622367, 4.4291787, 0.0000000],
[ 12.2036959, 4.2447531, 0.0000000],
[ 11.9670734, 4.0329374, 0.0000000],
[ 11.7552564, 3.7963160, 0.0000000],
[ 11.5708295, 3.5377762, 0.0000000],
[ 11.4160430, 3.2604727, 0.0000000],
[ 11.2927857, 2.9677890, 0.0000000],
[ 11.2025614, 2.6632964, 0.0000000],
[ 11.1464711, 2.3507105, 0.0000000],
[ 11.1251992, 2.0338452, 0.0000000],
[ 11.1277187, 1.8750000, 0.0000000],
[ 3.8750000, 1.8750000, 0.0000000],
[ 0.0000000, 0.0000000, 0.0000000]
];
plotit(vertdata);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment