start

After learning three.js for a while, you can try to create a VR panorama.





It was already near the end of 2020, so let’s make a scene effect of Chinese New Year, similar to the VR panorama on the web page



There must be a target, VR panorama needs to determine a location, I am in jiangnan, then jiangnan town to make the background layout of three. And jiangnan town, but the Internet is probably the typical wuzhen, location get

Here’s a preview of the effect:

At the end of 2020, the effect production has been completed. Because too large pictures cannot be uploaded, I deleted the frames during GIF production, which seemed to be stuck

Can download in network location of the project: pan.baidu.com/s/1cmDsGEUl…

Extraction code: YVjq





Effect:



layout

Three. Js needs a Scene, which is set by the background property of the Scene. Such setting can keep the camera within the background

The scene can be set using three.cubetextureLoader to:

var scene = new THREE.Scene(); Scene. Background = new three.cubetextureLoader ().setPath('img/').load(['w04.png', 'w05.png', 'w06.png', 'w02.png', 'w01.png', 'w03.png' ] );Copy the code

The picture —– is at the end of this article

However, watermarks will appear when the pictures I provided are uploaded to CSDN. If you want watermarked pictures, you can also find them from the project in Baidu web disk, or obtain suitable pictures through my later methods (Python crawler gets pictures on the Internet).

Once the scene is set up, you can use OrbitControls.js if you want to rotate it left and right

<script SRC ="js/ orbitControls.js "type="text/javascript" charset=" UTF-8 "></script> // mouse control var controls = new THREE.OrbitControls(camera, render.domElement); // Create controls.update(); // Update method, written in the animation methodCopy the code

Image retrieval (Python)

Although the essence of the scene is a cube box, the pictures on the six faces of the cube need to be seamless. Besides, I chose Wuzhen as the background, so MY first choice is to find the pictures from the Internet and “steal” the pictures from the website



The website I unfortunately chose is ——–Panoramic vision

The scene I chose:Wuzhen – Xishan Scenic Area





But how to steal the image, the scene tag is canvas, can not directly copy the image

Here you can see the pictures provided by the other party’s server in the network, another plan to pass, hahaha



But how could the other side not guard against one hand, six sides of the picture was shredded, one picture was cut into 9 pieces (this is also later I climbed down the picture after regrouping to find). Nine equal levels of theft…





At that time I a face meng, wow, that how to do, with the mouse click a download under less than 10 I can not stand, download all delete.

Take the easy way out. Front-end programmers who don’t know Python are not good fish.

Start stealing Python diagrams:

first

Select images and look at the patterns between these image urls. There must be patterns

After looking at a few images, I noticed that the images had a common prefix:360. quanjing.com/ul/nd/qp610…

The following is made up of one of the six letters [‘ R ‘, ‘L’, ‘u’, ‘D’, ‘b’, ‘F’]

For composition analysis after [‘/l1/1 / l1_ ‘, ‘/ l2/1 / l2_’, ‘/ l1/2 / l1_’, ‘/ l2/2 / l2_’, ‘/ l1/3 / l1_’, ‘/ l2/3 / l2_] in a certain

The last two digits are between 1_1 and 3_3 after the name of the picture



So you can write a method that iterates through all the image urls

arr = []
def getArr() :
    rootPath = 'https://360.quanjing.com/ul/nd/QP61029957/';
    for i in ['r'.'l'.'u'.'d'.'b'.'f'] :for j in ['/l1/1/l1_'.'/l2/1/l2_'.'/l1/2/l1_'.'/l2/2/l2_'.'/l1/3/l1_'.'/l2/3/l2_'] :for z in range(1.4) :for k in range(1.4):
                    arr.append(rootPath + i + j + i + "_" + str(z) + "_" + str(k) + ".jpg" )
    # print(arr)
Copy the code

second

The best thing a Python crawler can do is access urls. There is an URllib library in Python, and you can complete the download step directly through the URlRetrieve of the urllib.request method. To use this method, you need to specify an address where the image will be stored after downloading

Here’s the code for the python crawler directly:

import requests
import re
import time
import random
import urllib.request
import os

