Earth three.js

{"draftJsState":{"blocks":[{"data":{"image":{"id":"5ece491dcfbf4d2658c0c13f"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"сцена, созданная в three.js","type":"atomic:image","key":"2l8u4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":"Three.js — библиотека JavaScript, используется для создания и отображения анимированной компьютерной 3D графики.","type":"unstyled","key":"eg5hm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рендереры: Canvas, SVG или WebGL","type":"unordered-list-item","key":"b6u6f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сцена: добавление и удаление объектов в режиме реального времени; туман","type":"unordered-list-item","key":"7u6bp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Камеры: перспективная или ортографическая","type":"unordered-list-item","key":"ck6hn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Анимация: каркасы, прямая кинематика, инверсная кинематика, покадровая анимация","type":"unordered-list-item","key":"508bn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Источники света: внешний, направленный, точечный; тени: брошенные и полученные","type":"unordered-list-item","key":"49si3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шейдеры: полный доступ ко всем OpenGL-шейдерам (GLSL)","type":"unordered-list-item","key":"7nuqo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Объекты: сети, частицы, спрайты, линии, скелетная анимация и другое","type":"unordered-list-item","key":"b3lnp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Геометрия: плоскость, куб, сфера, тор, 3D текст и другое; модификаторы: ткань, выдавливание","type":"unordered-list-item","key":"95hnu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Загрузчики данных: двоичный, изображения, JSON и сцена","type":"unordered-list-item","key":"8l8e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Экспорт и импорт: утилиты, создающие Three.js-совместимые JSON файлы из форматов: Blender, openCTM, FBX, 3D Studio Max, и Wavefront .obj файл","type":"unordered-list-item","key":"5gk8l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поддержка: документация по API библиотеки находится в процессе постоянного расширения и дополнения, есть публичный форум и обширное сообщество","type":"unordered-list-item","key":"38gcg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Примеры: на официальном сайте можно найти более 150 примеров работы со шрифтами, моделями, текстурами, звуком и другими элементами сцены","type":"unordered-list-item","key":"5634o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создание сцены","type":"header-two","key":"e7531"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для начала необходимо запустить локальный сервер. В качестве варианта - локальный сервер Python с помощью команды:","type":"unstyled","key":"9ur1m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"python3 -m http.server","type":"blockquote","key":"59r40"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Файл ./index,html:","type":"unstyled","key":"44lvi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":155,"style":"ITALIC"},{"length":3,"offset":205,"style":"ITALIC"},{"length":3,"offset":262,"style":"ITALIC"},{"length":4,"offset":286,"style":"ITALIC"}],"text":"\n\n\tEarth three.js\n\t\n\n\n\t\n\t\n\t\n\n","type":"blockquote","key":"c8s43"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":16,"style":"BOLD"},{"length":12,"offset":27,"style":"BOLD"},{"length":12,"offset":52,"style":"ITALIC"}],"text":"Файлы библиотек three.js и CCapture.js поместить в ./files/libs/","type":"unstyled","key":"cvred"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":6,"style":"ITALIC"}],"text":"Файл ./scripts/start.js:","type":"unstyled","key":"9t7mm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":56,"offset":0,"style":"ITALIC"}],"text":"import {run} from './solar_system/earth/run.js';\n\nrun();","type":"blockquote","key":"e4cl9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":6,"style":"ITALIC"}],"text":"Файл ./scripts/solar_system/earth/run.js:","type":"unstyled","key":"e3ga5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":197,"style":"BOLD"},{"length":11,"offset":259,"style":"BOLD"},{"length":12,"offset":288,"style":"BOLD"},{"length":12,"offset":331,"style":"BOLD"},{"length":18,"offset":374,"style":"BOLD"},{"length":22,"offset":410,"style":"BOLD"},{"length":11,"offset":449,"style":"BOLD"},{"length":12,"offset":478,"style":"BOLD"},{"length":11,"offset":507,"style":"BOLD"}],"text":"import {createScene, createCamera, createRender, createLightAmbient, createLightDirectional} from './base.js';\nimport {createEarth, createClouds, createStars} from './objects.js';\n\nexport function run() {\n\tlet width = 1920;\n\tlet height = 1080; \n \tlet scene = createScene();\n\tlet camera = createCamera(width, height);\n\tlet render = createRender(width, height);\n\tlet lightA = createLightAmbient();\n\tlet lightB = createLightDirectional();\n\tlet earth = createEarth();\n\tlet clouds = createClouds();\n\tlet stars = createStars();","type":"blockquote","key":"7fkk8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":0,"style":"ITALIC"}],"text":"\tcamera.position.z = 1.5;","type":"blockquote","key":"4gmuj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"ITALIC"},{"length":27,"offset":145,"style":"ITALIC"},{"length":30,"offset":175,"style":"ITALIC"},{"length":3,"offset":7,"style":"BOLD"},{"length":3,"offset":27,"style":"BOLD"},{"length":3,"offset":47,"style":"BOLD"},{"length":3,"offset":67,"style":"BOLD"},{"length":3,"offset":87,"style":"BOLD"},{"length":3,"offset":107,"style":"BOLD"},{"length":7,"offset":131,"style":"BOLD"},{"length":21,"offset":208,"style":"BOLD"},{"length":7,"offset":230,"style":"BOLD"},{"length":6,"offset":249,"style":"BOLD"},{"length":7,"offset":278,"style":"BOLD"}],"text":"\tscene.add(lightA);\n\tscene.add(lightA);\n\tscene.add(lightB);\n\tscene.add(earth);\n \tscene.add(clouds);\n\tscene.add(stars);\n \n\tfunction animate() {\n\t\tearth.rotation.y += 0.0005;\n\t\tclouds.rotation.y += 0.0005; \n\t\trequestAnimationFrame(animate);\n\t\trender.render(scene, camera);\n\t}\n \n\tanimate();\n}","type":"blockquote","key":"aena7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":6,"style":"ITALIC"}],"text":"Файл ./scripts/solar_system/earth/base.js:","type":"unstyled","key":"ebuf1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":16,"style":"BOLD"},{"length":5,"offset":44,"style":"BOLD"},{"length":5,"offset":50,"style":"BOLD"},{"length":12,"offset":78,"style":"BOLD"},{"length":5,"offset":111,"style":"BOLD"},{"length":17,"offset":117,"style":"BOLD"},{"length":12,"offset":175,"style":"BOLD"},{"length":5,"offset":214,"style":"BOLD"},{"length":13,"offset":220,"style":"BOLD"},{"length":7,"offset":245,"style":"BOLD"},{"length":11,"offset":275,"style":"BOLD"},{"length":18,"offset":342,"style":"BOLD"},{"length":5,"offset":377,"style":"BOLD"},{"length":12,"offset":383,"style":"BOLD"},{"length":22,"offset":426,"style":"BOLD"},{"length":5,"offset":470,"style":"BOLD"},{"length":16,"offset":476,"style":"BOLD"},{"length":3,"offset":523,"style":"BOLD"}],"text":"export function createScene() {\n\treturn new THREE.Scene();\n}\n\nexport function createCamera(w, h) {\n\treturn new THREE.PerspectiveCamera(75, w/h, 0.1, 1000);\n}\n\nexport function createRender(w, h) {\n\tlet render = new THREE.WebGLRenderer();\n\trender.setSize(w, h);\n\tdocument.body.appendChild(render.domElement);\n\treturn render;\n}\n\nexport function createLightAmbient() {\n\treturn new THREE.AmbientLight(0x333333);\n}\n\nexport function createLightDirectional() {\n\tlet light = new THREE.DirectionalLight(0xffffff, 1);\n\tlight.position.set(5,3,5);\n\treturn light;\n}","type":"blockquote","key":"9c7fq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":39,"offset":6,"style":"ITALIC"}],"text":"Файл ./scripts/solar_system/earth/objects.js:","type":"unstyled","key":"ffrqv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":16,"style":"BOLD"},{"length":5,"offset":256,"style":"BOLD"},{"length":4,"offset":262,"style":"BOLD"},{"length":5,"offset":274,"style":"BOLD"},{"length":14,"offset":280,"style":"BOLD"},{"length":5,"offset":315,"style":"BOLD"},{"length":17,"offset":321,"style":"BOLD"},{"length":5,"offset":353,"style":"BOLD"},{"length":13,"offset":359,"style":"BOLD"},{"length":4,"offset":375,"style":"BOLD"},{"length":5,"offset":411,"style":"BOLD"},{"length":13,"offset":417,"style":"BOLD"},{"length":4,"offset":433,"style":"BOLD"},{"length":5,"offset":493,"style":"BOLD"},{"length":13,"offset":499,"style":"BOLD"},{"length":4,"offset":515,"style":"BOLD"},{"length":5,"offset":552,"style":"BOLD"},{"length":5,"offset":558,"style":"BOLD"},{"length":12,"offset":602,"style":"BOLD"},{"length":5,"offset":699,"style":"BOLD"},{"length":4,"offset":705,"style":"BOLD"},{"length":5,"offset":717,"style":"BOLD"},{"length":14,"offset":723,"style":"BOLD"},{"length":5,"offset":760,"style":"BOLD"},{"length":17,"offset":766,"style":"BOLD"},{"length":5,"offset":798,"style":"BOLD"},{"length":13,"offset":804,"style":"BOLD"},{"length":4,"offset":820,"style":"BOLD"},{"length":11,"offset":884,"style":"BOLD"},{"length":5,"offset":982,"style":"BOLD"},{"length":4,"offset":988,"style":"BOLD"},{"length":5,"offset":1000,"style":"BOLD"},{"length":14,"offset":1006,"style":"BOLD"},{"length":5,"offset":1041,"style":"BOLD"},{"length":17,"offset":1047,"style":"BOLD"},{"length":5,"offset":1078,"style":"BOLD"},{"length":13,"offset":1084,"style":"BOLD"},{"length":4,"offset":1100,"style":"BOLD"}],"text":"export function createEarth() {\n\tlet textureEarth = '/scripts/solar_system/earth/images/earth/4k.jpg';\n\tlet textureBump = '/scripts/solar_system/earth/images/bump/4k.jpg';\n\tlet textureWater = '/scripts/solar_system/earth/images/water/4k.png';\n\n\treturn new THREE.Mesh(\n\t\tnew THREE.SphereGeometry(0.5, 32, 32),\n\t\tnew THREE.MeshPhongMaterial({\n\t\t\tmap: new THREE.TextureLoader().load(textureEarth),\n\t\t\tbumpMap: new THREE.TextureLoader().load(textureBump),\n\t\t\tbumpScale: 0.005,\n\t\t\tspecularMap: new THREE.TextureLoader().load(textureWater),\n\t\t\tspecular: new THREE.Color('grey') \n\t\t})\n\t );\n}\n\nexport function createClouds() {\n\tlet texture = '/scripts/solar_system/earth/images/clouds/4k.png';\n\n\treturn new THREE.Mesh(\n\t\tnew THREE.SphereGeometry(0.503, 32, 32),\n\t\tnew THREE.MeshPhongMaterial({\n\t\t\tmap: new THREE.TextureLoader().load(texture),\n\t\t\ttransparent: true\n\t\t})\n\t);\n}\n\nexport function createStars() {\n\tlet texture = '/scripts/solar_system/earth/images/galaxy/stars.png';\n\treturn new THREE.Mesh(\n\t\tnew THREE.SphereGeometry(90, 64, 64), \n\t\tnew THREE.MeshBasicMaterial({\n\t\tmap: new THREE.TextureLoader().load(texture), \n\t\t\tside: THREE.BackSide\n\t\t})\n\t);\n}","type":"blockquote","key":"bmpmn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Текстуры:","type":"unstyled","key":"bgb9a"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":5,"offset":0}],"inlineStyleRanges":[{"length":47,"offset":9,"style":"ITALIC"}],"text":"earth : ./scripts/solar_system/earth/images/earth/4k.jpg","type":"unordered-list-item","key":"1dfq6"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":4,"offset":0}],"inlineStyleRanges":[{"length":46,"offset":8,"style":"ITALIC"}],"text":"bump : ./scripts/solar_system/earth/images/bump/4k.jpg","type":"unordered-list-item","key":"1ieib"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":5,"offset":0}],"inlineStyleRanges":[{"length":47,"offset":9,"style":"ITALIC"}],"text":"water : ./scripts/solar_system/earth/images/water/4k.png","type":"unordered-list-item","key":"ee8io"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":6,"offset":0}],"inlineStyleRanges":[{"length":48,"offset":10,"style":"ITALIC"}],"text":"clouds : ./scripts/solar_system/earth/images/clouds/4k.png","type":"unordered-list-item","key":"ane8j"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":5,"offset":0}],"inlineStyleRanges":[{"length":51,"offset":9,"style":"ITALIC"}],"text":"stars : ./scripts/solar_system/earth/images/galaxy/stars.png","type":"unordered-list-item","key":"4lkoh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"NEEYp4vzWLxPLRrSXNrt"}],"entityMap":{"0":{"data":{"url":"https://raw.githubusercontent.com/robotmarvinus/visual/master/javascript/three.js/scripts/solar_system/earth/images/earth/4k.jpg"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"url":"https://raw.githubusercontent.com/robotmarvinus/visual/master/javascript/three.js/scripts/solar_system/earth/images/bump/4k.jpg"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"url":"https://raw.githubusercontent.com/robotmarvinus/visual/master/javascript/three.js/scripts/solar_system/earth/images/water/4k.png"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"url":"https://raw.githubusercontent.com/robotmarvinus/visual/master/javascript/three.js/scripts/solar_system/earth/images/clouds/4k.png"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"url":"https://raw.githubusercontent.com/robotmarvinus/visual/master/javascript/three.js/scripts/solar_system/earth/images/galaxy/stars.png"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}