Maison développement back-end tutoriel php 在网页上制作360度全景图_PHP

在网页上制作360度全景图_PHP

Jun 01, 2016 pm 12:32 PM
制作 图片 场景 网页

轻松制作360度全景网页图片
——使用PixMaker软件制作网页上的360度旋转全景图
一、 软件简介
PixMaker是一个简单方便的360度全景图片制作软件它可以将描写一个环型场景的多个连续图片无缝地接合在一起形成一个360度“场景”图片。可以在网页上播放使你的页面更加生动活泼。PixMaker软件在网页上显示全景图片是靠程序本身提供的一个“Java applet”小程序组件只要网页编辑者将这个组件放到与全景图页面相同的目录下就可以用常用的浏览器在网页上播放全景图片。这与目前流行的“Ulead Cool 360全景制作软件”不同“Ulead Cool 360”制作的网页全景图片需要浏览者首先下载一个“全景图观察器”插件到的浏览器上才可以播放全景图片相比之下PixMaker使用起来感觉更方便自然。PixMaker可以很好地自动处理图片边界的连接看不出任何接缝的痕迹。在你准备好一组连续场景图片的前题下PixMaker只需几个简单的操作步骤就可自动完成全景图片从制作到发行的全过程。如果读者想先看看全景网页的效果请访问这个演示页面http://rubber-ts.51.net/pm360/test.html 。下面我们简单介绍它的使用方法。
二、 软件的使用
制作一组全景图片的步骤和注意的问题。
使照像机平行于地面并最好固定在三角架上。
拍摄每一幅照片时要保持照像机在同一个高度。
以一个固定点为圆心顺时针方向旋转拍摄每一幅照片。
每一幅照片的边界要有30左右的重叠区域。
要注意将移动的物体拍摄在照片的中间不要让移动物体出现的照片相交错的边界上以免对以后照片的边界处理带来不便。
根据你使用的照像设备的不同使用扫描仪等设备将照片处理成JPG格式的图片文件图片的尺寸可根据你自己的需要决定文件名最好按字母顺序排列。

将多张连续的场景图片输入到PXIMAKER处理窗口。
启动PixMaker程序可以看到程序窗口上方有三个大图标分别标记有“1—Snap”抓取图片、“2Stitch”缝合图片、“3Publish”发行一个“场景”下面是“Stitch”缝合图片标签板窗口。见图1
用鼠标点击“1—Snap”(抓取图片)图标在出现的一个指定图片获取位置的对话框中选择“My computer”并按“OK”按钮在打开的文件输入对话框中找到保存文件的目录。本文为方便起见就以PIXMAKER程序的SAMPLE目录下自带的图片文件为例它是一组展览大厅的场景图片文件名为“Sample01—Sample12”。按下“SHIFT”键不放用鼠标选择这一组文件或按下ALT键不放用鼠标选择所需的图片文件然后按“OPEN”打开按钮所选择的图片文件就排列在“Stitch”标签板上方的窗口内见图1上面的窗口并出现一个工具条上边有插入、删除、移动图片、图片类型(Type)、镜头选择(Lens)等操作命令图标在此就不多加叙述了读者可自行熟悉使用。其中图片类型选360度镜头选Auto即可这也是软件启动时给出的默认值。

