Skip to content

Instantly share code, notes, and snippets.

@amitlzkpa

amitlzkpa/index.html

Last active April 19, 2020 08:32
Show Gist options
  • Save amitlzkpa/1a1dfff16f6989dd27702b4356b121ad to your computer and use it in GitHub Desktop.
Save amitlzkpa/1a1dfff16f6989dd27702b4356b121ad to your computer and use it in GitHub Desktop.
Download ZIP
Trying out jsbin - ThreeJS// source https://jsbin.com/zigujew
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>ThreeJS</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
</head>
<body>
<script id="jsbin-javascript">
// Simple three.js example
var renderer, scene, camera, controls;
init();
animate();
function init() {
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set( 20, 20, 20 );
controls = new THREE.OrbitControls( camera, renderer.domElement );
scene.add( new THREE.AmbientLight( 0x222222 ) );
let light = new THREE.DirectionalLight( 0xffffff, 1 );
light.position.set( 20, 20, 0 );
scene.add( light );
scene.add( new THREE.AxesHelper( 20 ) );
document.addEventListener('keypress', onKeyPress, true);
window.addEventListener( 'resize', onWindowResize, false );
}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
function onWindowResize(){
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
// --------------------------------------
function makeShape() {
var col = 0x00ffff;
var size = 3;
var dep = 1;
var arrowShape = new THREE.Shape();
arrowShape.moveTo(size, size);
arrowShape.lineTo(0, -size*3);
arrowShape.lineTo(-size, size);
arrowShape.lineTo(size, size);
var extrudeSettings = {depth: dep, bevelEnabled: false};
var geometry = new THREE.ExtrudeBufferGeometry(arrowShape, extrudeSettings);
var material = new THREE.MeshBasicMaterial( {color: col, wireframe: true} );
var mesh = new THREE.Mesh( geometry, material );
return mesh;
}
function onKeyPress(e) {
var mesh = makeShape();
scene.add( mesh );
}
onKeyPress();
</script>
<script id="jsbin-source-javascript" type="text/javascript">// Simple three.js example
var renderer, scene, camera, controls;
init();
animate();
function init() {
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set( 20, 20, 20 );
controls = new THREE.OrbitControls( camera, renderer.domElement );
scene.add( new THREE.AmbientLight( 0x222222 ) );
let light = new THREE.DirectionalLight( 0xffffff, 1 );
light.position.set( 20, 20, 0 );
scene.add( light );
scene.add( new THREE.AxesHelper( 20 ) );
document.addEventListener('keypress', onKeyPress, true);
window.addEventListener( 'resize', onWindowResize, false );
}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
function onWindowResize(){
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
// --------------------------------------
function makeShape() {
var col = 0x00ffff;
var size = 3;
var dep = 1;
var arrowShape = new THREE.Shape();
arrowShape.moveTo(size, size);
arrowShape.lineTo(0, -size*3);
arrowShape.lineTo(-size, size);
arrowShape.lineTo(size, size);
var extrudeSettings = {depth: dep, bevelEnabled: false};
var geometry = new THREE.ExtrudeBufferGeometry(arrowShape, extrudeSettings);
var material = new THREE.MeshBasicMaterial( {color: col, wireframe: true} );
var mesh = new THREE.Mesh( geometry, material );
return mesh;
}
function onKeyPress(e) {
var mesh = makeShape();
scene.add( mesh );
}
onKeyPress();
</script></body>
</html>
Raw
jsbin.zigujew.js
// Simple three.js example
var renderer, scene, camera, controls;
init();
animate();
function init() {
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set( 20, 20, 20 );
controls = new THREE.OrbitControls( camera, renderer.domElement );
scene.add( new THREE.AmbientLight( 0x222222 ) );
let light = new THREE.DirectionalLight( 0xffffff, 1 );
light.position.set( 20, 20, 0 );
scene.add( light );
scene.add( new THREE.AxesHelper( 20 ) );
document.addEventListener('keypress', onKeyPress, true);
window.addEventListener( 'resize', onWindowResize, false );
}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
function onWindowResize(){
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
// --------------------------------------
function makeShape() {
var col = 0x00ffff;
var size = 3;
var dep = 1;
var arrowShape = new THREE.Shape();
arrowShape.moveTo(size, size);
arrowShape.lineTo(0, -size*3);
arrowShape.lineTo(-size, size);
arrowShape.lineTo(size, size);
var extrudeSettings = {depth: dep, bevelEnabled: false};
var geometry = new THREE.ExtrudeBufferGeometry(arrowShape, extrudeSettings);
var material = new THREE.MeshBasicMaterial( {color: col, wireframe: true} );
var mesh = new THREE.Mesh( geometry, material );
return mesh;
}
function onKeyPress(e) {
var mesh = makeShape();
scene.add( mesh );
}
onKeyPress();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment