Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge points of this article "React+Threejs+Swiper how to achieve panoramic effect", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to achieve panoramic effect in React+Threejs+Swiper" article.

Panoramic effect realization

   has the above hint, and friends who know a little bit about threejs may have guessed that the panoramic effect is actually achieved by using a sphere ~ and we just put a texture map on the inner surface of the sphere (you can see the sphere by rolling the wheel out, it looks like a glass ball, it looks funny, and there's an egg? well, it's not an egg when you say it):

At the beginning of   , our viewing angle is in the center of the sphere, and the movement of viewing angle is controlled by OrbitControls, a tool provided by threejs.

  , then the code to create the sphere is as follows:

Const geometry = new THREE.SphereBufferGeometry (500,32,32); geometry.scale (- 1,1,1); / / backpaste the texture to const material = new THREE.MeshBasicMaterial ({map: new THREE.TextureLoader (). Load (imglist [0] .default) / / the URL or path passed into the image, which can also be Data URI.}; const mesh = new THREE.Mesh (geometry, material); scene.add (mesh); const controls = new OrbitControls (camera, renderer.domElement) Controls.enablePan = false;controls.maxDistance = 1000

If you don't know what Data URI is, you can take a look at the MDN documentation.

Broadcast map

   carousel graph implementation is the use of swiper this library, it is very convenient to use, the specific can consult the documentation.

When    slides the rotation map, it triggers an onSliderChange event, which passes the current swiper as a parameter, and we can obtain the image and replace the texture map of the sphere through the currently active element:

OnSliderChange = curSwiper = > {const mesh = this.mesh; const texture = imglist [curSwiper.activeIndex] .default; mesh.material.map = new THREE.TextureLoader () .load (texture);}

Below    are my swiper settings, where SwiperSlider is a slideable broadcast card, EffectCoverflow is the effect that is triggered when sliding, and swiper provides four optional effects: Fade, Coverflow, Flip, and Cube. Imglist is a set of pictures, where the imglist [I]. Default attribute holds the base64 encoding of the picture.

Import {Swiper, SwiperSlide} from 'swiper/react';import SwiperCore, {EffectCoverflow} from' swiper';import 'swiper/swiper.min.css';import' swiper/components/effect-coverflow/effect-coverflow.min.css';SwiperCore.use ([EffectCoverflow]); / /. Console.log (swiper)} / / callback direction='vertical' / / carousel graph direction triggered during initial loading. The default is horizontal horizontal effect= {'coverflow'} / / sliding effect grabCursor= {true} / / whether the mouse over the carousel graph shows whether the dragged centeredSlides= {true} / / currently active picture should be centered on the coverflowEffect= {{/ / coverflow effect parameter setting. Can adjust "rotate": 50, "stretch": 0, "depth": 100, "modifier": 1, "slideShadows": true}} {imglist.map ((img, idx) = > {return)

})}

So much for the realization of    panoramic effect. Of course, if you have any questions, you can leave a message or refer to my code (posted below). As long as you have some knowledge of threejs and react, I believe it is not difficult to achieve such an effect, and the amount of code is very small.

Complete code

Import React, {Component} from 'react';import Layout from' @ theme/Layout';import Head from'@ docusaurus/Head';import * as THREE from 'three';import {OrbitControls} from' three/examples/jsm/controls/OrbitControls';import * as _ from 'underscore';import {message} from' antd';import {Swiper, SwiperSlide} from 'swiper/react';import SwiperCore, {EffectCoverflow} from' swiper';import 'swiper/swiper.min.css';import' swiper/components/effect-coverflow/effect-coverflow.min.css' Import'. / index.css';import imgs from'. / imgs.json';SwiperCore.use ([EffectCoverflow]); const imglist = imgs.map (img = > {return require ('.. / static/img/panoramic/' + img.name);}); export default class Panormatic extends Component {constructor () {super (); this.renderer = null; this.camera = null; this.scene = null; this.container = null This.controls = null; this.showMessage = true; / / Egg Tip} componentDidMount () {const container = document.getElementById ('panoramic-canvas-container'); const canvas = document.getElementById (' panoramic-canvas'); const renderer = new THREE.WebGLRenderer ({canvas, antialias: true}); renderer.setClearColor (0xffffff); / / b2e0df mung bean renderer.setPixelRatio (window.devicePixelRatio) Const height = container.clientHeight; const width = container.clientWidth; renderer.setSize (width, height); const camera = new THREE.PerspectiveCamera (60, width / height, 1, 30000); camera.position.set (0,0,1); camera.center = new THREE.Vector3 (0,0,0); const scene = new THREE.Scene (); const geometry = new THREE.SphereBufferGeometry (500,32,32) Geometry.scale (- 1,1,1); / / reverse texture const material = new THREE.MeshBasicMaterial ({map: new THREE.TextureLoader (). Load (imglist [0] .default)}); const mesh = new THREE.Mesh (geometry, material); scene.add (mesh); const controls = new OrbitControls (camera, renderer.domElement); / / controls.enableZoom = false Controls.enablePan = false; controls.maxDistance = 1000; this.renderer = renderer; this.camera = camera; this.scene = scene; this.container = container; this.controls = controls; this.mesh = mesh / / set the global configuration of the prompt box message.config ({top: 100,3.5, maxCount: 1,}); this.onControlsChange = _ .throttle (this.onChange, 100); controls.addEventListener ('change', this.onControlsChange); window.addEventListener (' resize', this.onWindowResize); this.renderLoop () } componentWillUnmount () {const mesh = this.mesh; mesh.material.dispose (); mesh.geometry.dispose (); this.scene.remove (mesh); window.removeEventListener ('resize', this.onWindowResize); this.controls.removeEventListener (' change', this.onControlsChange); message.destroy ();} onChange = (e) = > {const camera = this.camera If (camera.position.distanceTo (camera.center) > = 700) {if (this.showMessage) {message.success ('? Congratulations on discovering the little secret of panoramic effect: this.showMessage = false;} else {this.showMessage = true;} onSliderChange = (curSwiper) = > {const mesh = this.mesh; const texture = imglist [curSwiper.activeIndex] .default; mesh.material.map = new THREE.TextureLoader (). Load (texture);} OnWindowResize = () = > {const camera = this.camera; const renderer = this.renderer; const width = this.container.clientWidth; const height = this.container.clientHeight; camera.aspect = width / height; camera.updateProjectionMatrix (); renderer.setSize (width, height);}; renderLoop = () = > {this.renderer.render (this.scene, this.camera) RequestAnimationFrame (this.renderLoop);} Render () {return (panorama | Yle console.log (swiper)} direction='vertical' effect= {'coverflow'} GrabCursor= {true} centeredSlides= {true} coverflowEffect= {{"rotate": 50 "stretch": 0, "depth": 100, "modifier": 1 "slideShadows": true}} > {imglist.map ((img, idx) = > {return

})}) }} the above is the content of this article on "how to achieve panoramic effect in React+Threejs+Swiper". I believe we all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

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.