缝合图片
这一步骤是将前面所抓取的多幅图片无缝地连接在一起形成一个360度全景的“场景”图。操作非常简单只需你点击第二个“Stitch”大图标PixMaker程序会自动地处理图片的边界对齐和连接在一个弹出的处理窗口中可以动态地看到自动处理图片的全过程。完成后的场景图片会显示在下面的窗口内见图1下面窗口。此时你就可以用鼠标指针操纵图片欣赏刚刚生成的360度旋转的全景影像了。横向拖动鼠标可以左右移动图片按住“Shift”键并上下移多鼠标指针可以放大和缩小“场景”的影像。使用场景窗口左下方的工具条也可以操纵场景图片的放大、缩小和使场景自动旋转用鼠标指针点击场景图片内任一位置可停止场景的移动操作方式非常灵活方便。如果你对自动生成场景图片的边界连接效果不满意也可以选择手动方式人为调整图片的边界连接。
在场景内增加热点链接
在场景图片制作完成后点击“HotSpot”标签这时会出现一个提示对话框要求你首先要保存所生成的场景图片对话框内要求你选择图像的质量和图片的尺寸我们在这里选择图像质量为“good”较好一项图片尺寸选择“Optimize for web”按网页使用优化一项按“NEXT”按钮在出现的文件保存对话框中将场景图片保存到指定目录下。接着出现的提示框要求你将目前编辑的工程文件保存到指定的目录下以方便你以后的修改和编辑。完成以上的操作后就出现了热点编辑窗口和一个工具条我们点击第二个命令图标它是在场景图片上增加一个指向网页的链接在出现的对话框内填入链接的页面地址和热点提示的内容按“OK”按钮完成一个热点链接可以在场景上增加多个链接热点每一个热点在场景上显示为一个小图框以提示你点击的位置。
将场景发行到网页上
我们这里讨论的最终目的就是将360度的场景图片显示在网页上。首先点击窗口上方的“Publish”发行大图标在对话框中选择“web page (.html)”一项按“NEXT”按钮任选一种网页模板按“NEXT”按钮在对话框中填入标题和有关的说明文字并在对话框的下面选择网页上显示场景图片的长、宽尺寸按“NEXT”按钮并给文件取名为mypage.html保存生成的网页文件到指定的目录下接着又出现一个对话框它提示你在保存页面文件的目录下程序同时将一些必需的文件也拷贝到此目录因为PixMaker程序在网页上显示图片是靠“Java applet”小程序支持的注意你要认真地记下这些文件名并在以后将页面上传到你的服务器上时一同将这些文件上传到与包含全景图片页面相同的目录下这样才能正常播放“场景”图片。如果你想将“场景”图片插入到你现有的网页中去用一个文本文件编辑工具打开由程序生成的页面文件直接将“applet >……./applet>”标记内所包含的内容粘贴到你自己的页面内适当位置就可以正常使用了。而且这部分语句中有关“applet”小程序的参数如显示宽度width、显示高度height、自动滚动速度autoPanSpeed 等对应的数值都可以直接手工修改。

到此为止我们就完成了在网页上制作一幅全景图片的全过程其中大部分操作都是由“PixMaker”程序自动完成的是不是很简单
它还可以将全景图片生成到一个可执行的“EXE”文件中可单独地播放全景图像将它用E-MAIL发送给你的朋友使他们可以在远方欣赏到你制作的全景图像很酷吧
有关的程序使用的其它细节手工编辑图片的边界连接多种热点链接形式的设置多种镜头焦距的选择等操作本文就不再赘述了。读者可自行熟悉掌握操作方法。

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment envoyer des pages Web sur le bureau comme raccourci dans le navigateur Edge ? Comment envoyer des pages Web sur le bureau comme raccourci dans le navigateur Edge ? Mar 14, 2024 pm 05:22 PM

Comment envoyer des pages Web sur le bureau sous forme de raccourci dans le navigateur Edge ? Beaucoup de nos utilisateurs souhaitent afficher les pages Web fréquemment utilisées sur le bureau sous forme de raccourcis pour faciliter l'ouverture directe des pages d'accès, mais ils ne savent pas comment procéder. En réponse à ce problème, l'éditeur de ce numéro partagera le. solution avec la majorité des utilisateurs, jetons un coup d’œil au contenu partagé dans le didacticiel du logiciel d’aujourd’hui. La méthode de raccourci pour envoyer des pages Web au bureau dans le navigateur Edge : 1. Ouvrez le logiciel et cliquez sur le bouton "..." sur la page. 2. Sélectionnez « Installer ce site en tant qu'application » dans « Application » dans l'option du menu déroulant. 3. Enfin, cliquez dessus dans la fenêtre pop-up

Comment résoudre le problème de l'enregistrement automatique des images lors de la publication sur Xiaohongshu ? Où est l'image enregistrée automatiquement lors de la publication ? Comment résoudre le problème de l'enregistrement automatique des images lors de la publication sur Xiaohongshu ? Où est l'image enregistrée automatiquement lors de la publication ? Mar 22, 2024 am 08:06 AM

