Three.js Verschiedene Hinweise (7) -Panoramic Effect Production · Upper (einschließlich Python-Crawler, der Bilder stiehlt, Bilder zur Reorganisation der Leinwand)

Loslegen

Nachdem Sie für einen bestimmten Zeitraum drei.js gelernt haben, können Sie versuchen, einen VR-Panoramaeffekt zu erzielen.


Zu diesem Zeitpunkt war es kurz vor Ende 2020. Lassen Sie uns einen Neujahrsszeneneffekt erzielen. Er ähnelt dem VR-Panorama auf der Webseite. Es

muss ein Ziel geben. Das VR-Panorama muss einen Ort bestimmen in Jiangnan, dann nimm es. Die kleine Stadt in Jiangnan wird das Hintergrundlayout von three.js machen! Es gibt viele kleine Städte in Jiangnan, aber die typische Internet-Stadt ist Wuzhen. Die Lage ist zu bekommen

Lassen Sie uns den Effekt im Voraus zeigen:

Ende 2020 wurde die Produktion des Effekts abgeschlossen, da ich keine zu großen Bilder hochladen kann. Daher habe ich das Rahmenbild beim Erstellen des Gifs ausgeschnitten. Es sieht etwas fest aus

Das Projekt kann auf die Netzwerkdiskette heruntergeladen werden: https://pan.baidu.com/s/1cmDsGEUlBJsvJTJQcmFxpw

Extraktionscode: yvjq-


Effekt:

Layout

Three.js benötigt eine Szene. Die Produktion dieser Szene wird durch die Hintergrundeigenschaft von Szene festgelegt. Diese Einstellung kann verhindern, dass die Kamera über den Hintergrund hinausgeht. Wenn Sie die Kamera nur in eine Würfelbox legen, wird möglicherweise "Stanzen" angezeigt. Das Phänomen

Die Szene kann mit THREE.CubeTextureLoader wie folgt eingestellt werden:

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' ] ); 

Bild ----- am Ende dieses Artikels

Wenn die von mir bereitgestellten Bilder jedoch in CSDN hochgeladen werden, gibt es Wasserzeichen. Wenn Sie Bilder ohne Wasserzeichen möchten, können Sie diese auch aus dem Baidu-Netzwerkdatenträgerprojekt finden oder über meine spätere Methode geeignete Bilder erhalten (Python-Crawler erhält Online-Bilder )

Wenn Sie nach dem Anlegen der Szene nach links und rechts drehen möchten, um sie anzuzeigen, können Sie OrbitControls.js verwenden

<script src="js/OrbitControls.js" type="text/javascript" charset="utf-8"></script>
// 鼠标控件
var controls = new THREE.OrbitControls(camera, render.domElement); //创建控件对象
controls.update();  //更新方法，写在动画方法内

Bilderfassung (Python)

Die Produktion von VR-Szenen stellt hohe Anforderungen an Bilder. Obwohl die Essenz der Szene eine Würfelbox ist, müssen die Bilder auf den sechs Seiten des Würfels nahtlos miteinander verbunden werden, und ich habe Wuzhen als Hintergrund gewählt, daher ist meine erste Wahl Um Bilder aus dem Internet zu finden, "stehlen" Sie das Bild von der Website.

Die Website, die ich leider ausgewählt habe -------- Panorama Vision
. Die Szene, die ich ausgewählt habe: Wuzhen-Xishan Scenic Area.


Aber wie stehle ich das Bild Das Etikett in der Szene ist Leinwand, nicht direkt Kopieren Sie das Bild.
Hier sehen Sie das Bild, das vom anderen Server im Netzwerk bereitgestellt wurde. Wieder einmal wird der Plan verabschiedet, hahaha,

aber wie konnte sich die andere Seite nicht davor schützen Das sechsseitige Bild wurde zerhackt und ein Bild in 9 Teile geschnitten (dies wurde auch entdeckt, nachdem ich heruntergeklettert und das Bild neu organisiert hatte). Diebstahlsicherung in neun Abteilungen ...


