整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          14個HTML5實現的效果合集

          TML5可不是什么虛幻的概念,與其高談闊論的討論HTML5未來的趨勢和價值,不如一起研究一下現在的HTML5可以做出哪些成果,可以讓我們做出出色的產品。

          Form Follows Function就是一個展示HTML5實現的網站,目前網站展示了14個作品,其中包括了交互操作以及視覺效果。這些效果本身并不是一個完整的產品,但是加入到產品中就能讓產品生色不少。

          1、散景(Bokeh)

          一種圖像的焦外效果,通過HTML5實現的這種效果可以加載在背景、字體浮現。

          2、3D效果

          3D西紅柿罐頭湯,可通過鼠標進行旋轉操作,同時底部有一個倒影效果,一個很優秀的交互效果示范。

          3、宇宙全景圖

          設定整個宇宙的場景,可以用360度觀察整個宇宙星云,這種實現方式呈現出的效果更接近Google的街景地圖。

          4、像素化效果

          這種效果用于圖片很有趣,而實際可利用到的領域,還有待探索。

          5、螺旋效果

          字體的旋轉效果,簡單的近乎一張GIF圖片,不過通過對文章的替換,可以輕易的轉換成各種各樣的文案展示。

          6、結晶化濾鏡

          通過鼠標可選擇結晶化的范圍,用于網頁可對界面直接做出更多的交互視覺效果。

          7、色相混合

          隨著鼠標移動而改變各個位置的色相,一種很簡單就能匯聚用戶視線的交互效果,不過在簡單的背景才更能體現這種效果的價值。

          8、翻轉時鐘

          一種時鐘的展示效果,結構非常簡單,而看上去也很清晰明了,適合嵌入到很多不同的頁面中作為實時時間的展示。

          9、水紋倒影

          一種視覺效果,在這個Demo中可以調節倒影波動的速度。這種效果適合制作Logo以及主頁的展示。

          10、自由落體

          “下雨的人”展示了一種自由落體的效果,可以用鼠標條件調節飄落的角度,提供了一種帶有物理效果的交互操作。這種功能特別用于游戲。

          11、水面波紋

          同樣是一種物理效果,可通過鼠標刺激水面波紋,在網頁上就能輕松實現。

          12、樹的成長

          一種應激操作的交互方式,點擊一次長出一棵樹,可用于網頁展示的附加效果。這種效果在視覺上有多種用法,網頁、游戲都可以。

          13、字母雨刷

          在屏幕上掃除字母的雨刷效果,初次看見感覺像是網頁刷新的過度畫面。

          14、漸顯效果

          通過一些雜亂無章的線逐漸顯現出一幅畫,中間的顯現過程很適合作為網頁加載的等待界面。

          原文鏈接:http://www.gbtags.com/gb/share/2595.htm

          前,雖然VR開發的硬件發展已經適應了需求,但內容卻非常單薄。我們都知道一部VR電影或者一款游戲的成本非常之大。想要VR產品走向大眾市場,,居高不下的成文無疑是最大的阻力。以HTML5為代表的Web前端開發技術的發展,或將帶領VR走出這樣的困境,讓VR更好的走向普通消費人群。目前,最新的Google Chrome和Mozilla Firefox瀏覽器已經加入面向HTML5技術的WebVR功能支持,同時各方也正在起草并充實業界最新的WebVR API標準。

          Web可降低VR體驗門檻

          Web技術不僅使創作VR的成本更加低廉,而且大大降低技術門檻。開發從業者不必完全從零開始學習VR,只需要將web開發的方向轉向VR,同時Web VR還可以更好地結合云計算技術,補足VR終端的計算能力,加強交互體驗。

          可以肯定的是,Web擴展了VR的使用范圍,很多生活化的內容也納入了VR的創作之中,如實景旅游、街景地圖、虛擬購物等,其內容展示、交互都可以由HTML5引擎輕松創建出來。這無疑給其未來發展帶來更多想象空間。

          Web開發者基數龐大

          除了技術上的實現優勢,Web還能給VR帶來一股巨大的創新動力,因為它擁有著廣泛的應用范圍與龐大的開發者基數,讓VR不再只是產業大亨們的資本游戲,而是以平民化的姿態,進入廣大用戶日常生活的方方面面。 這就好比在智能手機剛剛面世的時候,手機應用完全沒有想現在這樣琳瑯滿目的應用,而web開發無論是前端還是后端,都有著大批的開發者,并且web技術自身的成熟與穩定,也更加注定了web開發者的VR使命。

          WebVR 開發的方式

          在Web上開發VR應用,有下面三種方式:

          第一種HTML5+ Java Scnipt + WebGL + WebVR API

          第二種傳統引擎 + Emscripten

          第三種第三方工具,如A-Frame

          面對VR的發展趨勢,或許在不久的將來web開發者便多了一個職業方向了吧,還是一款明星產品。

          即Panorama,是一種新興的富媒體技術,它與傳統的音視頻、圖片文字等媒體的最大區別在于“可操作”和“可交互”性。

          全景可以分為虛擬全景和實景全景,虛擬實景通常是利用maya等軟件制作的模擬現實的場景,例如某個建筑物通過3D建模制作的虛擬實景;實景全景則是利用全景相機、單反或者街景車拍攝并經過特殊拼切處理的實景照片。

          注:本篇文章整理的知識點為實景全景圖。

          全景圖

          全景圖可以主要分為:球形全景圖、柱形全景圖和立方體全景圖。

          1. 球形全景圖(Sphere)

          球形全景圖是最常見的一類全景圖,標準的全景圖包含了360°x180°的范圍,它包含了天和地以及鏡頭水平轉一圈所看到場景,也就是水平360°、垂直180°。球形全景圖的長寬比應為2:1,下圖為一張球形全景圖素材。

          2. 柱形全景圖

          柱形全景圖通常是指沒有拍天和地,或者沒拍夠360°x180°的全景圖,例如我們平時用手機相機拍攝的全景就是柱形全景圖,在拍攝中僅是讓鏡頭水平移動。

          3. 立方體全景圖(Cube)

          立方體全景圖就是代表了“前后上下左右”六個面的六張立方體切片圖,利用這樣的六張圖片通過全景拼接軟件可以拼成球形全景圖。當然,你也可以將球形全景圖切割成六張立方體全景圖,兩者相互之間是可以進行轉換的。

          全景漫游/全景虛擬現實

          是指基于全景圖的真實場景虛擬現實技術,觀看者可以通過使用鼠標拖動、陀螺儀、重力感應以及VR頭顯設備進行全方位互動式的場景觀看,達到身臨其境的效果。這是一種比較初級的虛擬現實技術,由于其開發成本低廉而深受關注,應用領域覆蓋了旅游景點、酒店賓館、室內裝修設計展示、建筑房地產等。

          拍攝硬件

          全景拍攝硬件主要有:全景相機、單反相機、魚眼鏡頭、全景云臺、三腳架或者手機等,例如使用GoPro相機拍攝全景,航拍的話還可以使用無人機掛載拍攝設備進行空中拍攝。

          全景制作

          全景制作通常可以分為以下幾步:

          1. 利用全景相機、單反等專業的設備拍攝全景圖素材,并導出。

          2. 利用krpano、pano2vr、PTGui等軟件處理或生成全景圖。

          3. 利用Web技術制作可操作可交互的全景圖。

          下面將整理幾個全景圖的處理制作方法

          一、CSS 3D Panorama(全景)

          這種方式其實是利用了CSS3 Transform,是CSS3 3D的一種應用場景,之前火爆朋友圈的淘寶造物節就是這樣的一個使用案例。詳細的技術分析大家可以查看凹凸實驗室的這篇文章:CSS 3D Panorama - 淘寶造物節技術剖析 https://aotu.io/notes/2016/08/24/2016-8-24-css-3d-panorama/

          二、使用Three.js

          Three.js是用JavaScript編寫的WebGL第三方庫,提供了豐富的3D顯示功能。這里主要給大家推薦一款基于Three.js的360°x180°全景圖預覽js插件:Photo Sphere Viewer,詳細的使用方法可以查看這篇文章:基于Three.js的360X180度全景圖預覽插件 http://www.html5cn.org/article-8621-1.html?utm_source=tuicool&utm_medium=referral

          三、使用Pano2VR

          Pano2VR是一款全景制作工具,可以將全景圖像轉換成HTML5、Flash和QuickTime VR等格式,界面操作與許多應用軟件相似。該軟件的基本操作方法大家可以查看下我的《Pano2VR學習筆記》文集 http://www.jianshu.com/notebooks/6503326/latest

          四、使用krpano

          krpano是一款專業的全景制作軟件,可以說是為全景而生的。用戶在使用時只需要將全景圖用鼠標拖動到一個批處理(droplet)文件的圖標上,幾十秒之后即可生成全景漫游文件,默認文件夾命名為vtour,效果如下所示:

          默認生成的全景圖包含了基本的全屏、放縮、左右移動以及VR模式等功能,krpano本身是viewer(瀏覽器)+tools(工具),并且它是沒有GUI(圖形用戶界面)的,而國內像720云、得圖云、airpano等帶有操作界面的全景平臺都是利用了krpano的技術。學習如何使用krpano制作全景大家可以瀏覽:krpano中文網 http://www.krpano360.com/,上面的教程比較全面,非常適合初學者入門。默認生成的全景圖只有基本的功能,如果要利用krpano做定制、個性化的全景則你還需要學習一下krpano xml這門語言。

          五、使用Kolor Panotour Pro

          由于krpano沒有可視化的操作界面,Kolor Panotour Pro則是使用了krpano內核的可視化全景漫游制作軟件,它使用了krpano的viewer。使用時基本上不需要有編程基礎,而且提供了豐富的模塊和功能,這對于沒有編程基礎又想使用krpano技術的用戶是一個不錯的選擇。

          總結

          本篇文章僅對全景的基本概念、拍攝以及制作處理方式等內容做了歸納整理,許多資料網上都可以找到,不作任何商業用途與廣告推廣~

          本人最近也一直在研究全景制作,目前用的是krpano,感興趣的朋友可以給我留言一起交流學習一下。

          完。


          主站蜘蛛池模板: 国精产品一区二区三区糖心| 无码精品人妻一区二区三区免费看| 亚洲av无码一区二区三区天堂| 日本在线视频一区二区| 亚洲高清日韩精品第一区| 一区二区亚洲精品精华液| 久久久久人妻精品一区三寸| 国产成人免费一区二区三区| 国产91精品一区二区麻豆亚洲| 性无码一区二区三区在线观看| 亚洲福利一区二区三区| 国产精品熟女视频一区二区| 中文字幕一区二区人妻性色| 国产精品综合AV一区二区国产馆| 国产一区二区精品在线观看| 国产亚洲日韩一区二区三区| 亚洲中文字幕一区精品自拍 | 精品国产香蕉伊思人在线在线亚洲一区二区| 日韩动漫av在线播放一区| 性无码免费一区二区三区在线 | 又紧又大又爽精品一区二区| 中文字幕精品无码一区二区三区 | 国产精品亚洲一区二区三区在线观看 | 久久精品一区二区三区中文字幕| 无码精品视频一区二区三区| 国产丝袜一区二区三区在线观看 | 国产在线精品一区二区三区直播 | 色婷婷AV一区二区三区浪潮| 国产日韩一区二区三区在线播放| www亚洲精品少妇裸乳一区二区| 久久精品亚洲一区二区三区浴池| 国产一区二区三区亚洲综合| 3d动漫精品啪啪一区二区中| 亚洲国产成人久久综合一区77| 午夜性色一区二区三区免费不卡视频| 国产高清在线精品一区小说 | 91国在线啪精品一区| 午夜视频一区二区| 亚洲综合一区二区| 国产AV午夜精品一区二区三| 精品一区二区高清在线观看|