Спонсор: Microsoft
Опубликован: 29.08.2012 | Доступ: свободный | Студентов: 2137 / 193 | Длительность: 08:05:00
Практическая работа 11:

Знакомство с технологией WebGL

< Практическая работа 10 || Практическая работа 11: 123 || Лекция 7 >

Пример 5 (sample_5)Визуализация Земли

Нам также понадобятся библиотеки Three.js и Detector.js. Найдите какую-нибудь старинную карту и назовите файл map.jpg.

Откройте блокнот и наберите следующий код:

<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
    <style>
      body {
        font-family: Monospace;
        background-color: #000;
        margin: 0px;
        overflow: hidden;
      }
    </style>
  </head>
  <body>

    <scriptsrc="Three.js"></script>
    <scriptsrc="Detector.js"></script>


    <script>
    if (!Detector.webgl) Detector.addGetWebGLMessage();
    var container, stats;
    var camera, scene, renderer;

    init();
        animate();

    functioninit() {

            container = document.createElement('div');
    document.body.appendChild(container);

            scene = newTHREE.Scene();

            camera = newTHREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
    camera.position.y = 400;
    scene.add(camera);

    var light, object, materials;

    scene.add(newTHREE.AmbientLight(0x404040));

            light = newTHREE.DirectionalLight(0xffffff);
    light.position.set(0, 1, 0);
    scene.add(light);

            materials = [
          newTHREE.MeshLambertMaterial({ ambient: 0xbbbbbb, map: THREE.ImageUtils.loadTexture('map.jpg') }),
          newTHREE.MeshBasicMaterial({ color: 0xffffff, wireframe: true, transparent: true, opacity: 0.1 })
            ];

            object = THREE.SceneUtils.createMultiMaterialObject(newTHREE.SphereGeometry(200, 100, 100), materials);
    object.position.set(0, 0, 0);
    scene.add(object);

    var points = [];

    for (vari = 0; i< 50; i++) {
    points.push(new THREE.Vector3(Math.sin(i * 0.2) * 15 + 50, 0, (i - 5) * 2));
            }

            renderer = newTHREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);

    container.appendChild(renderer.domElement);
        }

    function animate() {
    requestAnimationFrame(animate);
            render();
        }

    function render() {
    var timer = Date.now() * 0.0001;
    camera.position.x = Math.cos(timer) * 800;
    camera.position.z = Math.sin(timer) * 800;
    camera.position.y = Math.sin(timer) * 800;
    camera.lookAt(scene.position);
    for (vari = 0, l = scene.children.length; i< l; i++) {
    var object = scene.children[i];
    object.rotation.x += 0.005;
    object.rotation.y += 0.005;
    object.rotation.z += 0.005;
            }
    renderer.render(scene, camera);
        }
    </script>
  </body>
</html>
    

< Практическая работа 10 || Практическая работа 11: 123 || Лекция 7 >
Александр Лобанов
Александр Лобанов

Даю задания для студентов. Они хотят повторно пройти курс. Как отписаться от выполненного курса, что бы пройти его заново?

Наталья Алмаева
Наталья Алмаева
Россия
Вадим Барков
Вадим Барков
Украина, Киев