Skip to content

Instantly share code, notes, and snippets.

@haehn

haehn/index.html

Created October 16, 2020 01:31
Show Gist options
  • Save haehn/34169d8aa5829891f7bb9ee3262e89b5 to your computer and use it in GitHub Desktop.
Save haehn/34169d8aa5829891f7bb9ee3262e89b5 to your computer and use it in GitHub Desktop.
Download ZIP
XTK + Three.js renderer
Raw
index.html
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<style>
html, body {
background-color: #000;
margin: 0;
padding: 0;
height: 100%;
overflow: hidden !important;
}
#r1 {
width: 50%;
height: 100%;
float: left;
}
#r2 {
width: 50%;
height: 100%;
float: left;
}
</style>
<script type="text/javascript" src="https://get.goXTK.com/xtk_edge.js"></script>
<script type="text/javascript" src="http://get.goXTK.com/xtk_xdat.gui.js"></script>
<script src="https://threejs.org/build/three.min.js" type="text/javascript"></script>
<script src="https://threejs.org/examples/js/controls/TrackballControls.js" type="text/javascript"></script>
<script type="text/javascript">
var r, c;
window.onload = function() {
//
// XTK
//
r = new X.renderer3D();
r.container = 'r1'; // only use the r1 div container for XTK
r.init();
c = new X.cube();
r.add(c);
r.render();
//
// THREE.JS
//
r2 = document.getElementById('r2'); // get the div
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 75, r2.clientWidth / r2.clientHeight, 1, 10000 );
camera.position.set( 0, 0, 100 );
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize( r2.clientWidth, r2.clientHeight );
r2.appendChild( renderer.domElement );
ambientLight = new THREE.AmbientLight( 0x404040 );
scene.add( ambientLight );
light = new THREE.DirectionalLight( 0xffffff, 5.0 );
light.position.set( 10, 100, 10 );
scene.add( light );
geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
material = new THREE.MeshStandardMaterial({ color: 0xffffff });
cube = new THREE.Mesh( geometry, material );
scene.add( cube );
controls = new THREE.TrackballControls( camera, renderer.domElement );
animate();
//
// END OF THREE.JS
//
// create the User Interface
// HELPER OBJECT
controller = {
'rotateX': function() {
c.transform.rotateX(45);
// quaternion example
// T = Math.PI/4 // 45 degrees
// x = Math.sin( T/2 ) * 1 // rotate around X
// y = Math.sin( T/2 ) * 0 //
// z = Math.sin( T/2 ) * 0
// w = Math.cos( T/2 )
// q2 = new THREE.Quaternion(x, y, z, w);
},
'rotateY': function() {
c.transform.rotateY(45);
},
'rotateZ': function() {
c.transform.rotateZ(45);
}
}
var gui = new dat.GUI();
var cubeGui = gui.addFolder('Cube');
cubeGui.add(c, 'visible');
cubeGui.add(c, 'opacity', 0, 1);
cubeGui.addColor(c, 'color');
cubeGui.add(c, 'lengthX', 0, 100).onChange(
function() {
c.modified(); // modify event of XTK's cube since
// we modify the vertices
}
);
cubeGui.add(controller, 'rotateX');
cubeGui.add(controller, 'rotateY');
cubeGui.add(controller, 'rotateZ');
cubeGui.open();
};
function animate() {
requestAnimationFrame( animate );
controls.update();
renderer.render( scene, camera );
};
</script>
</head>
<body>
<div id='r1'></div>
<div id='r2'></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment