欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

three.js實現(xiàn)3D影院的原理的代碼分析

 更新時間:2017年12月18日 13:54:04   投稿:laozhang  
本篇文章主要給大家講解了如何通過three.js實現(xiàn)3D影院的功能以及原理分析,需要的朋友參考一下吧。

本篇文章我們通過介紹3D影院的視覺原理,并介紹了three.js事件處理過程,全面分析了實現(xiàn)3D影院的基礎(chǔ)知識。

1.創(chuàng)建一個3d的空間

可以想象一下我們在房間內(nèi),房間是一個立方體,如果你有生活品味,可能會在房間內(nèi)貼上壁紙,three.js可以很方便的創(chuàng)建一個立方體,并且給它的周圍貼上紋理,讓照相機在立方體之中,照相機可以360旋轉(zhuǎn),就模擬了一個真實的場景。

轉(zhuǎn)換為代碼:

const path = 'assets/image/'
 const format = '.jpg'
 const urls = [
 `${path}px${format}`, `${path}nx${format}`,
 `${path}py${format}`, `${path}ny${format}`,
 `${path}pz${format}`, `${path}nz${format}`
 ]
 const materials = []
 urls.forEach(url => {
 const textureLoader = new TextureLoader()
 textureLoader.setCrossOrigin(this.crossOrigin)
 const texture = textureLoader.load(url)
 materials.push(new MeshBasicMaterial({
 map: texture,
 overdraw: true,
 side: BackSide
 }))
 })
 const cube = new Mesh(new CubeGeometry(9000, 9000, 9000), new MeshFaceMaterial(materials))
 this.scene.add(cube)

CubeGeometry創(chuàng)建一個超大的立方體 MeshFaceMaterial給立方體貼上文理,由于視角是在立方體內(nèi)部,所以side:BackSide 2.粒子效果

一個3d模型是由點,線,面組成的,可以遍歷模型的每一個點,把每一個點轉(zhuǎn)換為幾何模型,并且給它貼上文理,拷貝每一個點的位置,用這些幾何模型重新構(gòu)成一個只有點的模型,這就是粒子效果的基本原理。

this.points = new Group()
 const vertices = []
 let point
 const texture = new TextureLoader().load('assets/image/dot.png')
 geometry.vertices.forEach((o, i) => {
 // 記錄每個點的位置
 vertices.push(o.clone())
 const _geometry = new Geometry()
 // 拿到當(dāng)前點的位置
 const pos = vertices[i]
 _geometry.vertices.push(new Vector3())
 const color = new Color()
 color.r = Math.abs(Math.random() * 10)
 color.g = Math.abs(Math.random() * 10)
 color.b = Math.abs(Math.random() * 10)
 const material = new PointsMaterial({
 color,
 size: Math.random() * 4 + 2,
 map: texture,
 blending: AddEquation,
 depthTest: false,
 transparent: true
 })
 point = new Points(_geometry, material)
 point.position.copy(pos)
 this.points.add(point)
 })
 return this.points

new Group創(chuàng)建一個群,可以說是粒子的集合通過point.position.copy(pos)設(shè)置粒子和位置,坐標(biāo)和模型中對應(yīng)點的位置相同 3.點擊事件的處理

three.js的點擊事件需要借助光線投射器(Raycaster),為了方便理解,請先看一張圖:

Raycaster發(fā)射一個射線,intersectObject監(jiān)測射線命中的物體

this.raycaster = new Raycaster()
// 把你要監(jiān)聽點擊事件的物體用數(shù)組儲存起來
this.seats.push(seat)

onTouchStart(event) {
 event.preventDefault()
 event.clientX = event.touches[0].clientX;
 event.clientY = event.touches[0].clientY;
 this.onClick(event)
 }

 onClick(event) {
 const mouse = new Vector2()
 mouse.x = ( event.clientX / this.renderer.domElement.clientWidth ) * 2 - 1
 mouse.y = - ( event.clientY / this.renderer.domElement.clientHeight ) * 2 + 1;
 this.raycaster.setFromCamera(mouse, this.camera)
 // 檢測命中的座位
 const intersects = this.raycaster.intersectObjects(this.seats)
 if (intersects.length > 0) {
 intersects[0].object.material = new MeshLambertMaterial({
  color: 0xff0000
 })
 }
 }

intersects.length > 0 表示射線命中了某個幾何體偷懶只實現(xiàn)了移動端的點擊實現(xiàn),如果想看pc怎么實現(xiàn),請看thee.js官網(wǎng)

4.著色器的初步使用

著色器分為頂點著色器和片元著色器,用GLSL語言編寫,是一種和GPU溝通的的語言,這里只講如何使用

const vertext = `
 void main()
 {
 gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
 }
 `

