Ответы пользователя по тегу Canvas
  • Как в Three.js отрисовать изображение по верх всего?

    sozercanie_kosmosa
    @sozercanie_kosmosa
    Для этого нужно создать еще одну камеру которую мы не будем двигать:
    otherCamera = new THREE.PerspectiveCamera( fov, width / height, near, far );
    её необходимо направить прямо на объект.
    Создаем еще одну сцену:
    var otherScene = new THREE.Scene();
    добавить на эту сцену объект, который должен быть всегда сверху:
    otherScene.add(objAlwaysOnTop);
    на объект можно натянуть текстуру с картинкой.
    Далее необходимо вставить в место, где происходит рендеринг это:
    enderer.clear();  // отчищаем все буферы
    renderer.render(mainScene, camera); // рендерим главную сцену
    renderer.clear(false, true, false); // отчищаем только буфер глубины
    renderer.render(otherScene, otherCamera);// рендерим статичную сцену
    Все!

    Есть еще способ который гораздо проще:
    var texture = new THREE.ImageUtils.loadTexture( 'images/pic.jpg' );
    	texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
    	texture.repeat.set( 0.5, 0.5 );
    	var spriteMaterial = new THREE.SpriteMaterial( {map: texture, useScreenCoordinates: true, alignment: THREE.SpriteAlignment.topLeft } );
    	sprite = new THREE.Sprite( spriteMaterial );
    	sprite.scale.set(100,100,1.0);
    	sprite.position.set( 0, 0, -1 );
    	mainScene.add( sprite );


    от 30.08.2014 последний способ для последних версий Three.js к сожалению уже не актуален.
    Ответ написан
    Комментировать
  • Работа с изображением за канвасом при помощи WebGL

    sozercanie_kosmosa
    @sozercanie_kosmosa
    Если я не ошибаюсь, то это позволяет сделать скрин окна браузера.
    Ответ написан
    Комментировать