three-codeeditor
Version:
codeeditor for three.js
67 lines (56 loc) • 2.23 kB
HTML
<html>
<head>
<title>webVR setup for CodeEditor3d</title>
</head>
<body style="margin:0;">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.js"></script>
<script type="text/javascript" src="js/VREffect.js"></script>
<script type="text/javascript" src="js/VRControls.js"></script>
<script type="text/javascript" src="../codeeditor3d.dev.js"></script>
<script type="text/javascript" >
// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
// THREE boilerplate: create a scene
var domElement = document.body;
var width = window.innerWidth, height = window.innerHeight;
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
scene.add(camera);
var renderer = new THREE.WebGLRenderer({antialias:true});
domElement.appendChild(renderer.domElement);
var vrEffect = new THREE.VREffect(renderer);
var vrControl = new THREE.VRControls(camera);
onResize();
window.addEventListener("resize", onResize);
(function loop() {
requestAnimationFrame(loop);
vrControl.update();
vrEffect.render(scene, camera);
})();
// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
// setup the editor
var codeEditor = new THREE.CodeEditor({
domElement: renderer.domElement,
camera: camera,
vr: {effect: vrEffect, control: vrControl}
});
scene.add(codeEditor);
codeEditor.autoAlignWithCamera('center', camera)
codeEditor.aceEditor.setFontSize(20);
codeEditor.setValue("Press alt+f to enter fullscreen.");
window.addEventListener("keypress", function(evt) {
if (evt.altKey && evt.charCode == "402") { // alt-f
vrEffect.startFullscreen();
}
});
// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
// helper
function onResize() {
var width = window.innerWidth, height = window.innerHeight;
camera.aspect = width / height;
camera.updateProjectionMatrix();
vrEffect.setSize(width, height);
}
</script>
</body>
</html>