sample.js 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. // import Three, { OctahedronGeometry } from "three";
  2. // // const scene=new Three.Scene();
  3. // // const camera=new Three.PerspectiveCamera();
  4. // // const odemetry=new OctahedronGeometry();
  5. // // document.body.append(new Element(`<h1>index.js</h1>`))
  6. // var canvas=document.getElementById("canvas");
  7. // canvas.width=window.innerWidth;
  8. // canvas.heigt=window.innerHeight;
  9. // var gl=canvas.getContext("webgl");
  10. // gl.viewport(0,0,canvas.width,canvas.heigt);
  11. // // import * as Three from "three";
  12. // console.log("Three",Three);
  13. // const scene=new Three.Scene();
  14. // const camera=new Three.PerspectiveCamera(
  15. // 75,
  16. // window.innerWidth/window.innerHeight,
  17. // 0.1,
  18. // 1000
  19. // );
  20. // camera.position.set(0,0,10);
  21. // scene.add(camera);
  22. // const geometry = new Three.BoxGeometry( 1, 3, 2 );
  23. // const material = new Three.MeshBasicMaterial( {color: 0xffffff} );
  24. // const cube = new Three.Mesh( geometry, material );
  25. // scene.add( cube );
  26. // console.log("cube",cube);
  27. // console.log("cube.position",cube.position);
  28. // const geometry_buffer=new Three.BufferGeometry();
  29. // const vertices=new Float32Array([
  30. // -1.0,-1.0,1.0,
  31. // 1.0,-1.0,1.0,
  32. // 1.0,1.0,1.0,
  33. // 1.0,1.0,1.0
  34. // -1.0,1.0,1.0,
  35. // -1.0,-1.0,1.0
  36. // ]);
  37. // geometry_buffer.setAttribute("position",new Three.BufferAttribute(vertices,3));
  38. // const material_buffer=new Three.MeshBasicMaterial({color: 0xffff00});
  39. // const geometry_buffer_mesh=new Three.Mesh(geometry_buffer,material_buffer);
  40. // scene.add(geometry_buffer_mesh);
  41. // geometry_buffer_mesh.position.set(-10,-2,0);
  42. // // geometry_buffer_mesh.position.x=-10;
  43. // // geometry_buffer_mesh.position.y=-2;
  44. // import path from "path";
  45. // const cube_geometry=new Three.BoxGeometry(2,2,2);
  46. // const textureloader=new Three.TextureLoader();
  47. // path.resolve(path.dirname.toString());
  48. // console.log("path",path);
  49. // const texture_object=textureloader.load("../media/texture/shazi.png");
  50. // const textureLoader = new Three.TextureLoader();
  51. // const textureFlare0 = textureLoader.load( "../media//texture/envolope.jpg" );
  52. // console.log("textureFlare0",texture_object);
  53. // const basic_material=new Three.MeshBasicMaterial({
  54. // // color:0xf012f0,
  55. // map:texture_object,
  56. // });
  57. // const cube_geometry_object=new Three.Mesh(cube_geometry,basic_material);
  58. // scene.add(cube_geometry_object);
  59. // cube_geometry_object.position.set(8,-3,0);
  60. // const renderer=new Three.WebGLRenderer();
  61. // renderer.setSize(window.innerWidth*0.95,window.innerHeight*0.95);
  62. // window.addEventListener("resize",(EventTarget)=>{
  63. // console.log("resize_______________");
  64. // camera.aspect=window.innerWidth*0.95,window.innerHeight*0.95;
  65. // camera.updateProjectionMatrix();
  66. // renderer.setSize(window.innerWidth*0.95,window.innerHeight*0.95);
  67. // renderer.setPixelRatio(window.devicePixelRatio);
  68. // });
  69. // import { OrbitControls } from "three-orbitcontrols-ts";
  70. // const controls=new OrbitControls(camera,renderer.domElement);
  71. // controls.enableDamping=true;
  72. // // renderer.render(scene,camera);
  73. // let rare_positionx= cube.position.x-2;
  74. // let rare_positiony= cube.position.y-2;
  75. // let step=0.02, range=400,mark=0;
  76. // function render_each_second(){
  77. // // renderer.render(scene,camera);
  78. // controls.update();
  79. // if(mark<= range){
  80. // cube.position.x+=step;
  81. // cube.position.y+=step;
  82. // cube.rotateZ(0.02);
  83. // cube.rotateY(0.015);
  84. // cube_geometry_object.rotateX(0.01);
  85. // cube_geometry_object.rotateY(0.01);
  86. // cube_geometry_object.rotateZ(0.01);
  87. // geometry_buffer_mesh.rotateY(0.05);
  88. // mark=mark + 1;
  89. // }else{
  90. // // cube.position.x=(step*range);
  91. // cube.position.x=(rare_positionx);
  92. // cube.position.y=(rare_positiony);
  93. // mark=0;
  94. // }
  95. // // (times < n)?cube.position.x+=times:cube.position.x=rare_position;
  96. // // console.log("cube.position",cube.position);
  97. // renderer.render(scene,camera);
  98. // requestAnimationFrame(render_each_second);
  99. // };
  100. // render_each_second();
  101. // console.log("renderer",renderer);
  102. // document.body.appendChild(renderer.domElement);
  103. // // import {OrbitControls} from 'three';//three/examples/jsm/controls/OrbitControls
  104. // // import { OrbitControls } from "three/addons/controls/OrbitControls.js";
  105. // // import { OrbitControls } from "three-orbitcontrols-ts";
  106. // // const controls=new Three.OrbitControls(camera,renderer.domElement);
  107. // // import { OrbitControls } from 'three-orbitcontrols-ts';
  108. // // const controls=new Three.OrbitControls(camera,renderer.domElement);
  109. // // const controls=new OrbitControls(camera,renderer.domElement);
  110. // // setTimeout(() => {
  111. // // console.log("cube.position",cube.position);
  112. // // cube.position.set(10,1000,500);
  113. // // console.log("cube.position",cube.position);
  114. // // }, 1500);