Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "how to use Three.js+React to achieve 3D text suspension effect". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Background

In the Three.js Journey course example, an example of 3D text suspension using the Three.js built-in method is provided. This article uses the React + Three.js technology stack to achieve a similar effect with reference to the example. The knowledge points involved in this paper mainly include: CSS mesh background, MeshNormalMaterial normal material, FontLoader font loader, TextGeometry text buffer geometry, TorusBufferGeometry ring buffer geometry, ConeBufferGeometry cone buffer geometry, OctahedronBufferGeometry octahedral buffer geometry, Three.js post-rendering, GlitchPass channel, Element.requestFullscreen, Document.exitFullscreen and so on.

Effect.

The implementation effect is shown in the banner diagram, and the main body of the page consists of a text grid model located in the center and surrounded by torus, cones and octahedrons. As the mouse moves or clicks on the page, the model moves with it. Two buttons are provided in the upper right corner of the page to switch between the background color of the page and the late effects of the failure style. Double-click the screen to enter or exit the full screen.

Online preview: https://3d-dragonir.vercel.app/#/floating

Or https://dragonir.github.io/3d/#/floating

Adapted:

PC end

Mobile terminal

Implement the introduction of resources

First of all, the module resources needed for development are introduced, in which FontLoader is used to load font files, TextGeometry is used to create 3D font grids, and EffectComposer, RenderPass and GlitchPass are used for post-special effects rendering.

Import * as THREE from "three"; import {FontLoader} from "three/examples/jsm/loaders/FontLoader"; import {TextGeometry} from 'three/examples/jsm/geometries/TextGeometry';import {EffectComposer} from' three/examples/jsm/postprocessing/EffectComposer.js';import {RenderPass} from 'three/examples/jsm/postprocessing/RenderPass.js';import {GlitchPass} from' three/examples/jsm/postprocessing/GlitchPass.js';DOM structure

The structure of the page DOM is very simple. Container # canvas is used for scene rendering, .color_pick is used to switch the background color of the page, and .pass_button is used to switch the failure style for post-rendering.

Special effects {this.state.renderGlithPass? 'on': 'off'} set status

BackgroundColor indicates the background color of the current page, and renderGlithPass indicates whether the late state is enabled. Self-test found that in iOS Safari browsers, post-rendering of fault style will lead to mold-piercing problems of the model, so use this parameter to control the phone to disable the late effect by default and pc to enable it by default.