Zu dieser Zeit war ich fassungslos, wow, was soll ich tun? Ich kann es nicht ertragen, wenn ich mit der Maus weniger als 10 nacheinander angeklickt und heruntergeladen habe. Alle Downloads wurden gelöscht .
Wählen Sie dann eine weniger arbeitssparende Methode: Ein Front-End-Programmierer, der Python nicht kennt, ist kein guter Fischer.

Beginnen Sie die Straße des Python-Diebstahls von Bildern:

zuerst

Wählen Sie das Bild aus, um das Gesetz zwischen diesen Bildern anzuzeigen. URL. Diese Bilder müssen das Gesetz
https://360.quanjing.com/ul/nd/QP61029957/ haben. Nachdem ich einige gelesen hatte, stellte ich fest, dass Bilder ein gemeinsames Präfix haben,
nachdem Is zusammengesetzt ist einer der sechs Buchstaben von ['r', 'l', 'u', 'd', 'b', 'f'].
Nach der Analyse besteht er aus ['/ l1 / 1 / l1_', Eins von '/ l2 / 1 / l2 _', '/ l1 / 2 / l1 _', '/ l2 / 2 / l2 _', '/ l1 / 3 / l1 _', '/ l2 / 3 / l2_'] ist das
letzte Es ist die letzten beiden Ziffern des Bildnamens zwischen 1_1 und 3_3,

sodass Sie eine Methode schreiben können, um alle Bild-URL-Adressen zu durchlaufen

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)

zweite

Wenn Sie die URL des Bildes kennen, ist dies einfach zu handhaben. Der Python-Crawler
greift am besten auf die URL-Adresse zu . In Python befindet sich eine Urllib-Bibliothek, und der Download-Schritt kann direkt über das URL-Abrufen der Methode urllib.request ausgeführt werden .
Wenn Sie diese Methode verwenden, müssen Sie eine Adresse angeben, an der das heruntergeladene Bild gespeichert wird

Der folgende Code direkt auf dem Python-Crawler:

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:
        # 把图片下载到本地存储
        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': '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:\工作文件04\图片素材\乌镇'
    getimg(arr, toPath)

Bild kroch runter:

dritte

Aber was soll ich tun, wenn die gestohlenen Bilder beschädigt sind? Der CubeTextureLoader-Methodenparameter in three.js kann nur 6 Bilder übergeben, und Sie können nicht alle fehlerhaften Bilder übergeben.
Als Nächstes kann ich nur die Bilder neu kombinieren.

• Weg 1: Verwenden Sie ps, um die Bilder einzeln zusammenzufügen. Aber ich bin ein fauler Mensch, es scheint zu ineffizient zu sein, und die Bilder sind auch regelmäßig, es muss einen bequemeren Weg geben
• Straße 2: Verwenden Sie Leinwand, um Bilder zu nähen, und kopieren Sie dann die Leinwand

Methode:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>canvas合成图片</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()">下载</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++) {
     
     
						// 图片地址，前缀可以是碎图存放的地方
						let jpgsrc = '../img/wuzhen/' + abc[i] + j + '_' + k + '.jpg';
						imgSrcArray.push(jpgsrc);
					}
				}
			}

			var canvas = document.getElementById('app');
			var ctx = canvas.getContext('2d');
			// 定义一个图片对象
			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");  //toDataURL方法可以将canvas内容变成图片
				var dataImg = new Image();
				dataImg.src = strDataURI;   //strDataURI是组合出的图片地址
				document.getElementById('aa').src = strDataURI;
				// 之后的下载方法不想写了，可以直接从网页上下载了
			}
			// 每9张可以组成一张完整的图
			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>

Durch diese Reihe von Schritten habe ich den Prozess des Diebstahls der VR-Bilder von der Panorama-Vision-Website abgeschlossen. Ich bin

zu müde, um hier zu schreiben
. Ich werde zu Ende gehen und fortfahren ... (Golden Soul Song: Du kannst niemals das Ende erreichen.

Genähte Bilder

• w01
  
• w02
  
• w03
  
• w04
  
• w05
  
• w06