2. 程式人生 > >04 使用three.js開發全景漫遊 全景圖切換的實現

04 使用three.js開發全景漫遊 全景圖切換的實現

阿新 • • 發佈：2019-01-20
var renderer; function initRender() { renderer = new THREE.WebGLRenderer({antialias: true}); //renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0)); //設定背景顏色 renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); } var
camera; function initCamera() { camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000); camera.target = new THREE.Vector3( 0, 100, 0 ); } var scene; function initScene() { scene = new THREE.Scene(); } var light; function
initLight() { } var mesh,loader=new THREE.TextureLoader(); function initModel() { //軸輔助 （每一個軸的長度） var helper = new THREE.AxesHelper(500); scene.add(helper); //宣告一個球體 var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 ); // 反轉X軸上的幾何圖形，使所有的麵點向內。
geometry.scale( - 1, 1, 1 ); //宣告球體紋理 var material = new THREE.MeshBasicMaterial( { map: loader.load( 'pano.jpg' ) //載入一整張紋理圖片 } ); mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); console.log(scene); } //初始化效能外掛 var stats; function initStats() { stats = new Stats(); document.body.appendChild(stats.dom); } //使用者互動外掛 滑鼠左鍵按住旋轉，右鍵按住平移，滾輪縮放 var controls; function initControls() { controls = new THREE.OrbitControls(camera, renderer.domElement); // 如果使用animate方法時，將此函式刪除 //controls.addEventListener( 'change', render ); // 使動畫迴圈使用時阻尼或自轉 意思是否有慣性 controls.enableDamping = true; //動態阻尼係數 就是滑鼠拖拽旋轉靈敏度 //controls.dampingFactor = 0.25; //是否可以縮放 controls.enableZoom = true; //是否自動旋轉 controls.autoRotate = false; //設定相機距離原點的最遠距離 controls.minDistance = 20; //設定相機距離原點的最遠距離 controls.maxDistance = 10000; //是否開啟右鍵拖拽 controls.enablePan = true; } //生成gui設定配置項 var gui; function initGui() { //宣告一個儲存需求修改的相關資料的物件 gui = { }; var datGui = new dat.GUI(); //將設定屬性新增到gui當中，gui.add(物件，屬性，最小值，最大值） } function render() { renderer.render(scene, camera); } //視窗變動觸發的函式 function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); render(); renderer.setSize(window.innerWidth, window.innerHeight); } function animate() { //更新控制器 controls.update(); render(); //更新效能外掛 stats.update(); requestAnimationFrame(animate); } function draw() { initRender(); initScene(); initCamera(); initLight(); initModel(); initControls(); initStats(); initGui(); animate(); window.onresize = onWindowResize; } var index = 0; setInterval(function () { var material = mesh.material; index++; if(index >= 4) index = 1; material.map = loader.load( "00"+index+".jpg" ); material.map.needsUpdate = true; },8000);

相關推薦

04 使用three.js開發全景漫遊 全景圖切換的實現

var renderer; function initRender() { renderer = new THREE.WebGLRenderer({antialias: true}); //renderer.setClearColor(new THREE.C

基於Three.js的360度全景--photo-sphere-viewer--簡介

啟用 定義 adding mat toolbar actions evo copy 一個 這個是基於three.js的全景插件 photo-sphere-viewer.js ———————————————————————————————————————— 1、能添加熱點

《Three js開發指南》 PDF

開發指南 rod tro href htm js開發 喜歡 學習交流 指南 電子版僅供預覽及學習交流使用，下載後請24小時內刪除，支持正版，喜歡的請購買正版書籍：《Three js開發指南》 pdf下載地址：鏈接: https://pan.baidu.com/s/1uyX2

70 - three.js 筆記 - 使用環境貼圖 建立虛假的反光效果

計算環境反光會非常耗費CPU，而且通常會使用光線追蹤演算法，在three.js中通過環境貼圖envMap來偽裝反光，並且可以將環境貼圖用到指定的物件上。 1、示例 示例 http://ithanmang.com/threeJs/home/201809/20180905/07-env

69 - three.js 筆記 - 使用光照貼圖 lightMap 建立假陰影

Material的lightMap屬性，是光照貼圖，使用光照貼圖可以模擬出真實的陰影效果，但是陰影的位置不能隨著隨著物體的移動而移動。 1、示例 示例 http://ithanmang.com/threeJs/home/201809/20180905/06-lightMap-tex

73 - three.js 筆記 - 設定折射貼圖比率 refractionRatio 加環境貼圖實現反射效果

通過給物體設定環境貼圖envMap可以實現虛假的反射效果，通過設定CubeCamera可以實現動態的反光，設定材質的refractionRatio 屬性可以實現透明反射的效果。 1、示例 示例 http://ithanmang.com/threeJs/home/201809/201

three.js開發我的世界minecraft(一)地形的生成

我的世界minecraft地形生成 官網提供了一個minecraft案例：examples/webgl_geometry_minecraft.html 生成的效果，中間是一個直徑10的小球，我作為參考用的，這裡面的立方體在three.js中的單位是100。 案例中的地形生成，主

使用three.js開發3d地圖初探

height 偏移量 圖標 positions ict 拍攝 獲取 失真 情況 three是圖形引擎，而web二維三維地圖都是基於圖形引擎的，所以拿three來開發需求簡單的三維地圖應用是沒什麽問題的。 1.坐標轉換 實際地理坐標為經度、緯度、高度，而three

WebGL之Three.js開發第一個場景（含原始碼）

在h5火熱的當下，各種絢麗的場景層出不窮。但是，我們是不是發現大部分或者說絕大部分的網站只是一個向用戶展示資訊的平臺。至於使用者與其進行的互動則僅限於下拉瀏覽，點選觸發，或者填寫一些表單資訊。 我一直在思考下一個web時代，並不敢斷言一定會是WebGL，但是在

Three.js開發指南（10）：載入和使用紋理

    將紋理應用到網格上10.1 在材質中使用紋理       紋理有幾種不同的用法，可以用它們來定義網格的顏色，也可以用它們來定義高光、凹凸和反光。但我們首先要看的是最基礎的方法，用紋理為網格上的每個畫素指定顏色。       載入紋理並應用到網格：紋理最基礎的用法是在材

Three.js 開發基礎知識

Three.js是一個用來簡化WebGL開發的JavaScript庫，比如繪製一個三維立方體，使用WebGL需要100多行，那Three.js只要10幾行就能夠完成。本文通過建立一個立方體來簡單介紹Three.js的基礎知識。Three.js中的基本概念Three.js包含3

【H5 3D應用開發】 Three.js 播放json模型動畫並切換動畫（一）

1、匯入Js模型 var loader = new THREE.JSONLoader(true); //JSONLoader構造傳入true，即showStatus=ture（顯示載入進度）

Three.js開發指南（7）：粒子和粒子系統

使用粒子（particle）可以很容易地創建出很多細小的物體，可以用來模擬雨滴和雪花。7.1 理解粒子    建立粒子7.2 粒子、粒子系統和BasicParticleMaterial    除非使用CanvasRenderer類，否則你就需要用ParticleSystem類

《three.js開發指南》 筆記

3D物件基類THREE.Object3D。 第2章 使用構建Three.js場景的基礎     2.1建立場景 .add(obj:Object);              在場景中新增物件 .remove(obj:Object);    

VR開發 入門 使用Three.js 開發的WebVR demo

使用Three.js，並且參考網上開源的程式碼，終於實現了第一個VR程式。 線上演示： https://ritterliu.github.io/WebVR_Demo/ <!DOCTYPE html> <html> <head>

Three.js 開發機房（三）

之前三節都沒涉及到機房，只是一些零零散散的知識點，這一節我們就開始正式畫外牆。 首先我了明顯理解以下啥是牆？其實說白了就是一個長方體，長不確定，寬一般也就是40cm，高也就是兩米，這就是一個簡單的牆，當然很多牆上都有窗戶、門啥的，其實也就是在長方體的固定的位置掏個洞，然後放上我們需要方的東西，比如門，窗戶。

Three.js 開發機房（四）

這一節我們講講怎麼畫機櫃，其實機櫃如果作的複雜一點、逼真一點可以用3D建模工具，不過一般的專案中也不用做的那麼麻煩，那我們就可以將機櫃抽象以下，首先它是一塊具有長寬高的立方體鐵塊，然後我們從中間在掏掉一個小一號的立方體同時掏出出一個門的位置就好了，程式碼如下 initCabient() {

一個動態小導航欄(好看的，用C3)（不依賴js，點擊小圖切換大的背景圖）

width ima line auto fashion put spl body sha <!DOCTYPE HTML><htmllang="en-US"> <head> <meta charset="UTF-8

WEB前端開發：輪播圖的實現（H5+C3+JavaScript）(JQuery)

一、輪播圖的概念 輪播圖就是一種網站在介紹自己的主打產品或重要資訊的傳播方式。說的簡單點就是將承載著重要資訊的幾張圖片，在網頁的某一部位進行輪流的呈現，從而做到讓瀏覽者很快的瞭解到網站想要表達的主要資訊。例如：淘寶，京東，等大型的購物平臺。以及各種新聞網站的頭版頭條都是用這

three.js學習：點光源+動畫的實現

color 設置 cti 參數 場景 posit width ima bsp 與前幾個教程類似，場景和相機等設置就不再重復聲明了。這裏只列出新學的內容。 1、圓柱體（圓錐體）的初始化 function initObject() { var geometry = n