Three.js implementiert das Teilen cooler 3D-Kinobeispiele

Sie können sich vorstellen, dass der Raum ein Würfel ist. Wenn Sie einen guten Lebensgeschmack haben, können Sie mit Three.js problemlos einen Würfel erstellen und Texturen hinzufügen. Legen Sie die Kamera in den Würfel und die Kamera kann um 360 Grad gedreht werden, um eine reale Szene zu simulieren. In diesem Artikel erfahren Sie, wie Sie mit three.js ein cooles 3D-Kino implementieren.

In Code konvertieren:

    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 fügt dem Würfel eine Textur hinzu, da Die Perspektive liegt innerhalb des Würfels, Seite: Rückseite

2. Partikeleffekt

Ein 3D-Modell besteht aus Punkten, Linien und Flächen, und das Modell kann sein Durchquert Konvertieren Sie jeden Punkt in ein geometrisches Modell, fügen Sie ihm eine Textur hinzu, kopieren Sie die Position jedes Punkts und verwenden Sie diese geometrischen Modelle, um ein Modell nur aus Punkten zu rekonstruieren. Dies 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 man als eine Sammlung von Partikeln bezeichnen kann

• Partikel durch Punktposition festlegen. copy(pos) Die Position und die Koordinaten stimmen mit der Position des entsprechenden Punkts im Modell überein

3 Klickereignisverarbeitung

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

Raycaster sendet einen Strahl aus und 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 auf eine bestimmte Geometrie

• Wesen trifft Faul, ich habe die Klick-Implementierung nur auf der mobilen Seite implementiert. Wenn Sie sehen möchten, wie Sie sie 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 Fragment-Shader unterteilt, die in der Sprache GLSL geschrieben sind. Eine Sprache, die mit der GPU kommuniziert. Hier sprechen wir nur über deren Verwendung.

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. Halo Effekt

Da es sich um ein simuliertes Kino handelt, möchte ich einen Projektor bauen und die Lichtemission des Projektors simulieren.

 // 光晕效果必须设置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)

• Das Hauptlicht wird weiterhin durch lensflare0.png simuliert

• textureFlare3 legt die Reichweite des Halos fest

Verwandte Empfehlungen:

Grundlegende Einführung in Three.js der JS-Bibliothek

So erstellen Sie eine Szene mit Three.js

3D-Fotowand basierend auf three.js und WeChat

Das obige ist der detaillierte Inhalt vonThree.js implementiert das Teilen cooler 3D-Kinobeispiele. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!