arr = []
def getArr() :
    rootPath = 'https://360.quanjing.com/ul/nd/QP61029957/';
    for i in ['r'.'l'.'u'.'d'.'b'.'f'] :for j in ['/l1/1/l1_'.'/l2/1/l2_'.'/l1/2/l1_'.'/l2/2/l2_'.'/l1/3/l1_'.'/l2/3/l2_'] :for z in range(1.4) :for k in range(1.4):
                    arr.append(rootPath + i + j + i + "_" + str(z) + "_" + str(k) + ".jpg" )

def getimg(arr,topath) :
    for url in arr:
        # Download images to local storage
        path = os.path.join(topath, url.rsplit("/",maxsplit=1) [1])
        print(path)
        try:
            urllib.request.urlretrieve(url, filename=path)
        except Exception as e:
            print(e)
        # time.sleep(1)


if __name__ == '__main__':

    headers = {
        'User-Agent': 'the Mozilla / 5.0 (Windows NT 6.1; Win64; X64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 Safari/537.36'
    }
    getArr()
    toPath = R 'e :\ Working Document 04\ Photo Material \ Wuzhen '
    getimg(arr, toPath)
Copy the code

Climb down the picture:

third

But what if the stolen image is broken? The CubeTextureLoader method in three.js can only pass 6 images

  • Method 1: Use PHOTOSHOP to splice images together. But I am a lazy person, so it is too inefficient to do the image, and the picture is regular, there must be a more convenient way
  • Method 2: Use canvas to splice images and copy the images from canvas

Methods:

<! DOCTYPEhtml>
<html>
	<head>
		<meta charset="utf-8">
		<title>Canvas composite image</title>
		<style type="text/css">
			#app {
				margin: 80px;
				border: 1px solid black;
			}
			#aa{
				width: 500px;
				height: 400px;
			}
		</style>
	</head>
	<body>
		<canvas id="app" width="1280" height="1280">
		</canvas>
		<button onclick="createImg()">download</button>
		<img id="aa" />
		<script type="text/javascript">
			var abc = ['l2_b_'.'l2_d_'.'l2_f_'.'l2_l_'.'l2_r_'.'l2_u_'];
			var imgSrcArray = [];
			for (var i = 0; i < abc.length; i++) {
				for (var j = 1; j < 4; j++) {
					for (var k = 1; k < 4; k++) {
						// Image address. The prefix can be the place where the broken image is stored
						let jpgsrc = '.. /img/wuzhen/' + abc[i] + j + '_' + k + '.jpg'; imgSrcArray.push(jpgsrc); }}}var canvas = document.getElementById('app');
			var ctx = canvas.getContext('2d');
			// Define a picture object
			function ImageDraw(x, y, src, callback) { 
				this.img = new Image();
				this.img.src = src;
				var self = this;
				this.x = x;
				this.y = y;
				this.img.onload = function(){
					console.log(self.img, self.x, self.y)
					ctx.drawImage(self.img, self.x, self.y);
					ctx.save();
					if(typeof callback == "function") callback(); }}function createImg(){
				var strDataURI = canvas.toDataURL("image/png");  // The toDataURL method converts canvas content to an image
				var dataImg = new Image();
				dataImg.src = strDataURI;   //strDataURI is the combined image address
				document.getElementById('aa').src = strDataURI;
				// You can download it directly from the web
			}
			// Every 9 images can make a complete image
			var img1 = new ImageDraw(0.0,      imgSrcArray[0]);
			var img2 = new ImageDraw(512.0,    imgSrcArray[1]);
			var img3 = new ImageDraw(1024.0,   imgSrcArray[2]);
			var img4 = new ImageDraw(0.512,    imgSrcArray[3]);
			var img5 = new ImageDraw(512.512,  imgSrcArray[4]);
			var img6 = new ImageDraw(1024.512, imgSrcArray[5]);
			var img7 = new ImageDraw(0.1024,   imgSrcArray[6]);
			var img8 = new ImageDraw(512.1024, imgSrcArray[7]);
			var img9 = new ImageDraw(1024.1024,imgSrcArray[8]);
		</script>
	</body>
</html>
Copy the code

Through this series of steps, I have completed the process of stealing the VR image from the Panorama Vision website



I’m too tired to write here. Let’s stop now

To be continued… (Golden Torment: You’ll never Reach the finished truth)

Spliced picture

  • w01

  • w02

  • w03

  • w04

  • w05

  • w06