Опубликован: 29.08.2012 | Уровень: специалист | Доступ: платный
Практическая работа 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 >
Александр Лобанов
Александр Лобанов

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

Nat Ves
Nat Ves
Израиль
Татьяна Орлова
Татьяна Орлова
Россия, Воронежская область