scene2.js.bak 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. import THREE from 'THREE';
  2. import d3 from 'd3';
  3. export var canvas = d3.select("body").append("canvas")
  4. canvas.node().id = "canvas";
  5. //.attr("width", window.innerWidth)
  6. //.attr("height", window.innerHeight);
  7. window.addClass = function(elem, className) {
  8. if (elem.className === undefined) {
  9. elem.className = className;
  10. } else if (elem.className !== className) {
  11. var classes = elem.className.split(/ +/);
  12. if (classes.indexOf(className) == -1) {
  13. classes.push(className);
  14. elem.className = classes.join(' ').replace(/^\s+/, '').replace(/\s+$/, '');
  15. }
  16. }
  17. }
  18. window.removeClass = function(elem, className) {
  19. if (className) {
  20. if (elem.className === undefined) {
  21. // elem.className = className;
  22. }else if (elem.className === className) {
  23. elem.removeAttribute('class');
  24. }else{
  25. var classes = elem.className.split(/ +/);
  26. var index = classes.indexOf(className);
  27. if(index != -1){
  28. classes.splice(index, 1);
  29. elem.className = classes.join(' ');
  30. }
  31. }
  32. }else{
  33. elem.className = undefined;
  34. }
  35. }
  36. window.layer = 0;
  37. var introOverlay = document.createElement("div");
  38. introOverlay.className = "introOverlay"
  39. var intro = document.createElement("div");
  40. introOverlay.appendChild(intro);
  41. intro.id = "introduce";
  42. intro.style.display = "none";
  43. intro.innerHTML = '<div class="outer"><div id="introBanner"></div><div id="introBody"><h2 class="introTitle"> </h2><p class="introText"> </p><div id="artifact"></div><div class="bottomCover"></div></div></div><div id="back">返回</div>';
  44. /* var back = document.createElement("div");
  45. back.id = "back";
  46. intro.appendChild(back); */
  47. //intro.innerHTML = '<div id="introBanner"></div><div id="introBody"><h2 class="introTitle">中国的蒙古族</h2><p class="introText">2093u如此美味如我入额我iqq为</p><div id="artifact"></div></div>';
  48. //intro.innerHTML = '<div id="introBanner" class="layer2"></div><div id="introBody"><h2 class="introTitle">蒙古族</h2><p class="introText">345254622345</p></div>';
  49. canvas.node().parentElement.appendChild(introOverlay);
  50. canvas.node().getContext("webgl");
  51. canvas.node().style.position = "absolute";
  52. export var renderer = new THREE.WebGLRenderer({canvas: canvas.node(), antialias: true, alpha:true});
  53. //renderer.setClearColor( 0xeeeeee );//ie默认黑色背景,所以要加一个颜色
  54. renderer.setClearAlpha( 0 );
  55. document.body.appendChild(renderer.domElement);
  56. export var camera = new THREE.PerspectiveCamera(70, 1, 1, 5000);
  57. camera.position.z = 1000;
  58. //camera.updateProjectionMatrix();
  59. onWindowResize();
  60. export var scene = new THREE.Scene();
  61. export var controls = new THREE.OrbitControls( camera, renderer.domElement );
  62. controls.enableDamping = true;
  63. controls.dampingFactor = 1;
  64. controls.enablePan = false;
  65. controls.rotateSpeed = 0.6;
  66. //controls.enableZoom = false;
  67. controls.zoomSpeed = 0.3;
  68. var light = new THREE.HemisphereLight('#ffffff', '#888', 0.4);
  69. light.position.set(0, 100, 0);
  70. scene.add(light);
  71. export var light3 = new THREE.DirectionalLight(0xffffff, 1);
  72. light3.position.set( 1, 1, 0 );
  73. scene.add(light3);
  74. /* var light2 = new THREE.PointLight('#ffffff', 1.5);
  75. light2.position.set(250, 0, 10);
  76. camera.add(light2);
  77. scene.add(light2); */
  78. window.addEventListener('resize', onWindowResize, false);
  79. function onWindowResize() {
  80. if(layer<2){
  81. var ratio = 320/365;//横高比
  82. var h = window.innerHeight;
  83. var w = h * ratio;
  84. camera.aspect = w/h;
  85. camera.view = {
  86. fullWidth: w,
  87. fullHeight: h,
  88. offsetX: 180,
  89. offsetY: -50,
  90. width: w,
  91. height: h
  92. };
  93. camera.updateProjectionMatrix();
  94. renderer.setSize(w, h);
  95. introOverlay.style.left = w + "px";
  96. }else{
  97. introOverlay.style.left = "";
  98. }
  99. /*var infoH = intro.clientHeight;
  100. var earthH = canvas.node().clientHeight || window.innerWidth*0.3;//(onlyTitle?0.2:0.3)
  101. if(infoH){
  102. var f1 = parseFloat(intro.style["font-size"]);
  103. if(f1!=f1) f1 = 1; //NAN
  104. var ratio = earthH/infoH/1.3;
  105. var size = Math.min(Math.max(1, f1 * ratio ), 1.5);
  106. intro.style["font-size"] = size + "em";
  107. (size<1.1)?(addClass(intro,"weight")):(removeClass(intro,"weight"));
  108. } */
  109. }