Avec le développement continu des médias sociaux, Xiaohongshu est devenue une plateforme permettant à de plus en plus de jeunes de partager leur vie et de découvrir de belles choses. De nombreux utilisateurs sont gênés par des problèmes de sauvegarde automatique lors de la publication d’images. Alors, comment résoudre ce problème ? 1. Comment résoudre le problème de l'enregistrement automatique des images lors de la publication sur Xiaohongshu ? 1. Vider le cache Tout d'abord, nous pouvons essayer de vider les données du cache de Xiaohongshu. Les étapes sont les suivantes : (1) Ouvrez Xiaohongshu et cliquez sur le bouton « Mon » dans le coin inférieur droit (2) Sur la page du centre personnel, recherchez « Paramètres » et cliquez dessus (3) Faites défiler vers le bas et recherchez « ; "Vider le cache". Cliquez sur OK. Après avoir vidé le cache, entrez à nouveau dans Xiaohongshu et essayez de publier des photos pour voir si le problème de sauvegarde automatique est résolu. 2. Mettez à jour la version Xiaohongshu pour vous assurer que votre Xiaohongshu

Comment publier des photos dans les commentaires TikTok ? Où se trouve l'entrée des photos dans la zone commentaire ? Comment publier des photos dans les commentaires TikTok ? Où se trouve l'entrée des photos dans la zone commentaire ? Mar 21, 2024 pm 09:12 PM

Avec la popularité des courtes vidéos Douyin, les interactions des utilisateurs dans la zone de commentaires sont devenues plus colorées. Certains utilisateurs souhaitent partager des images en commentaires pour mieux exprimer leurs opinions ou émotions. Alors, comment publier des photos dans les commentaires TikTok ? Cet article répondra à cette question en détail et vous fournira quelques conseils et précautions connexes. 1. Comment publier des photos dans les commentaires Douyin ? 1. Ouvrez Douyin : Tout d'abord, vous devez ouvrir l'application Douyin et vous connecter à votre compte. 2. Recherchez la zone de commentaire : lorsque vous parcourez ou publiez une courte vidéo, recherchez l'endroit où vous souhaitez commenter et cliquez sur le bouton "Commentaire". 3. Saisissez le contenu de votre commentaire : saisissez le contenu de votre commentaire dans la zone de commentaire. 4. Choisissez d'envoyer une photo : Dans l'interface de saisie du contenu des commentaires, vous verrez un bouton « image » ou un bouton « + », cliquez sur

6 façons de rendre les images plus nettes sur iPhone 6 façons de rendre les images plus nettes sur iPhone Mar 04, 2024 pm 06:25 PM

Les iPhones récents d'Apple capturent des souvenirs avec des détails, une saturation et une luminosité nets. Mais parfois, vous pouvez rencontrer des problèmes qui peuvent rendre l’image moins claire. Bien que la mise au point automatique sur les appareils photo iPhone ait parcouru un long chemin, vous permettant de prendre des photos rapidement, l'appareil photo peut se concentrer par erreur sur le mauvais sujet dans certaines situations, rendant la photo floue dans les zones indésirables. Si vos photos sur votre iPhone semblent floues ou manquent globalement de netteté, l’article suivant devrait vous aider à les rendre plus nettes. Comment rendre les images plus claires sur iPhone [6 méthodes] Vous pouvez essayer d'utiliser l'application Photos native pour nettoyer vos photos. Si vous souhaitez plus de fonctionnalités et d'options

Comment résoudre le problème de la longue traîne dans les scénarios de conduite autonome ? Comment résoudre le problème de la longue traîne dans les scénarios de conduite autonome ? Jun 02, 2024 pm 02:44 PM

