Three.js code analysis of the principle of 3D theater

This article we introduced the 3D theater visual principle and introduced the Three.js event handling process, fully analyzing the basics of 3D theater.

1. Create a 3D space

I can imagine that we are in the room, the room is a cube, if you have a living taste, you may put on the room in the room, three.js It can be easily created a cube and puts the texture around it, allowing the camera to rotate in the cube, the camera can rotate 360, simulate a real scene.

Converts to code:

 const path = 'assets / image /' const format = '.jpg' const urls = [`$ {pat} PX $ {format} `,` $ {pat} nx $ {format} `,` $ {pat} py $ {format} `,` $ {pat} NY $ {format} `,` $ {pat} 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})})})})})})})})})})})})})})})EMATERIAL (MATERIALS)) This.Scene.Add (Cube)   
CubeGeometry creates an oversized cube MeshfaceMaterial to a cube, due to the perspective In the cube, Side: Backside 2. Part: BACKSIDE 2. Particle effect

A 3D model is made up of points, lines, face, can traverse each point of the model, convert each point into geometric model, and give It is attached to the location of each point, re-constitutes a single model with these geometries, which is the basic principle of the particle effect.

“this.Points = new group () const vertices = [] let point const texture = new textureLoader (). LOAD (‘assets / image / dot.png’) Geometry.vertices.Foreach ((o, i) => {// Record the location of each point Vertices.push (o.clone ()) const_geometry = new geometry () // Location of the current point Const Pos = Vertices [i] _Geometry.vertices.push (new vector3 ()) const color = new color () color.r = math.abs (Math.rand () * 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 creates a group, which can be said to be a collection of particles through Point.Position. Copy (POS) Set the same position in particle and position, coordinates and models 3. Click on the event
  The click event of Three.js needs to be used by the raycaster, for easy understanding, please First look at the picture:  
Raycaster launches a ray, INTERSECTOBJECT monitors the object of the ray

this.rayCaster = New raycaster () // Store this to the object you want to click on the event to store 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.renet) * 2 + 1; this.raycaster.setFromcamera (Mouse, this. camera) // hit detecting seat const intersects = this.raycaster.intersectObjects (this.seats) if (intersects.length> 0) {intersects [0] .object.material = new MeshLambertMaterial ({color: 0xff0000})}}

INTERSECTS.LENGTH> 0 indicates that a geometry of the ray is lazy only realizes the click implementation of the mobile terminal. If you want to see how the PC is implemented, please see thee.js official website

three.js实现3D影院的原理的代码分析 4. Preliminary use of shader

The shader is divided into vertex shader and chromatographers, written in GLSL language, is a language that communicates with GPUs, only how Using

  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 (small); Return Mix (Mix (C0, C1, SmoothStep (0.0, 1.0, AX)), Mix (C2, C3, SmoothStep (0.0, 1.0, AX)), SmoothStep (0.0 , 1.0, AY));} 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  
5. Hollow effect

Since the analog cinemaI want to make a projector, analog the light emitted by the projector.

// Halo Effects must be set alpha = true const rendrer = 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, Additivebleble); lensflare.position.set (0, 150, -85)

The main light still relying on lensflare0.png analog TextureFlare3 settings Halo range
                    
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment