α-wwwiki

α-wwwiki :: history/cube/20131109-144041.txt

editor : alpha [82.251.69.225] 2013/11/09 14:40:41
_h1 cube rotate
_p For security reasons, calling an external Javascript is not authorized in alphawiki. Here is shown how can be used the [[three.js|http://threejs.org/]] library (uploaded in the data folder).

{input {@ type="submit" value="include three.js" onclick="°°
  var js = document.createElement('script');
  js.type ='text/javascript';
  js.src = 'data/threejs/three.min.js';
  document.body.appendChild( js );
  this.value = 'OK, three.js is included !';
  this.disabled='disabled';
°°"}}
wait a little bit and 
{input {@ type="submit" value='start cube rotate'  onclick="°°

var camera, scene, renderer, mesh;

var init = function () {
  renderer = new THREE.CanvasRenderer();
  renderer.setSize( 400, 400 );
  getId('output').appendChild( renderer.domElement );
  camera = new THREE.PerspectiveCamera( 75, 400 / 400, 1, 1000 );
  camera.position.z = 150;
  scene = new THREE.Scene();
  var geometry = new THREE.CubeGeometry( 100, 100, 10 );
  var material = new THREE.MeshBasicMaterial( 
    { color: 0xff0000, 
      wireframe: true, 
      wireframeLinewidth: 1 
    } 
  );
  mesh = new THREE.Mesh( geometry, material );
  scene.add( mesh );
};

var animate = function () {
  requestAnimationFrame( animate );
  mesh.rotation.x = Date.now() * 0.0005;
  mesh.rotation.y = Date.now() * 0.001;
  renderer.render( scene, camera );
};
  init();
  animate();

°°"}}

{div {@ id="output" style="border:1px solid;"}}

_h3 links
_ul [[threejs.org|http://threejs.org/]]
_ul [[fhtr.org/BasicsOfThreeJS|http://fhtr.org/BasicsOfThreeJS/]]
_ul [[www.realtimerendering.com/blog/tag/three-js|http://www.realtimerendering.com/blog/tag/three-js/]]