API tools faq
paste
Guest User

Untitled

a guest
Dec 7th, 2013
194
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.67 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5. <title>Rubik's Cube</title>
  6. <meta charset="utf-8">
  7. <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  8. <style>
  9. body { font-family: Monospace; background-color: #000; color: #fff; margin: 0px; overflow: hidden; }
  10. #info { color: #fff; position: absolute; top: 10px; width: 100%; text-align: center; z-index: 100; display:block; }
  11. #info a, .button { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
  12. </style>
  13. </head>
  14.  
  15. <body>
  16.  
  17. <script src="threejs/build/three.min.js"></script>
  18. <script src="threejs/examples/js/controls/TrackballControls.js"></script>
  19. <script src="threejs/examples/js/Detector.js"></script>
  20. <script src="threejs/examples/js/libs/stats.min.js"></script>
  21.  
  22. <script>
  23. var container, stats;
  24. var camera, scene, renderer, controls;
  25. var projector, raycaster;
  26. var material;
  27. var mouse = new THREE.Vector2();
  28. var mouseMotion = 0;
  29. var windowHalfX = window.innerWidth / 2;
  30. var windowHalfY = window.innerHeight / 2;
  31. var center;
  32. var orange = new THREE.Color("orange");
  33. var red = new THREE.Color("red");
  34. var white = new THREE.Color("white");
  35. var yellow = new THREE.Color("yellow");
  36. var blue = new THREE.Color("blue");
  37. var green = new THREE.Color("green");
  38. var black = new THREE.Color("black");
  39.  
  40. init();
  41. animate();
  42.  
  43. function init() {
  44. //material
  45. material = new THREE.MeshLambertMaterial({
  46. vertexColors: THREE.FaceColors,
  47. shading: THREE.FlatShading
  48. });
  49.  
  50. // DOM container element
  51. container = document.createElement('div');
  52. document.body.appendChild(container);
  53.  
  54. // renderer
  55. renderer = new THREE.WebGLRenderer();
  56. renderer.setSize(window.innerWidth, window.innerHeight);
  57. renderer.setClearColor(new THREE.Color(0x252530));
  58. container.appendChild(renderer.domElement);
  59.  
  60. //
  61. projector = new THREE.Projector();
  62. raycaster = new THREE.Raycaster();
  63.  
  64. // camera
  65. camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 200 );
  66. camera.position.z = 40;
  67. camera.position.x = -40;
  68. camera.position.y = 40;
  69. controls = new THREE.TrackballControls(camera,container);
  70. controls.rotateSpeed = 1.0;
  71. controls.zoomSpeed = 1.2;
  72. controls.panSpeed = 0.8;
  73. controls.noZoom = false;
  74. controls.noPan = false;
  75. controls.staticMoving = true;
  76. controls.dynamicDampingFactor = 0.3;
  77. controls.keys = [65,83,68];
  78. controls.addEventListener('change',render);
  79.  
  80. // scene
  81. scene = new THREE.Scene();
  82. scene.add(camera);
  83.  
  84. // cube
  85. var center_geom = new THREE.CubeGeometry(10,10,10);
  86. center = new THREE.Mesh(center_geom, material);
  87.  
  88. for(var i = 0; i < 12; i ++){
  89. center_geom.faces[i].color = black;
  90. }
  91.  
  92. scene.add(center);
  93.  
  94. //up
  95. var up_geom = new THREE.CubeGeometry(10,10,10);
  96. up = new THREE.Mesh(up_geom,material);
  97. up.position.y = 12.5;
  98.  
  99. for(var i = 0; i < 12; i ++){
  100. up_geom.faces[i].color = black;
  101. }
  102.  
  103. up_geom.faces[4].color = white;
  104. up_geom.faces[5].color = white;
  105.  
  106. scene.add(up);
  107.  
  108. //down
  109. var down_geom = new THREE.CubeGeometry(10,10,10);
  110. down = new THREE.Mesh(down_geom,material);
  111. down.position.y = -12.5;
  112.  
  113. for(var i = 0; i < 12; i ++){
  114. down_geom.faces[i].color = black;
  115. }
  116.  
  117. down_geom.faces[6].color = yellow;
  118. down_geom.faces[7].color = yellow;
  119.  
  120. scene.add(down);
  121.  
  122. //left
  123. var left_geom = new THREE.CubeGeometry(10,10,10);
  124. left = new THREE.Mesh(left_geom,material);
  125. left.position.x = -12.5;
  126.  
  127. for(var i = 0; i < 12; i ++){
  128. left_geom.faces[i].color = black;
  129. }
  130.  
  131. left_geom.faces[2].color = blue;
  132. left_geom.faces[3].color = blue;
  133.  
  134. scene.add(left);
  135.  
  136. //right
  137. var right_geom = new THREE.CubeGeometry(10,10,10);
  138. right = new THREE.Mesh(right_geom,material);
  139. right.position.x = 12.5;
  140.  
  141. for(var i = 0; i < 12; i ++){
  142. right_geom.faces[i].color = black;
  143. }
  144.  
  145. right_geom.faces[0].color = green;
  146. right_geom.faces[1].color = green;
  147.  
  148. scene.add(right);
  149.  
  150. //front
  151. var front_geom = new THREE.CubeGeometry(10,10,10);
  152. front = new THREE.Mesh(front_geom,material);
  153. front.position.z = 12.5;
  154.  
  155. for(var i = 0; i < 12; i ++){
  156. front_geom.faces[i].color = black;
  157. }
  158.  
  159. front_geom.faces[8].color = red;
  160. front_geom.faces[9].color = red;
  161.  
  162. scene.add(front);
  163.  
  164. //back
  165. var back_geom = new THREE.CubeGeometry(10,10,10);
  166. back = new THREE.Mesh(back_geom,material);
  167. back.position.z = -12.5;
  168.  
  169. for(var i = 0; i < 12; i ++){
  170. back_geom.faces[i].color = black;
  171. }
  172.  
  173. back_geom.faces[10].color = orange;
  174. back_geom.faces[11].color = orange;
  175.  
  176. scene.add(back);
  177.  
  178. //ulf
  179. var ulf_geom = new THREE.CubeGeometry(10,10,10);
  180. ulf = new THREE.Mesh(ulf_geom, material);
  181. ulf.position.set(-12.5, 12.5, 12.5);
  182.  
  183. for(var i = 0; i < 12; i ++){
  184. ulf_geom.faces[i].color = black;
  185. }
  186.  
  187. ulf_geom.faces[4].color = white;
  188. ulf_geom.faces[5].color = white;
  189. ulf_geom.faces[2].color = blue;
  190. ulf_geom.faces[3].color = blue;
  191. ulf_geom.faces[8].color = red;
  192. ulf_geom.faces[9].color = red;
  193.  
  194. scene.add(ulf);
  195.  
  196. //ufr
  197. var ufr_geom = new THREE.CubeGeometry(10,10,10);
  198. ufr = new THREE.Mesh(ufr_geom, material);
  199. ufr.position.set(12.5, 12.5, 12.5);
  200.  
  201. for(var i = 0; i < 12; i ++){
  202. ufr_geom.faces[i].color = black;
  203. }
  204.  
  205. ufr_geom.faces[4].color = white;
  206. ufr_geom.faces[5].color = white;
  207. ufr_geom.faces[0].color = green;
  208. ufr_geom.faces[1].color = green;
  209. ufr_geom.faces[8].color = red;
  210. ufr_geom.faces[9].color = red;
  211.  
  212. scene.add(ufr);
  213.  
  214. //ulb
  215. var ulb_geom = new THREE.CubeGeometry(10,10,10);
  216. ulb = new THREE.Mesh(ulb_geom, material);
  217. ulb.position.set(-12.5, 12.5, -12.5);
  218.  
  219. for(var i = 0; i < 12; i ++){
  220. ulb_geom.faces[i].color = black;
  221. }
  222.  
  223. ulb_geom.faces[4].color = white;
  224. ulb_geom.faces[5].color = white;
  225. ulb_geom.faces[2].color = blue;
  226. ulb_geom.faces[3].color = blue;
  227. ulb_geom.faces[10].color = orange;
  228. ulb_geom.faces[11].color = orange;
  229.  
  230. scene.add(ulb);
  231.  
  232. //ubr
  233. var ubr_geom = new THREE.CubeGeometry(10,10,10);
  234. ubr = new THREE.Mesh(ubr_geom, material);
  235. ubr.position.set(12.5, 12.5, -12.5);
  236.  
  237. for(var i = 0; i < 12; i ++){
  238. ubr_geom.faces[i].color = black;
  239. }
  240.  
  241. ubr_geom.faces[4].color = white;
  242. ubr_geom.faces[5].color = white;
  243. ubr_geom.faces[0].color = green;
  244. ubr_geom.faces[1].color = green;
  245. ubr_geom.faces[10].color = orange;
  246. ubr_geom.faces[11].color = orange;
  247.  
  248. scene.add(ubr);
  249.  
  250. //dlf
  251. var dlf_geom = new THREE.CubeGeometry(10,10,10);
  252. dlf = new THREE.Mesh(dlf_geom, material);
  253. dlf.position.set(-12.5, -12.5, 12.5);
  254.  
  255. for(var i = 0; i < 12; i ++){
  256. dlf_geom.faces[i].color = black;
  257. }
  258.  
  259. dlf_geom.faces[6].color = yellow;
  260. dlf_geom.faces[7].color = yellow;
  261. dlf_geom.faces[2].color = blue;
  262. dlf_geom.faces[3].color = blue;
  263. dlf_geom.faces[8].color = red;
  264. dlf_geom.faces[9].color = red;
  265.  
  266. scene.add(dlf);
  267.  
  268. //dfr
  269. var dfr_geom = new THREE.CubeGeometry(10,10,10);
  270. dfr = new THREE.Mesh(dfr_geom, material);
  271. dfr.position.set(12.5, -12.5, 12.5);
  272.  
  273. for(var i = 0; i < 12; i ++){
  274. dfr_geom.faces[i].color = black;
  275. }
  276.  
  277. dfr_geom.faces[6].color = yellow;
  278. dfr_geom.faces[7].color = yellow;
  279. dfr_geom.faces[0].color = green;
  280. dfr_geom.faces[1].color = green;
  281. dfr_geom.faces[8].color = red;
  282. dfr_geom.faces[9].color = red;
  283.  
  284. scene.add(dfr);
  285.  
  286. //dlb
  287. var dlb_geom = new THREE.CubeGeometry(10,10,10);
  288. dlb = new THREE.Mesh(dlb_geom, material);
  289. dlb.position.set(-12.5, -12.5, -12.5);
  290.  
  291. for(var i = 0; i < 12; i ++){
  292. dlb_geom.faces[i].color = black;
  293. }
  294.  
  295. dlb_geom.faces[6].color = yellow;
  296. dlb_geom.faces[7].color = yellow;
  297. dlb_geom.faces[2].color = blue;
  298. dlb_geom.faces[3].color = blue;
  299. dlb_geom.faces[10].color = orange;
  300. dlb_geom.faces[11].color = orange;
  301.  
  302. scene.add(dlb);
  303.  
  304. //dbr
  305. var dbr_geom = new THREE.CubeGeometry(10,10,10);
  306. dbr = new THREE.Mesh(dbr_geom, material);
  307. dbr.position.set(12.5, -12.5, -12.5);
  308.  
  309. for(var i = 0; i < 12; i ++){
  310. dbr_geom.faces[i].color = black;
  311. }
  312.  
  313. dbr_geom.faces[6].color = yellow;
  314. dbr_geom.faces[7].color = yellow;
  315. dbr_geom.faces[0].color = green;
  316. dbr_geom.faces[1].color = green;
  317. dbr_geom.faces[10].color = orange;
  318. dbr_geom.faces[11].color = orange;
  319.  
  320. scene.add(dbr);
  321.  
  322. //df
  323. var df_geom = new THREE.CubeGeometry(10,10,10);
  324. df = new THREE.Mesh(df_geom, material);
  325. df.position.set(0, -12.5, 12.5);
  326.  
  327. for(var i = 0; i < 12; i ++){
  328. df_geom.faces[i].color = black;
  329. }
  330.  
  331. df_geom.faces[6].color = yellow;
  332. df_geom.faces[7].color = yellow;
  333. df_geom.faces[8].color = red;
  334. df_geom.faces[9].color = red;
  335.  
  336. scene.add(df);
  337.  
  338. //dr
  339. var dr_geom = new THREE.CubeGeometry(10,10,10);
  340. dr = new THREE.Mesh(dr_geom, material);
  341. dr.position.set(12.5, -12.5, 0);
  342.  
  343. for(var i = 0; i < 12; i ++){
  344. dr_geom.faces[i].color = black;
  345. }
  346.  
  347. dr_geom.faces[6].color = yellow;
  348. dr_geom.faces[7].color = yellow;
  349. dr_geom.faces[0].color = green;
  350. dr_geom.faces[1].color = green;
  351.  
  352. scene.add(dr);
  353.  
  354. //db
  355. var db_geom = new THREE.CubeGeometry(10,10,10);
  356. db = new THREE.Mesh(db_geom, material);
  357. db.position.set(0, -12.5, -12.5);
  358.  
  359. for(var i = 0; i < 12; i ++){
  360. db_geom.faces[i].color = black;
  361. }
  362.  
  363. db_geom.faces[6].color = yellow;
  364. db_geom.faces[7].color = yellow;
  365. db_geom.faces[10].color = orange;
  366. db_geom.faces[11].color = orange;
  367.  
  368. scene.add(db);
  369.  
  370. //dl
  371. var dl_geom = new THREE.CubeGeometry(10,10,10);
  372. dl = new THREE.Mesh(dl_geom, material);
  373. dl.position.set(-12.5, -12.5, 0);
  374.  
  375. for(var i = 0; i < 12; i ++){
  376. dl_geom.faces[i].color = black;
  377. }
  378.  
  379. dl_geom.faces[6].color = yellow;
  380. dl_geom.faces[7].color = yellow;
  381. dl_geom.faces[2].color = blue;
  382. dl_geom.faces[3].color = blue;
  383.  
  384. scene.add(dl);
  385.  
  386. //ul
  387. var ul_geom = new THREE.CubeGeometry(10,10,10);
  388. ul = new THREE.Mesh(ul_geom, material);
  389. ul.position.set(-12.5, 12.5, 0);
  390.  
  391. for(var i = 0; i < 12; i ++){
  392. ul_geom.faces[i].color = black;
  393. }
  394.  
  395. ul_geom.faces[4].color = white;
  396. ul_geom.faces[5].color = white;
  397. ul_geom.faces[2].color = blue;
  398. ul_geom.faces[3].color = blue;
  399.  
  400. scene.add(ul);
  401.  
  402. //ur
  403. var ur_geom = new THREE.CubeGeometry(10,10,10);
  404. ur = new THREE.Mesh(ur_geom, material);
  405. ur.position.set(12.5, 12.5, 0);
  406.  
  407. for(var i = 0; i < 12; i ++){
  408. ur_geom.faces[i].color = black;
  409. }
  410.  
  411. ur_geom.faces[4].color = white;
  412. ur_geom.faces[5].color = white;
  413. ur_geom.faces[0].color = green;
  414. ur_geom.faces[1].color = green;
  415.  
  416. scene.add(ur);
  417.  
  418. //ub
  419. var ub_geom = new THREE.CubeGeometry(10,10,10);
  420. ub = new THREE.Mesh(ub_geom, material);
  421. ub.position.set(0, 12.5, -12.5);
  422.  
  423. for(var i = 0; i < 12; i ++){
  424. ub_geom.faces[i].color = black;
  425. }
  426.  
  427. ub_geom.faces[4].color = white;
  428. ub_geom.faces[5].color = white;
  429. ub_geom.faces[10].color = orange;
  430. ub_geom.faces[11].color = orange;
  431.  
  432. scene.add(ub);
  433.  
  434. //uf
  435. var uf_geom = new THREE.CubeGeometry(10,10,10);
  436. uf = new THREE.Mesh(uf_geom, material);
  437. uf.position.set(0, 12.5, 12.5);
  438.  
  439. for(var i = 0; i < 12; i ++){
  440. uf_geom.faces[i].color = black;
  441. }
  442.  
  443. uf_geom.faces[4].color = white;
  444. uf_geom.faces[5].color = white;
  445. uf_geom.faces[8].color = red;
  446. uf_geom.faces[9].color = red;
  447.  
  448. scene.add(uf);
  449.  
  450. //fl
  451. var fl_geom = new THREE.CubeGeometry(10,10,10);
  452. fl = new THREE.Mesh(fl_geom, material);
  453. fl.position.set(-12.5, 0, 12.5);
  454.  
  455. for(var i = 0; i < 12; i ++){
  456. fl_geom.faces[i].color = black;
  457. }
  458.  
  459. fl_geom.faces[2].color = blue;
  460. fl_geom.faces[3].color = blue;
  461. fl_geom.faces[8].color = red;
  462. fl_geom.faces[9].color = red;
  463.  
  464. scene.add(fl);
  465.  
  466. //fr
  467. var fr_geom = new THREE.CubeGeometry(10,10,10);
  468. fr = new THREE.Mesh(fr_geom, material);
  469. fr.position.set(12.5, 0, 12.5);
  470.  
  471. for(var i = 0; i < 12; i ++){
  472. fr_geom.faces[i].color = black;
  473. }
  474.  
  475. fr_geom.faces[0].color = green;
  476. fr_geom.faces[1].color = green;
  477. fr_geom.faces[8].color = red;
  478. fr_geom.faces[9].color = red;
  479.  
  480. scene.add(fr);
  481.  
  482. //lb
  483. var lb_geom = new THREE.CubeGeometry(10,10,10);
  484. lb = new THREE.Mesh(lb_geom, material);
  485. lb.position.set(-12.5, 0, -12.5);
  486.  
  487. for(var i = 0; i < 12; i ++){
  488. lb_geom.faces[i].color = black;
  489. }
  490.  
  491. lb_geom.faces[2].color = blue;
  492. lb_geom.faces[3].color = blue;
  493. lb_geom.faces[10].color = orange;
  494. lb_geom.faces[11].color = orange;
  495.  
  496. scene.add(lb);
  497.  
  498. //br
  499. var br_geom = new THREE.CubeGeometry(10,10,10);
  500. br = new THREE.Mesh(br_geom, material);
  501. br.position.set(12.5, 0, -12.5);
  502.  
  503. for(var i = 0; i < 12; i ++){
  504. br_geom.faces[i].color = black;
  505. }
  506.  
  507. br_geom.faces[0].color = green;
  508. br_geom.faces[1].color = green;
  509. br_geom.faces[10].color = orange;
  510. br_geom.faces[11].color = orange;
  511.  
  512. scene.add(br);
  513.  
  514. // lights
  515. var light = new THREE.PointLight(0xffffff);
  516. light.position.set(0, 0, 0);
  517. camera.add( light );
  518.  
  519. // events
  520. document.addEventListener('mousedown', onDocumentMouseDown, true );
  521. document.addEventListener('mouseup', onDocumentMouseUp, false );
  522. document.addEventListener('mousemove', onDocumentMouseMove, false );
  523. window.addEventListener('resize', onWindowResize, false );
  524. }
  525.  
  526. function onWindowResize() {
  527. windowHalfX = window.innerWidth / 2;
  528. windowHalfY = window.innerHeight / 2;
  529.  
  530. camera.aspect = window.innerWidth / window.innerHeight;
  531. camera.updateProjectionMatrix();
  532.  
  533. renderer.setSize( window.innerWidth, window.innerHeight );
  534. }
  535.  
  536. function onDocumentMouseDown(event) {
  537. mouseMotion = 0;
  538. }
  539.  
  540. function onDocumentMouseUp(event) {
  541. if (mouseMotion >= 3) return;
  542.  
  543. var group = new THREE.Object3D();
  544.  
  545. var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
  546. projector.unprojectVector( vector, camera );
  547.  
  548. var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
  549.  
  550. var intersects = raycaster.intersectObjects( scene.children );
  551.  
  552. if ( intersects.length > 0 ) {
  553. var cubie = intersects[0].object;
  554. if(cubie.position.x == 0 && cubie.position.y == -12.5 && cubie.position.z == 0){
  555. for(var i = scene.children.length - 1; i >=0; i--){
  556. var cubie = scene.children[i];
  557. if(cubie.position.y == -12.5){
  558. group.add(cubie);
  559. }
  560. }
  561. group.rotateOnAxis(new THREE.Vector3(0,1,0), Math.PI/2);
  562. }else if(cubie.position.x == 0 && cubie.position.y == 12.5 && cubie.position.z == 0){
  563. for(var i = scene.children.length - 1; i >=0; i--){
  564. var cubie = scene.children[i];
  565. if(cubie.position.y == 12.5){
  566. group.add(cubie);
  567. }
  568. }
  569. group.rotateOnAxis(new THREE.Vector3(0,-1,0), Math.PI/2);
  570. }else if(cubie.position.x == -12.5 && cubie.position.y == 0 && cubie.position.z == 0){
  571. for(var i = scene.children.length - 1; i >=0; i--){
  572. var cubie = scene.children[i];
  573. if(cubie.position.x == -12.5){
  574. group.add(cubie);
  575. }
  576. }
  577. group.rotateOnAxis(new THREE.Vector3(1,0,0), Math.PI/2);
  578. }else if(cubie.position.x == 12.5 && cubie.position.y == 0 && cubie.position.z == 0){
  579. for(var i = scene.children.length - 1; i >=0; i--){
  580. var cubie = scene.children[i];
  581. if(cubie.position.x == 12.5){
  582. group.add(cubie);
  583. }
  584. }
  585. group.rotateOnAxis(new THREE.Vector3(-1,0,0), Math.PI/2);
  586. }else if(cubie.position.x == 0 && cubie.position.y == 0 && cubie.position.z == -12.5){
  587. for(var i = scene.children.length - 1; i >=0; i--){
  588. var cubie = scene.children[i];
  589. if(cubie.position.z == -12.5){
  590. group.add(cubie);
  591. }
  592. }
  593. group.rotateOnAxis(new THREE.Vector3(0, 0, 1), Math.PI/2);
  594. }else if(cubie.position.x == 0 && cubie.position.y == 0 && cubie.position.z == 12.5){
  595. for(var i = scene.children.length - 1; i >=0; i--){
  596. var cubie = scene.children[i];
  597. if(cubie.position.z == 12.5){
  598. group.add(cubie);
  599. }
  600. }
  601. group.rotateOnAxis(new THREE.Vector3(0,0,-1), Math.PI/2);
  602. }
  603. }
  604. scene.add(group);
  605. for(var i = group.children.length - 1; i >= 0; i--){
  606. //scene.add(group.children[i]);
  607. }
  608. //scene.remove(group);
  609. }
  610.  
  611. function onDocumentMouseMove(event) {
  612. mouseMotion += 1;
  613. mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
  614. mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
  615. }
  616.  
  617. function animate() {
  618. requestAnimationFrame(animate);
  619.  
  620. if (controls != undefined) controls.update();
  621. render();
  622. }
  623.  
  624. function render() {
  625. renderer.render(scene,camera);
  626. }
  627.  
  628. </script>
  629.  
  630. </body>
  631. </html>
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!