Code.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. var Code = function () {
  2. var _domElement = document.createElement( 'div' );
  3. _domElement.style.position = 'absolute';
  4. _domElement.style.backgroundColor = '#f0f0f0';
  5. _domElement.style.overflow = 'auto';
  6. //
  7. var _html = false;
  8. var _checkbox = document.createElement( 'input' );
  9. _checkbox.type = 'checkbox';
  10. _checkbox.style.margin = '20px 6px 0px 20px';
  11. _checkbox.addEventListener( 'click', function () { _html = !_html; _update(); }, false );
  12. _domElement.appendChild( _checkbox );
  13. /*
  14. var _checkboxText = document.createElement( 'span' );
  15. _checkboxText.style.fontFamily = 'Monospace';
  16. _checkboxText.innerText = 'HTML';
  17. _domElement.appendChild( _checkboxText );
  18. */
  19. //
  20. var _code = document.createElement( 'pre' );
  21. _code.style.color = '#404040';
  22. _code.style.margin = '20px';
  23. _code.style.fontSize = '13px';
  24. _code.style.whiteSpace = 'pre'; // 'pre-wrap'
  25. _domElement.appendChild( _code );
  26. //
  27. var _list = [];
  28. var _update = function () {
  29. var string = '';
  30. string += [
  31. 'var camera, scene, renderer;',
  32. '',
  33. 'init();',
  34. 'animate();',
  35. '',
  36. 'function init() {',
  37. '',
  38. '\tcamera = new THREE.Camera();',
  39. '',
  40. '\tscene = new THREE.Scene();',
  41. ''
  42. ].join( '\n' );
  43. for ( var i = 0, l = _list.length; i < l; i ++ ) {
  44. string += _list[ i ] + '\n';
  45. }
  46. string += [
  47. '',
  48. '\trenderer = new THREE.WebGLRenderer()',
  49. '\tdocument.body.appendChild( renderer.domElement );',
  50. '',
  51. '}',
  52. '',
  53. 'function animate() {',
  54. '',
  55. '\trequestAnimationFrame( animate );',
  56. '\trender();',
  57. '',
  58. '}',
  59. '',
  60. 'function render() {',
  61. '',
  62. '\trenderer.render( scene, camera );',
  63. '',
  64. '}'
  65. ].join( '\n' );
  66. if ( _html ) {
  67. string = '&lt;!doctype html&gt;\n&lt;html&gt;\n\t&lt;body&gt;\n\t\t&lt;script src=\"js/Three.js\"&gt;&lt;/script&gt;\n\t\t&lt;script src=\"js/RequestAnimationFrame.js\"&gt;&lt;/script&gt;\n\t\t&lt;script&gt;\n' + ( '\n' + string ).replace( /\n/gi, '\n\t\t\t' ) + '\n\n\t\t&lt;/script&gt;\n\t&lt;/body&gt;\n&lt;/html&gt;';
  68. }
  69. _code.innerHTML = string;
  70. }
  71. // signals
  72. signals.updated.add( function ( scene ) {
  73. _list.length = 0;
  74. for ( var i = 0, l = scene.objects.length; i < l; i ++ ) {
  75. var object = scene.objects[ i ];
  76. if ( object instanceof THREE.Mesh ) {
  77. var string = '';
  78. string += '\n\tvar geometry = ' + object.geometry.gui.getCode() + ';';
  79. string += '\n\tvar material = ' + object.materials[ 0 ].gui.getCode() + ';';
  80. string += '\n\tvar mesh = new THREE.Mesh( geometry, material );';
  81. if ( object.position.x != 0 ) string += '\n\tmesh.position.x = ' + object.position.x + ';';
  82. if ( object.position.y != 0 ) string += '\n\tmesh.position.y = ' + object.position.y + ';';
  83. if ( object.position.z != 0 ) string += '\n\tmesh.position.z = ' + object.position.z + ';';
  84. if ( object.rotation.x != 0 ) string += '\n\tmesh.rotation.x = ' + object.rotation.x + ';';
  85. if ( object.rotation.y != 0 ) string += '\n\tmesh.rotation.y = ' + object.rotation.y + ';';
  86. if ( object.rotation.z != 0 ) string += '\n\tmesh.rotation.z = ' + object.rotation.z + ';';
  87. if ( object.scale.x != 1 ) string += '\n\tmesh.scale.x = ' + object.scale.x + ';';
  88. if ( object.scale.y != 1 ) string += '\n\tmesh.scale.y = ' + object.scale.y + ';';
  89. if ( object.scale.z != 1 ) string += '\n\tmesh.scale.z = ' + object.scale.z + ';';
  90. string += '\n\tscene.addObject( mesh );'; // string += '\n\tscene.add( mesh );';
  91. _list.push( string );
  92. }
  93. }
  94. _update();
  95. } );
  96. //
  97. this.getDOMElement = function () {
  98. return _domElement;
  99. }
  100. this.setPosition = function ( x, y ) {
  101. _domElement.style.left = x + 'px';
  102. _domElement.style.top = y + 'px';
  103. }
  104. this.setSize = function ( width, height ) {
  105. _domElement.style.width = width + 'px';
  106. _domElement.style.height = height + 'px';
  107. }
  108. }