Skip to content

Instantly share code, notes, and snippets.

@fovtran

fovtran/cube3d

Last active March 10, 2019 06:15
Show Gist options
  • Save fovtran/78d5643ef03eee23eea1586df7c54f2c to your computer and use it in GitHub Desktop.
Save fovtran/78d5643ef03eee23eea1586df7c54f2c to your computer and use it in GitHub Desktop.
Download ZIP
WebGL cube
Raw
cube3d
<html>
<head>
<script src="three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.min.js"></script>
<script src="orbitcontrols.js"></script>
</head>
<body> <div name="canvas" width="100%" height="100%"></div> </body>
<script>
var camera, scene, renderer;
var geometry, material, mesh;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
camera.position.z = 1;
scene = new THREE.Scene();
box = new THREE.BoxGeometry( 0.3, 0.3, 0.3 );
geometry = new THREE.EdgesGeometry( box );
const wires = new THREE.LineBasicMaterial( { color: 0xff0000, linewidth: 3 } );
const matNormal = new THREE.MeshNormalMaterial();
const floorGeo = new THREE.PlaneBufferGeometry(2.0, 2.0);
const floor = new THREE.Mesh(floorGeo, matNormal);
floor.position.set(0, -0.5, 0);
floor.rotation.x = -((Math.PI * 90) / 180);
//mesh = new THREE.Mesh( box, materialSolid);
wireframe = new THREE.LineSegments( geometry, wires);
scene.add( floor );
scene.add( wireframe );
renderer = new THREE.WebGLRenderer( { antialias: true } );
canvas = renderer.domElement;
//const controls = new THREE.OrbitControls(camera, canvas);
renderer.setPixelRatio(window.devicePixelRatio || 1);
renderer.setClearColor(0x000000);
renderer.setSize( window.innerWidth-20, window.innerHeight-20 );
document.body.appendChild( canvas );
}
function animate() {
requestAnimationFrame( animate );
wireframe.rotation.x += 0.005;
wireframe.rotation.y += 0.5;
renderer.render( scene, camera );
}
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment