API tools faq
paste
Guest User

Untitled

a guest
Oct 14th, 2018
149
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.00 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2.  
  3. <head>
  4. <title>Three js</title>
  5. <link rel="stylesheet" href="style.css">
  6. <meta charset="utf-8">
  7. </meta>
  8. <script src="./three.js"></script>
  9. </head>
  10.  
  11. <body>
  12. </body>
  13.  
  14. </html>
  15.  
  16. <script>
  17. let scene, camera, renderer, rubiks = [];
  18. let cameraMovement = false;
  19. var posX = 0, posY = 0, xDown, xUp, yDown, yUp;
  20. let ray = new THREE.Raycaster();
  21. let mouse = new THREE.Vector2();
  22. // set up the environment -
  23. // initiallize scene, camera, objects and renderer
  24.  
  25. class Materials {
  26.  
  27. constructor(right, left, top, bottom, front, back) {
  28. this.colors = [];
  29. this.colors.push(right);
  30. this.colors.push(left);
  31. this.colors.push(top);
  32. this.colors.push(bottom);
  33. this.colors.push(front);
  34. this.colors.push(back);
  35. }
  36. setRight(c){this.colors[0] = c;}
  37. setLeft(c){this.colors[1] = c;}
  38. setTop(c){this.colors[2] = c;}
  39. setBot(c){this.colors[3] = c;}
  40. setFront(c){this.colors[4] = c;}
  41. setBack(c){this.colors[5] = c;}
  42. }
  43.  
  44. let rotateX = function(pos, sens){
  45. let min = ((pos-1)*(9));
  46. let max = pos*9;
  47. //let faceMoving = new THREE.Group();
  48. for(min; min<max; min++){
  49. rubiks[min].rotation.x += (Math.PI/2 * sens);
  50. //faceMoving.add(rubiks[min]);
  51. }
  52. //face.rotateOnAxis(new THREE.Vector3(1, 0, 0).normalize(), Math.PI/2*sens);
  53. //faceMoving.rotation.x += Math.PI/2*sens;
  54. //scene.add(faceMoving);
  55. }
  56.  
  57. let rotateY = function(pos, sens){ // A AMELIORER (modulo ?)
  58. let change = [];
  59. //let faceMoving = new THREE.Group();
  60. if(pos == 1){
  61. change.push(0, 1, 2, 9, 10, 11, 18, 19, 20);
  62. } else if (pos == 2) {
  63. change.push(3, 4, 5, 12, 13, 14, 21, 22, 23);
  64. } else if (pos == 3) {
  65. change.push(6, 7, 8, 15, 16, 17, 24, 25, 26);
  66. }
  67.  
  68. for(let i = 0; i<=rubiks.length-1; i++){
  69. if(change.includes(i)){
  70. rubiks[i].rotation.y += (Math.PI/2 * sens);
  71. //faceMoving.add(rubiks[i]);
  72. }
  73. }
  74. //console.log(faceMoving);
  75. //face.rotateOnAxis(new THREE.Vector3(0, 1, 0).normalize(), Math.PI/2*sens);
  76. //faceMoving.rotation.y += Math.PI/2*sens;
  77. //scene.add(faceMoving);
  78. }
  79.  
  80. let rotateZ = function(pos, sens){
  81. for(let i = 0; i<rubiks.length; i++){
  82. if(i%3 == pos-1){
  83. rubiks[i].rotation.z += (Math.PI/2 * sens);
  84. }
  85. }
  86. }
  87.  
  88. let collision = function(){
  89. let on = ray.intersectObjects(scene.children)[0].object;
  90. let pos = 1;
  91. let cube = 0;
  92. let rotaX, rotaY;
  93.  
  94. rubiks.forEach(function(i, ind){
  95. if(i == on){
  96. cube = ind;
  97. }
  98. });
  99.  
  100. switch(cube){
  101.  
  102. case 0: rotaY = 1; rotaX = 1; rotaZ = 1; break;
  103. case 1: rotaY = 1; rotaX = 1; rotaZ = 2; break;
  104. case 2: rotaY = 1; rotaX = 1; rotaZ = 3; break;
  105. case 3: rotaY = 2; rotaX = 1; rotaZ = 1; break;
  106. case 4: rotaY = 2; rotaX = 1; rotaZ = 2; break;
  107. case 5: rotaY = 2; rotaX = 1; rotaZ = 3; break;
  108. case 6: rotaY = 3; rotaX = 1; rotaZ = 1; break;
  109. case 7: rotaY = 3; rotaX = 1; rotaZ = 2; break;
  110. case 8: rotaY = 3; rotaX = 1; rotaZ = 3; break;
  111. case 9: rotaY = 1; rotaX = 2; rotaZ = 1; break;
  112. case 10: rotaY = 1; rotaX = 2; rotaZ = 2; break;
  113. case 11: rotaY = 1; rotaX = 2; rotaZ = 3; break;
  114. case 12: rotaY = 2; rotaX = 2; rotaZ = 1; break;
  115. case 13: rotaY = 2; rotaX = 2; rotaZ = 2; break;
  116. case 14: rotaY = 2; rotaX = 2; rotaZ = 3; break;
  117. case 15: rotaY = 3; rotaX = 2; rotaZ = 1; break;
  118. case 16: rotaY = 3; rotaX = 2; rotaZ = 2; break;
  119. case 17: rotaY = 3; rotaX = 2; rotaZ = 3; break;
  120. case 18: rotaY = 1; rotaX = 3; rotaZ = 1; break;
  121. case 19: rotaY = 1; rotaX = 3; rotaZ = 2; break;
  122. case 20: rotaY = 1; rotaX = 3; rotaZ = 3; break;
  123. case 21: rotaY = 2; rotaX = 3; rotaZ = 1; break;
  124. case 22: rotaY = 2; rotaX = 3; rotaZ = 2; break;
  125. case 23: rotaY = 2; rotaX = 3; rotaZ = 3; break;
  126. case 24: rotaY = 3; rotaX = 3; rotaZ = 1; break;
  127. case 25: rotaY = 3; rotaX = 3; rotaZ = 2; break;
  128. case 26: rotaY = 3; rotaX = 3; rotaZ = 3; break;
  129.  
  130. }
  131.  
  132. if(Math.abs(xUp-xDown) > 10 || Math.abs(yUp-yDown) > 10){
  133. if(xDown > xUp && (Math.abs(xUp-xDown) > Math.abs(yUp-yDown))) {
  134. rotateY(rotaY, -1);
  135. console.log("Rota gauche");
  136. } else if(xDown < xUp && (Math.abs(xUp-xDown) > Math.abs(yUp-yDown))) {
  137. rotateY(rotaY, 1);
  138. console.log("Rota droite");
  139. } else if (yDown > yUp) {
  140. rotateX(rotaX, -1);
  141. console.log("Rota haut");
  142. } else if (yDown < yUp) {
  143. rotateX(rotaX, 1);
  144. console.log("Rota bas");
  145. }
  146. }
  147. }
  148.  
  149. let animation = function(face, sens){
  150. switch(face){
  151.  
  152. case 1:
  153. if(sens == 1){
  154.  
  155. } else if (sens == -1){
  156.  
  157. }
  158. break;
  159.  
  160. case 2:
  161.  
  162. break;
  163.  
  164. case 3:
  165.  
  166. break;
  167.  
  168. case 4:
  169.  
  170. break;
  171.  
  172. case 5:
  173.  
  174. break;
  175.  
  176. case 6:
  177.  
  178. break;
  179.  
  180. case 7:
  181.  
  182. break;
  183.  
  184. case 8:
  185.  
  186. break;
  187.  
  188. case 9:
  189.  
  190. break;
  191.  
  192.  
  193. }
  194.  
  195. }
  196.  
  197.  
  198. let init = function() {
  199. // 1. create the scene
  200. // ....
  201. scene = new THREE.Scene();
  202. scene.background = new THREE.Color(0xababab);
  203. // 2. create an locate the camera
  204. // ....
  205.  
  206. camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 0.1, 2000);
  207. camera.position.z = 10;
  208. // 3. create and locate the objects on the scene
  209. // ...
  210.  
  211. let help = new THREE.AxesHelper(5);
  212. scene.add(help);
  213.  
  214. let createCube = function(pos, mat) {
  215.  
  216. let geometry = new THREE.BoxGeometry(1, 1, 1);
  217.  
  218. rubiks.push(new THREE.Mesh(geometry, mat.colors));
  219. rubiks[rubiks.length-1].position.x = pos.x;
  220. rubiks[rubiks.length-1].position.y = pos.y;
  221. rubiks[rubiks.length-1].position.z = pos.z;
  222.  
  223. scene.add(rubiks[rubiks.length-1]);
  224.  
  225. }
  226.  
  227. let createRubiks = function(){
  228. let mat = new Materials(
  229. new THREE.MeshBasicMaterial({color:0xff0000}),
  230. new THREE.MeshBasicMaterial({color:0xff8900}),
  231. new THREE.MeshBasicMaterial({color:0x0000ff}),
  232. new THREE.MeshBasicMaterial({color:0x0b9f10}),
  233. new THREE.MeshBasicMaterial({color:0xffffff}),
  234. new THREE.MeshBasicMaterial({color:0xffff00})
  235. );
  236. /*
  237. let reset = new Materials(
  238. new THREE.MeshBasicMaterial({color:0x000000}),
  239. new THREE.MeshBasicMaterial({color:0x000000}),
  240. new THREE.MeshBasicMaterial({color:0x000000}),
  241. new THREE.MeshBasicMaterial({color:0x000000}),
  242. new THREE.MeshBasicMaterial({color:0x000000}),
  243. new THREE.MeshBasicMaterial({color:0x000000})
  244. );;
  245.  
  246. let black = new THREE.MeshBasicMaterial({color:0x000000});
  247. */
  248. for(let i = 0; i<3; i++){
  249. for(let j = 0; j<3; j++){
  250. for(let k = 0; k<3; k++){
  251. createCube(new THREE.Vector3(i*1.02, j*1.02, k*1.02), mat);
  252. }
  253. }
  254. }
  255.  
  256. rubiks.forEach((i, ind) => i.name = ind);
  257. /* for(let i = 0; i<3; i++){
  258. if(i==0) {
  259. mat.setRight(black);
  260. } else if (i==1) {
  261. mat.setRight(black);
  262. mat.setLeft(black);
  263. } else if (i==2) {
  264. mat.setLeft(black);
  265. }
  266.  
  267. for(let j = 0; j<3; j++){
  268. if(j==0){
  269. mat.setTop(black);
  270. } else if(j==1) {
  271. mat.setTop(black);
  272. mat.setBot(black);
  273. } else if(j==2) {
  274. mat.setBot(black);
  275. }
  276. for(let k = 0; k<3; k++){
  277. if(k==0){
  278. mat.setFront(black);
  279. } else if (k==1) {
  280. mat.setFront(black);
  281. mat.setBack(black);
  282. } else if (k==2) {
  283. mat.setBack(black);
  284. }
  285. createCube(new THREE.Vector3(i*1.2, j*1.2, k*1.2), mat);
  286. mat = reset;
  287. }
  288. }
  289. } */ // marche pas : tout noir
  290.  
  291. }
  292.  
  293. createRubiks();
  294.  
  295. // 4. create the renderer
  296. // ...
  297.  
  298. renderer = new THREE.WebGLRenderer();
  299. renderer.setSize(window.innerWidth, window.innerHeight);
  300.  
  301. document.body.appendChild(renderer.domElement);
  302.  
  303. document.addEventListener("mousemove", function(e){
  304.  
  305. if(cameraMovement){
  306. if(e.clientX > posX) {
  307. camera.position.x -= 0.1;
  308. }
  309. else if(e.clientX < posX){
  310. camera.position.x += 0.1;
  311. }
  312.  
  313. if(e.clientY > posY) {
  314. camera.position.y += 0.1;
  315. }
  316. else if(e.clientY < posY){
  317. camera.position.y -= 0.1;
  318. }
  319. }
  320.  
  321. posX = e.clientX;
  322. posY = e.clientY;
  323.  
  324. });
  325.  
  326. document.addEventListener("mousedown", function(e){
  327. ray.setFromCamera(mouse, camera);
  328. if(ray.intersectObjects(scene.children).length == 0){
  329. cameraMovement = true;
  330. } else {
  331. xDown = e.clientX;
  332. yDown = e.clientY;
  333. }
  334. });
  335. document.addEventListener("mouseup", function(e){
  336. if(cameraMovement){
  337. cameraMovement = false;
  338. } else {
  339. xUp = e.clientX;
  340. yUp = e.clientY;
  341. collision();
  342. }
  343. });
  344.  
  345. window.addEventListener("mousemove", function(){
  346. mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
  347. mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
  348. });
  349.  
  350.  
  351. };
  352.  
  353.  
  354. // main animation loop - calls every 50-60 ms.
  355. let mainLoop = function() {
  356. renderer.render(scene, camera);
  357. requestAnimationFrame(mainLoop);
  358. };
  359.  
  360. ///////////////////////////////////////////////
  361. init();
  362. mainLoop();
  363.  
  364. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!