Hier, lors de l'entretien, on m'a demandé si j'avais posé des questions à longue traîne, j'ai donc pensé faire un bref résumé. Le problème à longue traîne de la conduite autonome fait référence aux cas extrêmes dans les véhicules autonomes, c'est-à-dire à des scénarios possibles avec une faible probabilité d'occurrence. Le problème perçu de la longue traîne est l’une des principales raisons limitant actuellement le domaine de conception opérationnelle des véhicules autonomes intelligents à véhicule unique. L'architecture sous-jacente et la plupart des problèmes techniques de la conduite autonome ont été résolus, et les 5 % restants des problèmes à longue traîne sont progressivement devenus la clé pour restreindre le développement de la conduite autonome. Ces problèmes incluent une variété de scénarios fragmentés, de situations extrêmes et de comportements humains imprévisibles. La « longue traîne » des scénarios limites dans la conduite autonome fait référence aux cas limites dans les véhicules autonomes (VA). Les cas limites sont des scénarios possibles avec une faible probabilité d'occurrence. ces événements rares

Comment faire sortir les images ppt une par une Comment faire sortir les images ppt une par une Mar 25, 2024 pm 04:00 PM

Dans PowerPoint, il est courant d'afficher les images une par une, ce qui peut être réalisé en définissant des effets d'animation. Ce guide détaille les étapes de mise en œuvre de cette technique, y compris la configuration de base, l'insertion d'images, l'ajout d'une animation et l'ajustement de l'ordre et du timing de l'animation. De plus, des paramètres et ajustements avancés sont fournis, tels que l'utilisation de déclencheurs, l'ajustement de la vitesse et de l'ordre de l'animation et la prévisualisation des effets d'animation. En suivant ces étapes et conseils, les utilisateurs peuvent facilement configurer les images pour qu'elles apparaissent les unes après les autres dans PowerPoint, améliorant ainsi l'impact visuel de la présentation et attirant l'attention du public.

Comment convertir des documents PDF en images jpg avec Foxit PDF Reader - Comment convertir des documents PDF en images jpg avec Foxit PDF Reader Comment convertir des documents PDF en images jpg avec Foxit PDF Reader - Comment convertir des documents PDF en images jpg avec Foxit PDF Reader Mar 04, 2024 pm 05:49 PM

Utilisez-vous également le logiciel Foxit PDF Reader ? Alors, savez-vous comment Foxit PDF Reader convertit les documents PDF en images jpg ? L'article suivant vous explique comment Foxit PDF Reader convertit les documents PDF en images jpg ? images jpg, venez jeter un oeil ci-dessous. Démarrez d'abord Foxit PDF Reader, puis recherchez « Fonctionnalités » dans la barre d'outils supérieure, puis sélectionnez la fonction « PDF vers autres ». Ensuite, ouvrez une page Web intitulée « Foxit PDF Online Conversion ». Cliquez sur le bouton « Connexion » en haut à droite de la page pour vous connecter, puis activez la fonction « PDF to Image ». Cliquez ensuite sur le bouton de téléchargement et ajoutez le fichier pdf que vous souhaitez convertir en image. Après l'avoir ajouté, cliquez sur "Démarrer la conversion".

Comment disposer deux images côte à côte dans un document wps Comment disposer deux images côte à côte dans un document wps Mar 20, 2024 pm 04:00 PM

Lors de l'utilisation du logiciel bureautique WPS, nous avons constaté que non seulement un formulaire est utilisé, mais que des tableaux et des images peuvent être ajoutés au texte, des images peuvent également être ajoutées au tableau, etc. Ceux-ci sont tous utilisés ensemble pour créer le contenu de l'ensemble du document. paraître plus riche, si vous devez insérer deux images dans le document et qu’elles doivent être disposées côte à côte. Notre prochain cours résoudra ce problème : comment placer deux images côte à côte dans un document wps. 1. Tout d'abord, vous devez ouvrir le logiciel WPS et trouver l'image que vous souhaitez ajuster. Faites un clic gauche sur l'image et une barre de menu apparaîtra, sélectionnez "Mise en page". 2. Sélectionnez « Emballage serré » dans l'habillage du texte. 3. Une fois que toutes les images dont vous avez besoin ont été confirmées comme étant définies sur « Habillage de texte serré », vous pouvez faire glisser les images vers la position appropriée et cliquer sur la première image.

See all articles