const fragment = `
 uniform vec2 resolution;
 uniform float time;

 vec2 rand(vec2 pos)
 {
 return fract( 0.00005 * (pow(pos+2.0, pos.yx + 1.0) * 22222.0));
 }
 vec2 rand2(vec2 pos)
 {
 return rand(rand(pos));
 }

 float softnoise(vec2 pos, float scale)
 {
 vec2 smplpos = pos * scale;
 float c0 = rand2((floor(smplpos) + vec2(0.0, 0.0)) / scale).x;
 float c1 = rand2((floor(smplpos) + vec2(1.0, 0.0)) / scale).x;
 float c2 = rand2((floor(smplpos) + vec2(0.0, 1.0)) / scale).x;
 float c3 = rand2((floor(smplpos) + vec2(1.0, 1.0)) / scale).x;

 vec2 a = fract(smplpos);
 return mix(
 mix(c0, c1, smoothstep(0.0, 1.0, a.x)),
 mix(c2, c3, smoothstep(0.0, 1.0, a.x)),
 smoothstep(0.0, 1.0, a.y));
 }

 void main(void)
 {
 vec2 pos = gl_FragCoord.xy / resolution.y;
 pos.x += time * 0.1;
 float color = 0.0;
 float s = 1.0;
 for(int i = 0; i < 8; i++)
 {
 color += softnoise(pos+vec2(i)*0.02, s * 4.0) / s / 2.0;
 s *= 2.0;
 }
 gl_FragColor = vec4(color);
 }
 `
// 設(shè)置物體的質(zhì)材為著色器質(zhì)材
 let material = new ShaderMaterial({
 uniforms: uniforms,
 vertexShader: vertext,
 fragmentShader: fragment,
 transparent: true,
 })

5.光暈效果

由于是模擬電影院,我想做一個投影儀,模擬投影儀射出的光線。

// 光暈效果必須設(shè)置alpha = true
 const renderer = this.renderer = new WebGLRenderer({alpha: true, antialias: true})

 let textureFlare = new TextureLoader().load('assets/image/lensflare0.png')
 let textureFlare3 = new TextureLoader().load('assets/image/lensflare3.png')
 let flareColor = new Color(0xffffff)
 let lensFlare = new LensFlare(textureFlare, 150, 0.0 , AdditiveBlending, flareColor)
 lensFlare.add(textureFlare3, 60, 0.6, AdditiveBlending);
 lensFlare.add(textureFlare3, 70, 0.7, AdditiveBlending);
 lensFlare.add(textureFlare3, 120, 0.9, AdditiveBlending);
 lensFlare.add(textureFlare3, 70, 1.0, AdditiveBlending);
 lensFlare.position.set(0, 150, -85)

主要的光線還是靠lensflare0.png模擬 textureFlare3設(shè)置光暈的范圍

相關(guān)文章

  • JS+CSS模擬可以無刷新顯示內(nèi)容的留言板實例

    JS+CSS模擬可以無刷新顯示內(nèi)容的留言板實例

    這篇文章主要介紹了JS+CSS模擬可以無刷新顯示內(nèi)容的留言板,涉及javascript操作dom元素、鼠標(biāo)事件及css樣式的技巧,需要的朋友可以參考下
    2015-03-03
  • JavaScript獲取鍵盤按鍵的鍵碼(參照表)

    JavaScript獲取鍵盤按鍵的鍵碼(參照表)

    JS獲取鍵盤按鍵的鍵碼event.keyCode,記錄-方便查找。需要的朋友參考下本教程吧
    2017-01-01
  • js innerHTML 改變div內(nèi)容的方法

    js innerHTML 改變div內(nèi)容的方法

    永遠不知道你可以改變的內(nèi)容,一個HTML元素?也許你要取代的文字段落中,以反映什么訪客選定剛剛從下拉框中。通過操縱一個元素的innerHtml您可以變更您的文本和HTML多達你喜歡。
    2013-08-08
  • Javascript前端UI框架Kit使用指南之Kitjs簡介

    Javascript前端UI框架Kit使用指南之Kitjs簡介

    本文給大家簡單介紹了一款優(yōu)秀的Javascript前端UI框架--Kitjs,支持PC端以及手機開發(fā)領(lǐng)域,非常的全面,這里推薦給有需要的小伙伴。
    2014-11-11
  • bootstrap的工具提示實例代碼

    bootstrap的工具提示實例代碼

    Bootstrap 工具提示(Tooltip)插件 當(dāng)您想要描述一個鏈接的時候,工具提示(Tooltip)就顯得非常有用。這篇文章通過實例代碼給大家介紹bootstrap的工具提示功能,需要的朋友參考下吧
    2017-05-05
  • javascript比較文檔位置

    javascript比較文檔位置

    一個很棒的 blog 文章,是 PPK 兩年前寫的,文章中解釋了 contains() 和 compareDocumentPosition() 方法運行在他們各自的瀏覽器上。從那起,我已經(jīng)對這些方法做了大量的研究,并且已經(jīng)在很多場合使用他們。在很多任務(wù)中,他們被證明是非常有用的(特別關(guān)于結(jié)構(gòu)的抽象 DOM 選擇器)。
    2008-04-04
  • uniapp內(nèi)置組件scroll-view案例詳解(完整代碼)

    uniapp內(nèi)置組件scroll-view案例詳解(完整代碼)

    這篇文章主要介紹了uniapp內(nèi)置組件scroll-view案例詳解,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧
    2024-07-07
  • 微信小程序?qū)崿F(xiàn)計算器案例

    微信小程序?qū)崿F(xiàn)計算器案例

    這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)計算器案例,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-07-07
  • 原生js封裝自定義滾動條

    原生js封裝自定義滾動條

    本文主要介紹了原生js封裝自定義滾動條的相關(guān)知識。具有很好的參考價值。下面跟著小編一起來看下吧
    2017-03-03
  • js之如何篩選出兩個數(shù)組相同的值

    js之如何篩選出兩個數(shù)組相同的值

    這篇文章主要介紹了js之如何篩選出兩個數(shù)組相同的值問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-06-06

最新評論