Three.js 是一款運(yùn)行在瀏覽器中的3D引擎, 處理三維效果。在一些相機(jī)的官網(wǎng)首頁中,經(jīng)常有一張圖在旋轉(zhuǎn),圖上面懸浮著文字。這種效果是如何做出來的呢?先看效果,再講解。
1).建立一個(gè)java web 工程(或者其他工程), 因?yàn)閠hree.js 的全景圖要通過服務(wù)端瀏覽(安全的考慮)
2).在上面的結(jié)構(gòu)中,只有css中的index.css是自定義的,其余css和js都屬于three.js自帶的工具文件。包含圖片在內(nèi),已經(jīng)上傳資源了,點(diǎn)擊此處下載。
3).index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>基于Three.js的360度全景圖片 苑中遇雪
紫禁仙輿詰旦來,青旂遙倚望春臺(tái)。
不知庭霰今朝落,疑是林花昨夜開。