JS 如何獲取和監(jiān)聽屏幕方向的改變？

大概寫一下：

創(chuàng)新互聯(lián)建站專注于尋烏網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供尋烏營銷型網(wǎng)站建設(shè)，尋烏網(wǎng)站制作、尋烏網(wǎng)頁設(shè)計、尋烏網(wǎng)站官網(wǎng)定制、小程序開發(fā)服務(wù)，打造尋烏網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供尋烏網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

方法一：用觸發(fā)手機的橫屏和豎屏之間的切換的事件

代碼如下：

window.addEventListener("orientationchange", function() {

// 宣布新方向的數(shù)值

alert(window.orientation);

}, false);

方法二：監(jiān)聽調(diào)整大小的改變

代碼如下:

window.addEventListener("resize", function() {

// 得到屏幕尺寸 (內(nèi)部/外部寬度，內(nèi)部/外部高度)

}, false);

css判斷橫豎屏幕

代碼如下:

@media screen and (orientation:portrait) {

/* portrait-specific styles */

}

/* landscape */

@media screen and (orientation:landscape) {

/* landscape-specific styles */

}

本地window.matchMedia方法允許實時媒體查詢。我們可以利用以上媒體查詢找到我們是處于直立或水平視角：

代碼如下:

var mql = window.matchMedia("(orientation: portrait)");

// 如果有匹配，則我們處于垂直視角

if(mql.matches) {

// 直立方向

alert("1")

} else {

//水平方向

alert("2")

}

// 添加一個媒體查詢改變監(jiān)聽者

mql.addListener(function(m) {

if(m.matches) {

// 改變到直立方向

document.getElementById("test").innerHTML="改變到直立方向";

}

else {

document.getElementById("test").innerHTML="改變到水平方向";

// 改變到水平方向

}

});

Three.js 實現(xiàn)VR看房

準(zhǔn)備工作：

1、three.js? ?

2、搭建項目環(huán)境 我使用的live-server

3、720°全景圖

目錄結(jié)構(gòu)

mian.js

; (function () {

// 在THREEjs中，渲染一個3d世界的必要因素是場景（scene）、相機（camera）、渲染器（renderer）。渲染出一個3d世界后，可以往里面增加各種各樣的物體、光源等，形成一個3d世界。

// 創(chuàng)建場景

const scene = new THREE.Scene()

// 創(chuàng)建透視攝像機

// new THREE.PrespectiveCamera('視角', '指投影窗口長寬比例', '表示重距離攝像機多遠(yuǎn)的位置開始渲染', '表示距離攝像機多遠(yuǎn)的位置截止渲染');

// 正交攝像機是一個矩形可視區(qū)域，物體只有在這個區(qū)域內(nèi)才是可見的物體無論距離攝像機是遠(yuǎn)或事近，物體都會被渲染成一個大小。一般應(yīng)用場景是2.5d游戲如跳一跳、機械模型

// 透視攝像機是最常用的攝像機類型，模擬人眼的視覺，近大遠(yuǎn)小（透視）。Fov表示的是視角，F(xiàn)ov越大，表示眼睛睜得越大，離得越遠(yuǎn)，看得更多。如果是需要模擬現(xiàn)實，基本都是用這個相機

const camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 1, 1000)

// 創(chuàng)建ThreeJs渲染器

const renderer = new THREE.WebGLRenderer({ antialias: true })

// 設(shè)置渲染器場景的大小

renderer.setSize(window.innerWidth, window.innerHeight)

// 渲染器添加到頁面

document.body.appendChild(renderer.domElement)

// 上面的確是把3d世界畫出來了，只是沒有什么東西。在three.js中，我們需要增加光源和mesh

// mesh即是網(wǎng)格。在計算機里，3D世界是由點組成的，無數(shù)的面拼接成各種形狀的物體。這種模型叫做網(wǎng)格模型。一條線是兩個點組成，一個面是3個點組成，一個物體由多個3點組成的面組成

// 而網(wǎng)格（mesh）又是由幾何體（geometry）和材質(zhì)（material）構(gòu)成的

//? 我們所能想象到的幾何體，框架都自帶了，我們只需要調(diào)用對應(yīng)的幾何體構(gòu)造函數(shù)即可創(chuàng)建。幾何體的創(chuàng)建方法都是new，如BoxBuffer：const geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );

// 創(chuàng)建的時候，一般定義了渲染一個 3D 物體所需要的基本數(shù)據(jù)：Face 面、Vertex 頂點等信息。THREE.xxxGeometry指的是框架自帶的幾何體，不同幾何體所需要的參數(shù)有所不同，大概是width、height、radius、depth、segment、detail、angle等屬性

// 更多geometry相關(guān)api

// BufferGeometry和Geometry有什么不同?就實現(xiàn)的效果來說它們都是一樣，但是BufferGeometry的多了一些頂點屬性，且性能較好。對于開發(fā)者來說，Geometry對象屬性少體驗更好。THREE解析幾何體對象的時候，如果是Geometry，則會把對象轉(zhuǎn)換成ufferGeometry對象，再進行下一步渲染

// 創(chuàng)建幾何模型

// THREE.BoxGeometry('x軸長', 'y軸長', 'z軸長')

const geometry = new THREE.SphereGeometry(50, 256, 256);

// 創(chuàng)建貼圖 720°圖片，需要硬件支持 這里的圖是借用網(wǎng)絡(luò)上面的

const texture = new THREE.TextureLoader().load('')

//創(chuàng)建材質(zhì)

const material = new THREE.MeshBasicMaterial({ map: texture })

// 渲染球體的雙面

material.side = THREE.DoubleSide;

// 創(chuàng)建網(wǎng)格對象

const mesh = new THREE.Mesh(geometry, material)

// 網(wǎng)格對象填加到場景

scene.add(mesh)

// 攝像機放球體中心

camera.position.set(-0.3, 0, 0)

// 控制器（如果報錯去github自己拷貝一個OrbitControls.js ）

const controls = new THREE.OrbitControls(camera, renderer.domElement);

controls.addEventListener("change", () = {

renderer.render(scene, camera);

});

controls.minDistance = 1;

controls.maxDistance = 2000;

controls.enablePan = false;

// 調(diào)整max

controls.minDistance = 1 // controls.maxDistance = 200;

controls.maxDistance = 2

function animate () {

requestAnimationFrame(animate)

renderer.render(scene, camera)

}

animate()

window.onresize = function () {

camera.aspect = window.innerWidth / window.innerHeight

camera.updateProjectionMatrix()

renderer.setSize(window.innerWidth, window.innerHeight)

}

})()

