{"__browser":{"device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer; ambient-light-sensor; camera; display-capture; encrypted-media; geolocation; gyroscope; microphone; midi; payment; vr; web-share","iframe_sandbox":"allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads allow-presentation"},"__graphql":{"data":{"data":{"sessionUser":{"id":"VoDkNZ","name":"Captain Anonymous","title":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","currentContext":{"id":"VoDkNZ","title":"Captain Anonymous","name":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","username":"anon","__typename":"User"},"currentTeamId":null,"username":"anon","admin":false,"anon":true,"pro":false,"verified":false,"teams":[],"__typename":"User"}}},"url":"https://codepen.io/graphql","api":"cprails","cpedata":{"action":"show","controller":"live_fullpage"}},"__user":{"anon":true,"base_url":"/anon/","current_team_id":0,"current_team_hashid":null,"hashid":"VoDkNZ","id":1,"itemType":"user","name":"Captain Anonymous","paid":false,"tier":0,"username":"anon","created_at":null,"email_verified":null,"collections_count":0,"collections_private_count":0,"followers_count":0,"followings_count":0,"pens_count":0,"pens_private_count":0,"projects_count":0,"projects_private_count":0},"__firebase":{"config":{"apiKey":"AIzaSyBgLAe7N_MdFpuVofMkcQLGwwhUu5tuxls","authDomain":"codepen-store-production.firebaseapp.com","databaseURL":"https://codepen-store-production.firebaseio.com","disabled":false,"projectId":"codepen-store-production"},"token":"eyJhbGciOiJSUzI1NiJ9.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiVm9Ea05aIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNjg1NzE1MjExLCJpYXQiOjE2ODU3MTE2MTEsImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6IlZvRGtOWiJ9.NkVWalGyLmmSyxCHgsaHfz5StbC-F-MT9NUmbUCGrUI8BtG74cK7YYePxFhq5SLFyUdq1cram7YX40gdC3vE7rlBSANxVFJdynguk9l8tJiRVjn0m_MAWxXVpU0Cfo6Qg5ArMzKTmW8fsJSFufLvADxSgP3QH-HKdIZu0NRsHc_VVD5S9a1baDEBbzWxx1_lqb-4SEtLFd2HNFQCb6ah-DME-vWttdC9NlxbIQ9VdRTD7SC9rc1qrleMSc8m3PK0t4BPWShlNnnpXdYRMwybasF7O8UATon-FBxud0btdU1VfiVps6pD5X-KXrYCnh2OJy4NPG6butMfhy-CwdZocA"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__item":"{\"id\":44539339,\"user_id\":3685267,\"html\":\"\",\"css\":\"body {\\n margin: 0;\\n overflow: hidden;\\n}\\n\",\"js\":\"let scene, camera, renderer, controls, rollObject, group;\\n\\nconst rotateConditions = {\\n right: { axis: \\\"x\\\", value: 1 },\\n left: { axis: \\\"x\\\", value: -1 },\\n top: { axis: \\\"y\\\", value: 1 },\\n bottom: { axis: \\\"y\\\", value: -1 },\\n front: { axis: \\\"z\\\", value: 1 },\\n back: { axis: \\\"z\\\", value: -1 }\\n};\\n\\nconst colorConditions = [\\n [\\\"x\\\", 1, \\\"green\\\"],\\n [\\\"x\\\", -1, \\\"orange\\\"],\\n [\\\"y\\\", 1, \\\"red\\\"],\\n [\\\"y\\\", -1, \\\"yellow\\\"],\\n [\\\"z\\\", 1, \\\"blue\\\"],\\n [\\\"z\\\", -1, \\\"white\\\"]\\n];\\n\\nconst step = Math.PI \\/ 100;\\nconst faces = [\\\"front\\\", \\\"back\\\", \\\"left\\\", \\\"right\\\", \\\"top\\\", \\\"bottom\\\"];\\nconst directions = [-1, 1];\\nconst cPositions = [-1, 0, 1];\\nlet cubes = [];\\n\\nconst vertexShader = `\\nvarying vec2 vUv;\\n\\nvoid main() {\\n vUv = uv;\\n gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\\n}\\n`;\\n\\nconst fragmentShader = `\\nvarying vec2 vUv;\\nuniform vec3 faceColor;\\n\\nvoid main() {\\n vec3 border = vec3(0.533);\\n float bl = smoothstep(0.0, 0.03, vUv.x);\\n float br = smoothstep(1.0, 0.97, vUv.x);\\n float bt = smoothstep(0.0, 0.03, vUv.y);\\n float bb = smoothstep(1.0, 0.97, vUv.y);\\n vec3 c = mix(border, faceColor, bt*br*bb*bl);\\n gl_FragColor = vec4(c, 1.0);\\n}\\n`;\\nconst createMaterial = (color) =>\\n new THREE.ShaderMaterial({\\n fragmentShader,\\n vertexShader,\\n uniforms: { faceColor: { type: \\\"v3\\\", value: color } }\\n });\\n\\nconst materials = Object.entries({\\n blue: new THREE.Vector4(0.011, 0.352, 0.65),\\n red: new THREE.Vector4(0.847, 0.203, 0.372),\\n white: new THREE.Vector4(0.956, 0.956, 0.956),\\n green: new THREE.Vector4(0.054, 0.486, 0.117),\\n yellow: new THREE.Vector4(0.807, 0.725, 0.07),\\n orange: new THREE.Vector4(0.792, 0.317, 0.086),\\n gray: new THREE.Vector4(0.301, 0.243, 0.243)\\n}).reduce((acc, [key, val]) => ({ ...acc, [key]: createMaterial(val) }), {});\\n\\nfunction init() {\\n const { innerHeight, innerWidth } = window;\\n scene = new THREE.Scene();\\n const canvas = document.createElement(\\\"canvas\\\");\\n document.body.appendChild(canvas);\\n\\n renderer = new THREE.WebGLRenderer({ antialias: true, canvas });\\n renderer.setClearColor(\\\"#000\\\");\\n renderer.setSize(innerWidth, innerHeight);\\n renderer.setPixelRatio(window.devicePixelRatio);\\n camera = new THREE.PerspectiveCamera(45, innerWidth \\/ innerHeight, 1, 1000);\\n camera.position.set(6, 6, 6);\\n controls = new THREE.OrbitControls(camera, canvas);\\n\\n window.addEventListener(\\\"resize\\\", onWindowResize, false);\\n createObjects();\\n}\\n\\nfunction onWindowResize() {\\n const { innerWidth, innerHeight } = window;\\n camera.aspect = innerWidth \\/ innerHeight;\\n camera.updateProjectionMatrix();\\n renderer.setSize(innerWidth, innerHeight);\\n}\\n\\nclass Roll {\\n constructor(face, direction) {\\n this.face = face;\\n this.stepCount = 0;\\n this.active = true;\\n this.init();\\n this.direction = direction;\\n }\\n\\n init() {\\n cubes.forEach((item) => {\\n if (item.position[this.face.axis] == this.face.value) {\\n scene.remove(item);\\n group.add(item);\\n }\\n });\\n }\\n rollFace() {\\n if (this.stepCount != 50) {\\n group.rotation[this.face.axis] += this.direction * step;\\n this.stepCount += 1;\\n } else {\\n if (this.active) {\\n this.active = false;\\n this.clearGroup();\\n }\\n }\\n }\\n\\n clearGroup() {\\n for (var i = group.children.length - 1; i >= 0; i--) {\\n let item = group.children[i];\\n item.getWorldPosition(item.position);\\n item.getWorldQuaternion(item.rotation);\\n item.position.x = Math.round(item.position.x);\\n item.position.y = Math.round(item.position.y);\\n item.position.z = Math.round(item.position.z);\\n group.remove(item);\\n scene.add(item);\\n }\\n group.rotation[this.face.axis] = 0;\\n }\\n}\\n\\nfunction createObjects() {\\n const geometry = new THREE.BoxGeometry(1, 1, 1);\\n let createCube = (position) => {\\n let mat = [];\\n for (let i = 0; i < 6; i++) {\\n let cnd = colorConditions[i];\\n if (position[cnd[0]] == cnd[1]) {\\n mat.push(materials[cnd[2]]);\\n } else {\\n mat.push(materials.gray);\\n }\\n }\\n const cube = new THREE.Mesh(geometry, mat);\\n cube.position.set(position.x, position.y, position.z);\\n cubes.push(cube);\\n scene.add(cube);\\n };\\n\\n cPositions.forEach((x) => {\\n cPositions.forEach((y) => {\\n cPositions.forEach((z) => {\\n createCube({ x, y, z });\\n });\\n });\\n });\\n\\n group = new THREE.Group();\\n scene.add(group);\\n rollObject = new Roll(rotateConditions[\\\"top\\\"], -1);\\n}\\n\\nfunction update() {\\n if (rollObject) {\\n if (rollObject.active) {\\n rollObject.rollFace();\\n } else {\\n rollObject = new Roll(\\n rotateConditions[faces[Math.floor(Math.random() * faces.length)]],\\n directions[Math.floor(Math.random() * directions.length)]\\n );\\n }\\n }\\n}\\n\\nfunction render() {\\n requestAnimationFrame(render);\\n update();\\n renderer.render(scene, camera);\\n}\\n\\ninit();\\nrender();\\n\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2020-05-06T16:39:38.000Z\",\"updated_at\":\"2020-05-06T16:42:40.000Z\",\"title\":\"Rubik's cube three.js\",\"description\":\"\",\"slug_hash\":\"ExVQmNB\",\"head\":\"\",\"private\":false,\"slug_hash_private\":\"837d76123ecefc594e6ea7c2f2797bc7\",\"has_animation\":true,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":0,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity_score\":0,\"views_count\":0,\"pick_visible_at\":null,\"cpid\":\"0171eadb-6110-77c1-b124-95b7685e9398\",\"is_new_editor_pen\":false,\"pen_hash\":null,\"hashid\":\"ExVQmNB\"}"}