State = {backgroundColor:'# 164CCAP, renderGlithPass:! (window.navigator.userAgent.toLowerCase (). IndexOf ('mobile') > 0)} mesh background

Use the pure CSS attribute linear-gradient to implement the grid background to beautify the page.

Background-image: linear-gradient (rgba (3,192,60, .3) 1px, transparent 1px), linear-gradient (90deg, rgba (3,192,60, .3) 1px, transparent 1px); background-size: 1em 1em; scene initialization

Initialize the rendering container, scene, camera, and the position of the camera can be adjusted according to your own needs. Render turn on alpha and set .setClearAlpha (0) to set the background color to transparent.

Canvas = document.getElementById ('canvas'); renderer = new THREE.WebGLRenderer ({antialias: true, alpha: true}); renderer.setPixelRatio (Math.min (2, window.devicePixelRatio)); renderer.setSize (window.innerWidth, window.innerHeight); renderer.setClearAlpha (0); canvas.appendChild (renderer.domElement); scene = new THREE.Scene (); camera = new THREE.PerspectiveCamera (70, window.innerWidth / window.innerHeight, .1, 10000); camera.position.set (- 2 * 10000, 0780); create materials

All the mesh models in this paper will use the same material MeshNormalMaterial, and its properties can be applied to make the mesh model produce color gradient. Create once globally, and subsequent development does not need to be created repeatedly, which is conducive to the improvement of page performance.

Const material = new THREE.MeshNormalMaterial ()

MeshNormalMaterial normal material

It is a material that maps normal vectors to RGB colors. You can detect whether the model surface is smooth by observing whether the color gradient on the model surface is continuous or not.

Constructor:

MeshNormalMaterial (parameters: Object)

Parameters: optional, an object that defines the appearance of a material, with one or more properties.

Special attributes:

.normalMap [Texture]: used to create a normal map texture, the RGB value affects the surface normals of each pixel clip and changes the way the color is illuminated.

.normal MapType [Integer]: the type of normal map. The options are THREE.TangentSpaceNormalMap (default) and THREE.ObjectSpaceNormalMap.

.normal scale [Vector2]: how much the normal map affects the material. The range is 0-1, and the default value is Vector2 set to (1,1).

.flatShading [Boolean]: defines whether the material is rendered with planar shading, and the default value is false.

.morphNormals [Boolean]: defines whether to use morphNormals. Set to true to pass the morphNormal property from geometry to shader. The default is false.

.morphTargets [Boolean]: defines whether the material uses morphTargets. The default value is false.

Create a text model

Load the fontface font JSON file using FontLoader and create a text geometry model with TextGeometry.

Const loader = new FontLoader (); loader.load ('. / fonts/helvetiker_regular.typeface.json', font = > {textMesh.geometry = new TextGeometry ('@ dragonir\ nfantastic\ nthree.js\ nart work', {font: font, size: 100, height: 40, curveSegments: 12, bevelEnabled: true, bevelThickness: 30, bevelSize: 8, bevelOffset: 1, bevelSegments: 12}); textMesh.material = material; scene.add (textMesh);})

FontLoader font loader

Using a class that loads fonts in JSON format, it returns Font, and the return value is an array of Shape types representing fonts, which internally uses FileLoader to load files.

Constructor:

FontLoader (manager: LoadingManager)

Manager: the loadingManager used by the loader. The default value is THREE.DefaultLoadingManager.

Methods:

Load loads from URL and passes the loaded texture to onLoad.

.load (url: String, onLoad: Function, onProgress: Function, onError: Function): null.

Url: the URL or path of the file, which can also be Data URI.

OnLoad: will be called when the load is complete. The callback parameter is the texture to be loaded.

OnProgress: will be called during the loading process. The parameter is the XMLHttpRequest instance, which contains total and loaded bytes.

OnError: called when loading an error.

.parse is parsed in JSON format and returns a Font.

.parse (json: Object): Font.

Json: the JSON structure used for parsing.

TextGeometry text geometry

A class for generating text into a single geometry, constructed from a given string of text and parameters consisting of the loaded Font font and the settings in the geometry ExtrudeGeometry parent class.

Constructor:

TextGeometry (text: String, parameters: Object)

Text: the text to be displayed.

Parameters:

Font [Font]: THREE.Font instance.

Size [Float]: font size, default value is 100.

Height [Float]: the thickness of the extruded text, the default is 50.

CurveSegments [Integer]: represents the number of points on the curve of the text. The default value is 12.

BevelEnabled [Boolean]: whether to enable bevel. Default is false.

BevelThickness [Float]: the depth of the text bevel. The default is 20.

BevelSize [Float]: the extension distance between the bevel and the original text outline. The default value is 8.

BevelSegments [Integer]: the number of segments of the bevel. The default value is 3.

You can use facetype.js to convert fonts supported by Three.js online.

Create a geometry model

Decorate the page with the other three built-in geometry model rings, cones, and octahedrons. There are a large number of decorative geometry, in order to effectively improve the performance of the page, you need to pay attention to the following two points:

Use THREE.Group to manage all geometry.

Use BufferAttribute when creating geometry, such as ConeBufferGeometry instead of ConeGeometry, to pass data to GPU more efficiently.

/ / batch modeling method generateRandomMesh = (geometry, material, count) = > {for (let I = 0; I)

< count; i++) { let mesh = new THREE.Mesh(geometry, material); let dist = farDist / 3; let distDouble = dist * 2; // 设置随机的位置和旋转角度 mesh.position.x = Math.random() * distDouble - dist; mesh.position.y = Math.random() * distDouble - dist; mesh.position.z = Math.random() * distDouble - dist; mesh.rotation.x = Math.random() * 2 * Math.PI; mesh.rotation.y = Math.random() * 2 * Math.PI; mesh.rotation.z = Math.random() * 2 * Math.PI; // 手动控制何时重新计算3D变换以获得更好的性能 mesh.matrixAutoUpdate = false; mesh.updateMatrix(); group.add(mesh); }}// 创建100个八面体const octahedronGeometry = new THREE.OctahedronBufferGeometry(80);generateRandomMesh(octahedronGeometry, material, 100);// 创建200个圆环面const torusGeometry = new THREE.TorusBufferGeometry(40, 25, 16, 40);generateRandomMesh(torusGeometry, material, 200);// 创建100个圆锥const coneGeometry = new THREE.ConeBufferGeometry(40, 80, 80);generateRandomMesh(coneGeometry, material, 100);scene.add(group); TorusBufferGeometry 圆环缓冲几何体 用于生成圆环几何体的类。 构造函数： TorusBufferGeometry(radius: Float, tube: Float, radialSegments: Integer, tubularSegments: Integer, arc: Float) radius：圆环的半径，从圆环的中心到管道横截面的中心，默认值是 1。 tube：管道的半径，默认值为 0.4。 radialSegments：圆环的分段数，默认值为 8。 tubularSegments：管道的分段数，默认值为 6。 arc：圆环的圆心角，单位是弧度，默认值为 Math.PI * 2。 ConeBufferGeometry 圆锥缓冲几何体 用于生成圆锥几何体的类。 构造函数： ConeBufferGeometry(radius: Float, height: Float, radialSegments: Integer, heightSegments: Integer, openEnded: Boolean, thetaStart: Float, thetaLength: Float) radius：圆锥底部的半径，默认值为 1。 height：圆锥的高度，默认值为 1。 radialSegments：圆锥侧面周围的分段数，默认为 8。 heightSegments：圆锥侧面沿着其高度的分段数，默认值为 1。 openEnded：指明该圆锥的底面是开放的还是封顶的。默认值为 false，即其底面默认是封顶的。 thetaStart：第一个分段的起始角度，默认为 0。 thetaLength：圆锥底面圆扇区的中心角，通常被称为 θ。默认值是 2*PI，使其成为一个完整的圆锥。 OctahedronBufferGeometry 八面缓冲几何体 用于创建八面体的类。 构造函数： OctahedronBufferGeometry(radius: Float, detail: Integer) radius：八面体的半径，默认值为 1。 detail：默认值为 0，将这个值设为一个大于 0 的数将会为它增加一些顶点，使其不再是一个八面体。 鼠标事件监听 通过对鼠标移动坐标和模型坐标的相互转换来添加鼠标移动和触摸移动事件的监听方法。 const mouseFX = { windowHalfX: window.innerWidth / 2, windowHalfY: window.innerHeight / 2, coordinates: (coordX, coordY) =>

{mouseX = (coordX-mouseFX.windowHalfX) * 5; mouseY = (coordY-mouseFX.windowHalfY) * 5;}, onMouseMove: e = > {mouseFX.coordinates (e.clientX, e.clientY)}, onTouchMove: e = > {mouseFX.coordinates (e.changedTouches [0] .clientX, e.changedTouches [0] .clientY)}}; document.addEventListener ('mousemove', mouseFX.onMouseMove, false); document.addEventListener (' touchmove', mouseFX.onTouchMove, false)

Background color toggle

Use an input [type = 'color'] tag to switch background colors.

HandleInputChange = e = > {this.setState ({backgroundColor: e.target.value});}

Post rendering

For more visual impact, I added a fault-style post-rendering effect and used a button switch to turn the effect on and off.

Composer = new EffectComposer (renderer); composer.addPass (new RenderPass (scene, camera)); glitchPass = new GlitchPass (); composer.addPass (glitchPass); handleRenderChange = () = > {this.setState ({renderGlithPass:! this.state.renderGlithPass});}

Post rendering

Three.js post-rendering processing is the process of achieving the desired visual effect by overlaying rendering channels. The implementation process is as follows:

Create an effect combiner: the effect combiner is the entrance to various processing channels, using the EffectComposer object to create an effect combiner.

Add Channel: add a RenderPass channel that will render a new scene based on the specified scene and camera.

Combiner update: in the animation loop, the render method of the effect combiner is called, and the channel generation effect is output in the scene.

GlitchPass fault style channel

The GlitchPass channel produces a failure-like effect with only one optional configuration parameter:

GoWild this property receives a Boolean value that specifies whether the electromagnetic storm effect persists.

Three.js provides a lot of post-processing channels that can be used directly. The ShaderPass channel is also provided, which supports the use of custom Shader to create advanced custom post-processing channels.

Animation

Update the scene, camera, and post-render channels in requestAnimationFrame.

Function animate () {requestAnimationFrame (animate); camera.position.x + = (mouseX-camera.position.x) * 0.05; camera.position.y + = (mouseY *-1-camera.position.y) * 0.05; camera.lookAt (scene.position); / / add rotation animation const t = Date.now () * 0.001; const rx = Math.sin (t * 0.7) * 0.5 to cube and font meshes in the scene Const ry = Math.sin (t * 0.3) * 0.5; const rz = Math.sin (t * 0.2) * 0.5; group.rotation.x = rx; group.rotation.y = ry; group.rotation.z = rz; textMesh.rotation.x = ry; textMesh.rotation.z = rx; renderer.render (scene, camera); / / Update post rendering channel composer.render ();} scale fit

Renderer and composer are resized at the same time.

Window.addEventListener ('resize', () = > {camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix (); renderer.setSize (window.innerWidth, window.innerHeight); composer.setSize (window.innerWidth, window.innerHeight);}, false); double-click full screen

Listen to the page mouse double-click the dblclick event to enter or exit the full screen state by calling requestFullscreen and exitFullscreen.

Window.addEventListener ('dblclick', ()) = > {let fullscreenElement = document.fullscreenElement | | document.webkitFullscreenElement; if (! fullscreenElement) {if (canvas.requestFullscreen) {canvas.requestFullscreen ();} else if (canvas.webkitRequestFullscreen) {canvas.webkitRequestFullscreen ();} console.log (' enter full screen')} else {if (document.exitFullscreen) {document.exitFullscreen () } else if (document.webkitExitFullscreen) {document.webkitExitFullscreen ();} console.log ('exit full screen')})

Element.requestFullscreen

The Element.requestFullscreen method is used to issue an asynchronous request to put the element into full-screen mode. Calling this API does not guarantee that the element will enter full-screen mode. If the element is allowed to enter full-screen mode, the returned Promise will resolve and the element will receive a fullscreenchange event notifying it that it has entered full-screen mode. If the full-screen request is rejected, the returned promise becomes rejected and the element receives a fullscreenerror event. If the element has been detached from the original document, the document will receive these events.

Syntax:

Var Promise = Element.requestFullscreen (options)

Options: optionally, a FullscreenOptions object provides the control option to switch to full screen mode.

This method can only be called when the user interacts or the direction of the device changes, otherwise it will fail. Currently, the only option for FullscreenOptions is navigationUI, which controls whether the navigation bar UI is displayed when the element is in full screen mode. The default value is auto, indicating that it is up to the browser to decide whether or not to display the navigation bar.

Document.exitFullscreen

The Document.exitFullscreen method is used to take the current document out of full-screen mode. Calling this method pushes the document back to the state it was before the last time the Element.requestFullscreen method was called into full-screen mode.

Syntax:

Document.exitFullscreen (); "how to use Three.js+React to achieve 3D text suspension effect" content is introduced here, thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.