So implementieren Sie 3D-Kino mit three.js

In diesem Artikel wird hauptsächlich erläutert, wie die Funktionen und Prinzipien des 3D-Kinos über three.js implementiert werden. Freunde in Not können sich darauf beziehen.

In diesem Artikel analysieren wir umfassend die Grundkenntnisse der Implementierung von 3D-Kino, indem wir die visuellen Prinzipien des 3D-Kinos vorstellen und den Ereignisverarbeitungsprozess von three.js vorstellen.

1. Erstellen Sie einen 3D-Raum

Sie können sich vorstellen, dass wir uns in einem Raum befinden und der Raum ein Würfel ist. Wenn Sie Lust auf das Leben haben, können Sie Tapeten in den Raum bringen , three.js Sie können ganz einfach einen Würfel erstellen und Texturen um ihn herum anbringen, sodass sich die Kamera im Würfel befindet und die Kamera um 360 Grad gedreht werden kann, um eine reale Szene zu simulieren.

Konvertiert in Code:

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 erstellt einen übergroßen Würfel MeshFaceMaterial und fügt dem Würfel eine Textur hinzu, Seite: BackSide 2. Partikeleffekt

Ein 3D-Modell besteht aus Punkten, Linien und Flächen. Sie können jeden Punkt des Modells durchlaufen, jeden Punkt in ein geometrisches Modell umwandeln und ihm Texturen hinzufügen, die Position jedes Punkts kopieren und diese geometrischen Modelle dazu verwenden neu erstellen Ein Modell nur aus Punkten bilden, das ist das Grundprinzip von Partikeleffekten.

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

Neue Gruppe erstellt eine Gruppe, die als eine Sammlung von Partikeln bezeichnet werden kann. Legen Sie die Partikel und die Position über point.position.copy(pos) fest Punkt im Modell 3. Verarbeitung von Klickereignissen

Das Klickereignis von three.js erfordert die Verwendung eines Raycasters (Raycaster). Zum besseren Verständnis schauen Sie sich bitte zuerst ein Bild an:

Raycaster sendet einen Strahl aus intersectObject überwacht das vom Strahl getroffene Objekt

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 bedeutet, dass der Strahl nur eine Klick-Implementierung implementiert auf der mobilen Seite. Wenn Sie sehen möchten, wie Sie es auf dem PC implementieren, besuchen Sie bitte die offizielle Website von thee.js

4. Vorläufige Verwendung von Shader

Shader sind in Vertex-Shader und Fragmente unterteilt Shader sind in der Sprache GLSL geschrieben, einer Sprache, die mit der GPU kommuniziert. Hier geht es nur um die Verwendung des Halo-Effekts Simuliertes Kino, ich möchte einen Projektor bauen, um das vom Projektor ausgestrahlte Licht zu simulieren.

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,
 })

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Detaillierte Einführung in die Aktualisierung von Objekten in Mungo

Detaillierte Einführung in setTimeout in der JS-Funktion

So verwenden Sie jquery, um den nach links und rechts versenkbaren Effekt der Seitenleiste zu erzielen

So implementieren Sie die Zahleneingabefeldkomponente in Vue

So passen Sie die Anzahl der angezeigten Nachrichten in jquery an

So implementieren Sie die Komponenteninteraktion in Angular2

So lösen Sie Soft Probleme mit der js-Tastatur, die das Eingabefeld abdeckt

Das obige ist der detaillierte Inhalt vonSo implementieren Sie 3D-Kino mit three.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!