ThreeJS簡介

近年來web得到了快速的發(fā)展。隨著HTML5的普及，網(wǎng)頁的表現(xiàn)能力越來越強大。網(wǎng)頁上已經(jīng)可以做出很多復(fù)雜的動畫，精美的效果。 但是，人總是貪的。那么，在此之上還能做什么呢？其中一種就是通過WebGL在網(wǎng)頁中繪制高性能的3D圖形。

OpenGL 它是最常用的跨平臺圖形庫。

WebGL 是基于 OpenGL 設(shè)計的面向web的圖形標(biāo)準(zhǔn)，提供了一系列JavaScript API，通過這些API進行圖形渲染將得以利用圖形硬件從而獲得較高性能。

而 Three.js 是通過對 WebGL 接口的封裝與簡化而形成的一個易用的圖形庫。

簡單點的說法 threejs=three + js ，three表示3D的意思，js表示javascript的意思。那么合起來，three.js就是使用javascript 來寫3D程序的意思。而javascript的計算能力因為google的V8引 擎得到了迅猛的增強，做3D程序，做服務(wù)器都沒有問題。

WebGL 門檻相對較高，需要相對較多的數(shù)學(xué)知識（線性代數(shù)、解析幾何）。因此，想要短時間上手 WebGL 還是挺有難度的。 Three.js 對 WebGL 提供的接口進行了非常好的封裝，簡化了很多細(xì)節(jié)，大大降低了學(xué)習(xí)成本。并且，幾乎沒有損失 WebGL 的靈活性。

因此，從 Three.js入 手是值得推薦的，這可以讓你在較短的學(xué)習(xí)后就能面對大部分需求場景。

Three.js 的入門是相對簡單的，但是當(dāng)我們真的去學(xué)的時候，會發(fā)現(xiàn)一個很尷尬的問題：相關(guān)的學(xué)習(xí)資料很少。

通常這種流行的庫都有很完善的文檔，很多時候跟著官方的文檔或官方的入門教程學(xué)習(xí)就是最好的路線。但Three不是的，它的文檔對初學(xué)者來說太過簡明扼要。

不過官方提供了非常豐富的examples，幾乎所有你需要的用法都在某個example中有所體現(xiàn)。但這些example不太適合用來入門，倒是適合入門之后的進一步學(xué)習(xí)。

這里推薦一些相對較好的教程：

