Three.js Notes diverses (7) -Production d'effets panoramiques · Upper (y compris les images de vol de python crawler, de réorganisation de la toile)

Commencer

Après avoir appris three.js pendant un certain temps, vous pouvez essayer de créer un effet de panorama VR.


À ce moment-là, il était proche de la fin de 2020. Créons un effet de scène du Nouvel An. Il est similaire au panorama RV sur la page Web. Il

doit y avoir un objectif. Le panorama RV doit déterminer un emplacement. Je suis dans Jiangnan, alors prenez-le. La petite ville de Jiangnan fera la mise en page de fond de three.js! Il existe de nombreuses petites villes à Jiangnan, mais la ville Internet typique est Wuzhen.

Montrons l'effet à l'avance:

À la fin de 2020, la production de l'effet est terminée, car je ne peux pas télécharger de trop grandes images, donc j'ai coupé l'image du cadre lors de la création du gif, il semble un peu coincé

Le projet peut être téléchargé sur le disque réseau: https://pan.baidu.com/s/1cmDsGEUlBJsvJTJQcmFxpw

Code d'extraction:


effet yvjq :

agencement

Three.js a besoin d'une scène. La production de cette scène est définie par la propriété d'arrière-plan de Scene. Ce paramètre peut empêcher la caméra d'aller au-delà de l'arrière-plan. Si vous placez simplement la caméra dans une boîte de cube, un "poinçonnage" peut apparaître. Le phénomène

La scène peut être définie à l'aide de THREE.CubeTextureLoader comme:

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

Image ----- à la fin de cet article

Cependant, si les images que je fournis sont téléchargées vers le RSCF, il y aura des filigranes. Si vous voulez des images sans filigrane, vous pouvez également les trouver à partir du projet de disque réseau Baidu, ou obtenir des images appropriées grâce à ma méthode ultérieure (le robot d'exploration python obtient des images en ligne )

Une fois la scène mise en page, si vous souhaitez faire pivoter à gauche et à droite pour l'afficher, vous pouvez utiliser OrbitControls.js

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

Acquisition d'images (python)

La production de scènes VR a des exigences élevées pour les images. Bien que l'essence de la scène soit une boîte de cube, les images sur les six côtés du cube doivent être connectées de manière transparente, et j'ai choisi Wuzhen comme arrière-plan, donc mon premier choix est pour trouver des images sur Internet, "Volez" l'image sur le site Web.

Le site Web que j'ai malheureusement sélectionné -------- Panorama Vision
. La scène que j'ai choisie: Wuzhen-Xishan Scenic Area.


Mais comment voler l'image ? Le libellé de la scène est canvas, pas directement Copier l'image.
Ici vous pouvez voir l'image fournie par l'autre serveur du réseau. Encore une fois, le plan est adopté, hahaha,

mais comment l'autre côté pourrait-il ne pas s'en prémunir? L'image à six faces a été découpée et une image a été coupée en 9 parties (cela a également été découvert après que je suis descendu et que j'ai réorganisé l'image). Antivol en neuf divisions ...


À ce moment-là, j'étais abasourdi, wow, que dois-je faire, je ne peux pas le supporter si j'ai cliqué et téléchargé moins de 10 un par un avec la souris, tous les téléchargements ont été supprimés .
Ensuite, choisissez une méthode moins coûteuse: un programmeur frontal qui ne connaît pas Python n'est pas un bon pêcheur.

Commencez la route de python en volant des images:

première

Sélectionnez l'image pour voir la loi entre ces images URL, ces images doivent avoir sa loi
https://360.quanjing.com/ul/nd/QP61029957/: Après avoir lu quelques-unes, j'ai trouvé que les images ont un préfixe commun
après Est composé de une des six lettres de ['r', 'l', 'u', 'd', 'b', 'f'].
Après analyse, elle est composée de ['/ l1 / 1 / l1_', Un de '/ l2 / 1 / l2 _', '/ l1 / 2 / l1 _', '/ l2 / 2 / l2 _', '/ l1 / 3 / l1 _', '/ l2 / 3 / l2_'] est le
dernier It est les deux derniers chiffres du nom de l'image entre 1_1 et 3_3

afin que vous puissiez écrire une méthode pour parcourir toutes les adresses URL de l'image

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)

deuxième

Connaissant l'URL de l'image, alors c'est facile à gérer. Le robot d'exploration python est le meilleur pour accéder à l'adresse URL
. Il existe une bibliothèque urllib en python, et l'étape de téléchargement peut être effectuée directement via l'urlretrieve de la méthode urllib.request .
Lorsque vous utilisez cette méthode, vous devez donner une adresse où l'image téléchargée sera stockée

Le code suivant directement sur le robot d'exploration python:

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)

L'image a rampé vers le bas:

troisième

Mais que dois-je faire si les images volées sont brisées? Le paramètre de la méthode CubeTextureLoader dans three.js ne peut transmettre que 6 images et vous ne pouvez pas transmettre toutes les images brisées.
Ensuite, je ne peux que recombiner les images.

• Méthode 1: utilisez ps pour assembler les images une par une. Mais je suis une personne paresseuse, cela semble trop inefficace pour le faire, et les photos sont également régulières, il doit y avoir un moyen plus pratique
• Route 2: utilisez la toile pour assembler des images, puis copiez la toile

méthode:

<!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>

Grâce à cette série d'étapes, j'ai terminé le processus de vol des images VR du site Web de vision panoramique. Je suis

trop fatigué pour écrire ici
. J'arriverai à une fin et je continuerai ... (Golden Soul Song: Vous ne pouvez jamais atteindre la fin. Réel)

Images cousues

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