This is the 10th day of my participation in the More text Challenge. For more details, see more text Challenge

序

In the process of the development of the web front end, the requirements for visualization have become higher and higher

The effect of VR panorama can also be realized in the web page, you can also experience a “immersive” feeling on the web page without wearing a VR devicePanoramic vision

In my ThreeJS blog series, I’ve written a post about how to make panoramic effects, but only the first half of the collection (although that’s important)

This is the address of my ThreeJs series, if you are interested in page 3D, you can go to blog.csdn.net/qq_36171287…

The previous article on VR is (the effect is ok) : “Three.js Miscellaneous (7) — Panorama Effect Creation · Top (including Python tile, Canvas recombination)”

The text start

Since it has been a long time since the last panorama article, I will use a different panorama scene to demonstrate this time. The principle is the same. This project uses vue CLI setup, so there is no script import like before

The introduction of threeJs

The first is threeJS library, which must be installed or script imported. This time I install the import in the vue project by:

• NPM installs the three.js dependency

npm install three --save-dev
Copy the code

• Yarn installs the three.js dependency

yarn add three --dev
Copy the code

In main.js, introduce:

import * as THREE from 'three';
Vue.use(THREE)
Copy the code

Or import it directly when using:

const THREE = require('three')
Copy the code

Run the project, open the page, type __THREE__ in the console, and you can see the version number of THREE

Material collection

This part of the content is to collect the six images needed for panorama, front, back, left, right, top and bottom. The specific operation has been included in “Three.js Miscellaneous (vii) — Panorama Effect Production (including Python Reptile stealing fragments, Canvas recombination)”, and I will not repeat the narration here

The final collected pictures are as follows:

Realize the principle of

The principle of the panorama is to create a sphere/cube and attach a special background image to its surface, then place the camera in the center of the sphere/cube and listen for finger drag/gyro movement to change the face of the camera

I used the method of building a cube, so six faces are needed, and the camera is placed in the center of the cube, so the six faces need to be connected well, so the requirement of picture material is high, or you can take a picture and cut it.

Implementation steps

The first step is to initialize the scene data of THREE and add:

data() {
    return {
        scene: null./ / the scene
        camera: null./ / the camera
        render:null./ / the renderer
        controls:null.// Mouse control
    };
},
Copy the code

Add initialization method:

// Initialize the scenario required by THREE
init() {
    this.scene = new THREE.Scene();  
    this.camera = new THREE.PerspectiveCamera(45.window.innerWidth / window.innerHeight, 1.10000);
    this.render = new THREE.WebGLRenderer({
        antialias: true
    });
    this.render.setPixelRatio(window.devicePixelRatio);  // Set the device pixel ratio. Commonly used to avoid drawing blur on HiDPI devices
    this.render.setSize(window.innerWidth, window.innerHeight) // Set the size of the THREE scene to the entire page
    var app = document.getElementById("threedemo");  
    app.appendChild(this.render.domElement);  // Add the scene to the DOM
    this.camera.position.set(200.0.0);  // Camera placement
}
Copy the code

Once this is done, the page will be completely black

The next step is to create the scene map by overlaying the previous image on top of the scene and making the background of the scene a CubeTextureLoader cube

CubeTextureLoader: a class that loads CubeTexture. Internally use ImageLoader to load files

initImg() {
    // Create scene map
	this.scene.background = new THREE.CubeTextureLoader()
	.setPath( '.. /RESULT/' )
	.load( [ 'w04.png'.'w05.png'.'w06.png'.'w02.png'.'w01.png'.'w03.png']); },Copy the code

Update method:

animate() {
    this.controls.update();
    this.render.render(this.scene, this.camera);
    window.requestAnimationFrame(this.animate);
}
Copy the code

Fourth, because it is a panoramic effect, the mouse should be able to drag the view

But this requires the support of THREE.OrbitControls

OrbitControls

Orbit controls allow the camera to orbit around a target.

To use this, as with all files in the /examples directory, you will have to include the file seperately in your HTML.

Use NPM or yarn to download the command: NPM install three-orbitcontrols

Usage:

const OrbitControls = require('three-orbitcontrols')

// The mouse control is set in the init method
this.controls = new OrbitControls(this.camera, this.render.domElement); // Create the control object
Copy the code

The basic panorama is complete

Through the above steps, the basic panoramic effect has been completed, let’s finish the result of Kangkang:

Complete Vue code

<template>
  <div id="threedemo">
  </div>
</template>

<script>
const THREE = require('three')
const OrbitControls = require('three-orbitcontrols')
export default {
    name: "threedemo".props: {},
    data() {
        return {
            scene: null./ / the scene
            camera: null./ / the camera
            render:null./ / the renderer
            controls:null.// Mouse control
        };
    },
    mounted() {
        this.init();
        this.initImg();
        this.animate();
    },
    watch: {},
    methods: {
        // Initialize the scenario required by THREE
        init() {
            this.scene = new THREE.Scene();  
            this.camera = new THREE.PerspectiveCamera(45.window.innerWidth / window.innerHeight, 1.10000);
            this.render = new THREE.WebGLRenderer({
                antialias: true
            });
            this.render.setPixelRatio(window.devicePixelRatio);  // Set the device pixel ratio. Commonly used to avoid drawing blur on HiDPI devices
            this.render.setSize(window.innerWidth, window.innerHeight) // Set the size of the THREE scene to the entire page
            var app = document.getElementById("threedemo");  
            app.appendChild(this.render.domElement);  // Add the scene to the DOM
            this.camera.position.set(200.0.0);  // Camera placement
            // Mouse control
			this.controls = new OrbitControls(this.camera, this.render.domElement); // Create the control object
        },
        initImg() {
            // Create scene map
			this.scene.background = new THREE.CubeTextureLoader()
			.setPath( '.. /RESULT/' )
				.load( [ 'w04.png'.'w05.png'.'w06.png'.'w02.png'.'w01.png'.'w03.png']); },animate() {
            this.controls.update();
            this.render.render(this.scene, this.camera);
            window.requestAnimationFrame(this.animate); }},components: {},
    computed: {}};</script>
<style scoped>
    #threedemo {
        overflow: hidden;
    }
</style>
Copy the code

conclusion

This VR instance actually belongs to the kind that looks lofty, but the actual operation is relatively simple

If you’ve learned anything about ThreeJS, it’s pretty easy to get started

So we do not think that VR effect is difficult to achieve, in fact, their simple operation can also be completed, might as well try it