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

This article mainly introduces "how to use vue3+threejs to imitate iView official website big wave special effects". In daily operation, I believe many people have doubts about how to use vue3+threejs to imitate iView official website big wave special effects. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for everyone to answer the doubts about "how to use vue3+threejs to imitate iView official website big wave special effects". Next, please follow the editor to study!

Preface

Threejs can be understood as a web 3D engine (rendering model, data visualization). If you have come into contact with game engines such as UnralEngine 4 (Unreal IV), it should be easy to understand every necessary part in a 3D scene (scene, renderer, mesh model, material, light source, color camera). All right, let's skip the basic knowledge and go straight to the process of implementation.

First, the effect picture

First, go to the final effect picture:

For specific results, please refer to iview's official interface iView-a set of high-quality UI component libraries.

The big wave effect is an official example of three.js. You need to install three.js support first. For more information, please see the official instance three.js examples (threejs.org).

II. Code

1. Install threejs

Npm install-save three

two。 Code (replication available) create a new component waves.vue in the components folder, which can be run directly as follows:

Import * as THREE from "three"; display the fps box / / import Stats from ". / stats.module" in the upper right corner; import {onMounted} from "vue" Export default {props: {/ / controls the length of x-axis waves amountX: {type: Number, default: 50,}, / / controls the length of y-axis waves amountY: {type: Number, default: 50,}, / / Control point color color: {type: String, default: "# 097bdb",} / / controls the position of the waves top: {type: Number, default: 350,350,},}, setup (props) {const SEPARATION = 100 / / let stats; let container, camera, scene, renderer; let particles, count = 0; let mouseX = 0; let windowHalfX = window.innerWidth / 2; function init () {container = document.createElement ("div"); document.getElementById ("iviewBg") .appendChild (container) / / create perspective camera camera = new THREE.PerspectiveCamera (75, / / camera cone vertical field angle window.innerWidth / window.innerHeight, / / camera cone aspect ratio 1, / / camera cone proximal face 10000 / camera cone distal face); / / set camera z-axis visual field camera.position.z = 1000 / / create the scene scene = new THREE.Scene (); const numParticles = props.amountX * props.amountY; const positions = new Float32Array (numParticles * 3); const scales = new Float32Array (numParticles); let I = 0, j = 0; / / initialize the particle position and size for (let ix = 0; ix

< props.amountX; ix++) { for (let iy = 0; iy < props.amountY; iy++) { positions[i] = ix * SEPARATION - (props.amountX * SEPARATION) / 2; // x positions[i + 1] = 0; // y positions[i + 2] = iy * SEPARATION - (props.amountY * SEPARATION) / 2; // z scales[j] = 1; i += 3; j++; } } //是面片、线或点几何体的有效表述。包括顶点位置，面片索引、法相量、颜色值、UV 坐标和自定义缓存属性值。使用 BufferGeometry 可以有效减少向 GPU 传输上述数据所需的开销 const geometry = new THREE.BufferGeometry(); geometry.setAttribute( "position", new THREE.BufferAttribute(positions, 3) ); geometry.setAttribute("scale", new THREE.BufferAttribute(scales, 1)); //着色器材质(ShaderMaterial),设置球的大小，颜色，等 const material = new THREE.ShaderMaterial({ uniforms: { //设置球的颜色 color: { value: new THREE.Color(props.color) }, }, //控制球的大小 vertexShader: "attribute float scale; void main() {vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );gl_PointSize = scale * ( 300.0 / - mvPosition.z );gl_Position = projectionMatrix * mvPosition;}", fragmentShader: "uniform vec3 color;void main() {if ( length( gl_PointCoord - vec2( 0.5, 0.5 ) ) >

0.475) discard;gl_FragColor = vec4 (color, 0.475);} ",}); / / A class for displaying points. Particles = new THREE.Points (geometry, material); / / add points scene.add (particles) to the scene; / / whether alpha-canvas contains alpha (transparency). The default is false. / / the background color of the renderer is black by default, and the background color of the renderer is set to transparent renderer = new THREE.WebGLRenderer ({antialias: true, alpha: true}); renderer.setPixelRatio (window.devicePixelRatio); renderer.setClearAlpha (0); renderer.setSize (window.innerWidth, window.innerHeight); container.appendChild (renderer.domElement); / / display the upper right corner fps box / / stats = new Stats () / / container.appendChild (stats.dom); container.style.touchAction = "none"; / / listen for mouse movement event container.addEventListener ("pointermove", onPointerMove); / / adjust the position of waves container.style.position = "relative"; container.style.top = `$ {props.top} px`; window.addEventListener ("resize", onWindowResize) } function render () {camera.position.x + = (mouseX-camera.position.x) * 0.05; camera.position.y = 400; camera.lookAt (scene.position); const positions = particles.geometry.attributes.position.array; const scales = particles.geometry.attributes.scale.array; / / set particle position and size let I = 0, j = 0; for (let ix = 0; ix)

< props.amountX; ix++) { for (let iy = 0; iy < props.amountY; iy++) { positions[i + 1] = Math.sin((ix + count) * 0.3) * 50 + Math.sin((iy + count) * 0.5) * 50; scales[j] = (Math.sin((ix + count) * 0.3) + 1) * 10 + (Math.sin((iy + count) * 0.5) + 1) * 10; i += 3; j++; } } particles.geometry.attributes.position.needsUpdate = true; particles.geometry.attributes.scale.needsUpdate = true; renderer.render(scene, camera); count += 0.1; } function onWindowResize() { windowHalfX = window.innerWidth / 2; camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } //监听鼠标移动事件 function onPointerMove(event) { console.log(event); if (event.isPrimary === false) return; mouseX = event.clientX - windowHalfX; } function animate() { requestAnimationFrame(animate); render(); //fps 实时更新 // stats.update(); } onMounted(() =>

{init (); animate ();}); return {};},}; # iviewBg {width: 100%; height: 100vh; background: url (".. / assets/wavesBg.png") no-repeat; overflow: hidden;}

3. Use

Introduce component usage directly in the login login page

Import wavesBg from ".. / components/wavesBg"; export default {name: "", components: {wavesBg,}, setup () {return {};},}; III. Background picture material

If it is not clear, you can go to the official interface f12 to get it, iView-a set of high-quality UI component library

As shown in the following figure

At this point, the study on "how to use vue3+threejs to achieve the big wave effect of imitating iView official website" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.