當(dāng)然，實際的學(xué)習(xí)過程中這些資料肯定是不太夠的，遇到問題還是要自己去查資料。不過這里要提醒一下，Three.js的更新是相當(dāng)頻繁的，現(xiàn)在是r80版本，自2010年4月發(fā)布r1以來，這已經(jīng)是第72個版本了(中間有的版本號跳過了)。因此，在網(wǎng)上找到的資料有些可能是不適合當(dāng)前版本的，需要注意甄別(前面推薦的資料也都或多或少存在這樣的問題)。

要在屏幕上展示3D圖形，思路大體上都是這樣的：

1、構(gòu)建一個三維空間

Three中稱之為場景(Scene)

2、選擇一個觀察點，并確定觀察方向/角度等

Three中稱之為相機(Camera)

3、在場景中添加供觀察的物體

Three中的物體有很多種，包括Mesh,Line,Points等，它們都繼承自O(shè)bject3D類

4、將觀察到的場景渲染到屏幕上的指定區(qū)域

Three中使用Renderer完成這一工作

場景是所有物體的容器，也對應(yīng)著我們創(chuàng)建的三維世界。

Camera是三維世界中的觀察者，為了觀察這個世界，首先我們要描述空間中的位置。 Three中使用采用常見的右手坐標(biāo)系定位。

Three中的相機有兩種，分別是正投影相機THREE.OrthographicCamera和透視投影相機THREE.PerspectiveCamera。

這里補充一個視景體的概念：視景體是一個幾何體，只有視景體內(nèi)的物體才會被我們看到，視景體之外的物體將被裁剪掉。這是為了去除不必要的運算。

正交投影相機的視景體是一個長方體，OrthographicCamera的構(gòu)造函數(shù)是這樣的：

Camera本身可以看作是一個點，left則表示左平面在左右方向上與Camera的距離。另外幾個參數(shù)同理。于是六個參數(shù)分別定義了視景體六個面的位置。

可以近似地認(rèn)為，視景體里的物體平行投影到近平面上，然后近平面上的圖像被渲染到屏幕上。

2）透視投影相機

fov對應(yīng)著圖中的視角，是上下兩面的夾角。aspect是近平面的寬高比。在加上近平面距離near，遠(yuǎn)平面距離far，就可以唯一確定這個視景體了。

透視投影相機很符合我們通常的看東西的感覺，因此大多數(shù)情況下我們都是用透視投影相機展示3D效果。

有了相機，總要看點什么吧？在場景中添加一些物體吧。

Three中供顯示的物體有很多，它們都繼承自O(shè)bject3D類，這里我們主要看一下Mesh和Points兩種。

1）Mesh

我們都知道，計算機的世界里，一條弧線是由有限個點構(gòu)成的有限條線段連接得到的。線段很多時，看起來就是一條平滑的弧線了。

計算機中的三維模型也是類似的，普遍的做法是用三角形組成的網(wǎng)格來描述，我們把這種模型稱之為Mesh模型。

geometry是它的形狀，material是它的材質(zhì)。

不止是Mesh，創(chuàng)建很多物體都要用到這兩個屬性。下面我們來看看這兩個重要的屬性。

2）Geometry

Geometry，形狀，相當(dāng)直觀。Geometry通過存儲模型用到的點集和點間關(guān)系(哪些點構(gòu)成一個三角形)來達到描述物體形狀的目的。

Three提供了立方體(其實是長方體)、平面(其實是長方形)、球體、圓形、圓柱、圓臺等許多基本形狀；

你也可以通過自己定義每個點的位置來構(gòu)造形狀；

對于比較復(fù)雜的形狀，我們還可以通過外部的模型文件導(dǎo)入。

3）Material

Material，材質(zhì)，這就沒有形狀那么直觀了。

材質(zhì)其實是物體表面除了形狀以為所有可視屬性的集合，例如色彩、紋理、光滑度、透明度、反射率、折射率、發(fā)光度。

這里講一下材質(zhì)(Material)、貼圖(Map)和紋理(Texture)的關(guān)系。

材質(zhì)上面已經(jīng)提到了，它包括了貼圖以及其它。

貼圖其實是‘貼’和‘圖’，它包括了圖片和圖片應(yīng)當(dāng)貼到什么位置。

紋理嘛，其實就是‘圖’了。

Three提供了多種材質(zhì)可供選擇，能夠自由地選擇漫反射/鏡面反射等材質(zhì)。

4）Points

講完了Mesh，我們來看看另一種Object——Points。

Points其實就是一堆點的集合，它在之前很長時間都被稱為ParticleSystem(粒子系統(tǒng))，r68版本時更名為PointCloud,r72版本時才更名為Points。更名主要是因為，Mr.doob認(rèn)為，粒子系統(tǒng)應(yīng)當(dāng)是包括粒子和相關(guān)的物理特性的處理的一套完整體系，而Three中的Points簡單得多。因此最終這個類被命名為Points。

