three.js を使用して 3D シネマを実装する方法

この記事では主にthree.jsを通じて3Dシネマの機能と原理分析を実現する方法について説明します。必要な友人は参考にしてください。

この記事では、3D シネマの視覚原理を紹介し、three.js イベント処理プロセスを紹介することで、3D シネマを実装するための基礎知識を包括的に分析します。

1. 3D 空間を作成する

私たちが部屋にいると想像してください。部屋は立方体です。生活のセンスがあれば、Three.js で簡単に部屋を作成できます。そして、その周りにテクスチャを追加して、カメラが立方体の中にあり、カメラが 360 度回転できるようにして、実際のシーンをシミュレートします。

コードに変換:

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 は特大の立方体 MeshFacematerial を作成し、立方体にテクスチャのラベルを付けます。視点は立方体の内側にあるため、側面: BackSide 2. パーティクル効果

3D モデルは点、線、およびで構成されます。サーフェス はい、モデルのすべての点をトラバースし、各点を幾何学モデルに変換し、テクスチャで貼り付け、各点の位置をコピーし、これらの幾何学モデルを使用して点のみでモデルを再構築できます。これがパーティクル効果です。 。 基本的。

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()
 // 拿到当前点的位置
 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 はパーティクルの集合とも言えるグループを作成します。その座標はモデル内の対応する点の位置と同じになります。 3. クリック イベント処理

three.js クリック イベントにはレイ キャスター (Raycaster) の助けが必要です。理解を容易にするために、最初に図を見てください:

Raycaster はレイを放射し、intersectObject はオブジェクトを監視します。 hit by the ray

this.raycaster = new Raycaster()
// 把你要监听点击事件的物体用数组储存起来
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 は、レイがヒットすることを意味します。私は特定のジオメトリを実装するのが面倒で、モバイル側でクリック実装のみを実装しました。PC での実装方法を確認したい場合は、を参照してください。 thee.js 公式サイト

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);
 }
 `
// 设置物体的质材为着色器质材
 let material = new ShaderMaterial({
 uniforms: uniforms,
 vertexShader: vertext,
 fragmentShader: fragment,
 transparent: true,
 })

5.ハロー効果

模擬映画館なので、プロジェクターから発せられる光をシミュレートするプロジェクターを作りたいと思います。

rreee

以上が皆さんのためにまとめたもので、今後皆さんのお役に立てれば幸いです。

関連記事:

mongooseでのオブジェクト更新の詳細な紹介

JS関数のsetTimeoutの詳細な紹介

jqueryを使用して左右のサイドバーのスケーリング効果を実現する方法

Vueでの方法jqueryで数値入力ボックスコンポーネントを実装する

jqueryでメッセージのカスタム表示数を実装する方法

Angular2でコンポーネントインタラクションを実装する方法

ソフトキーボードが入力をブロックする問題を解決する方法jsのボックス

以上がthree.js を使用して 3D シネマを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。