5）Light

神說：要有光！

光影效果是讓畫面豐富的重要因素。

Three提供了包括環(huán)境光AmbientLight、點光源PointLight、 聚光燈SpotLight、方向光DirectionalLight、半球光HemisphereLight等多種光源。

只要在場景中添加需要的光源就好了。

6）Renderer

在場景中建立了各種物體，也有了光，還有觀察物體的相機，是時候把看到的東西渲染到屏幕上了。這就是Render做的事情了。

Renderer綁定一個canvas對象，并可以設(shè)置大小，默認(rèn)背景顏色等屬性。

調(diào)用Renderer的render函數(shù)，傳入scene和camera，就可以把圖像渲染到canvas中了。

現(xiàn)在，一個靜態(tài)的畫面已經(jīng)可以得到了，怎么才能讓它動起來？

很簡單的想法，改變場景中object的位置啊角度啊各種屬性，然后重新調(diào)用render函數(shù)渲染就好了。

那么重新渲染的時機怎么確定？

HTML5為我們提供了requestAnimFrame，它會自動在每次頁面重繪前調(diào)用傳入的函數(shù)。

如果我們一開始這樣渲染：

只需要改成這樣：

object就可以動起來了！

下面我們用一個簡單的例子來梳理一下這個過程。

首先寫一個有Canvas元素的頁面吧。

下面來做Javascript的部分

首先初始化Renderer

初始化場景:

初始化相機：

要唯一確定一個相機的位置與方向，position、up、lookAt三個屬性是缺一不可的。

這里我們創(chuàng)建了一個正交投影相機，這里我將視景體大小與屏幕分辨率保持一致只是為了方便，這樣坐標(biāo)系中的一個單位長度就對應(yīng)屏幕的一個像素了。

我們將相機放在Z軸上，面向坐標(biāo)原點，相機的上方向為Y軸方向，注意up的方向和lookAt的方向必然是垂直的（類比自己的頭就知道了）。

下面添加一個立方體到場景中：

注意我們使用了法向材質(zhì) MeshNormalMaterial ，這樣立方體每個面的顏色與這個面對著的方向是相關(guān)的，更便于觀察/調(diào)試。

在這個簡單的demo里我不打算添加光影效果，而法向材質(zhì)對光也是沒有反應(yīng)的。 最后來創(chuàng)建一個動畫循環(huán)吧

每次重繪都讓這個立方體轉(zhuǎn)動一點點。 當(dāng)頁面加載好時，調(diào)用前面這些函數(shù)就好了。

WebGL中文網(wǎng) 強烈推薦!!

WebGL中文教程網(wǎng)

求unity3d，第一人稱旋轉(zhuǎn)視角腳本代碼，js，C#均可，最好是C#

using?UnityEngine;

using?System.Collections;

public?class?FPSCameraControl?:?MonoBehaviour

{

public?float?xAxisRotateMin?=?-30f;//繞X軸旋轉(zhuǎn)的最小度數(shù)限制

public?float?xAxisRotateMax?=?30f;//????????????最大

public?float?xRotateSpeed?=?30f;?//繞X軸旋轉(zhuǎn)的速度

public?float?yRotateSpeed?=?50f;??//繞Y軸旋轉(zhuǎn)的速度

float?yRotateAngle;

float?xRotateAngle;

void?Update()

{

if?(Input.GetMouseButton(0))

{

yRotateAngle?+=?Input.GetAxis("Mouse?X")?*?Time.deltaTime?*?yRotateSpeed;

xRotateAngle?+=?Input.GetAxis("Mouse?Y")?*?Time.deltaTime?*?xRotateSpeed;

if?(xRotateAngle??xAxisRotateMin)

{

xRotateAngle?=?xAxisRotateMin;

}

if?(xRotateAngle??xAxisRotateMax)

{

xRotateAngle?=?xAxisRotateMax;

}

transform.rotation?=?Quaternion.Euler(new?Vector3(xRotateAngle,?yRotateAngle,?0));//設(shè)置繞Z軸旋轉(zhuǎn)為0，保證了垂直方向的不傾斜

}

}

}

上面腳本拖拽到相機上即可。

有什么不懂的可以給我發(fā)站內(nèi)消息。~~~

標(biāo)題名稱：javascript視角的簡單介紹
文章位置：http://chinadenli.net/article41/dsegded.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、服務(wù)器托管、App設(shè)計、域名注冊、網(wǎng)站內(nèi)鏈、

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)