Empezar
Después de aprender three.js durante un período de tiempo, puede intentar crear un efecto de panorama de realidad virtual.
En ese momento, estaba cerca de finales de 2020. Hagamos un efecto de escena de Año Nuevo. Es similar al panorama de realidad virtual en la página web.
Debe haber un objetivo. El panorama de realidad virtual debe determinar una ubicación. Yo soy en Jiangnan, luego cógelo. ¡La pequeña ciudad de Jiangnan hará el diseño de fondo de three.js! Hay muchas ciudades pequeñas en Jiangnan, pero la típica relacionada con Internet es Wuzhen. La ubicación es get
Demostremos el efecto de antemano:
A finales de 2020, se completó la producción del efecto, porque no puedo subir imágenes demasiado grandes, por lo que corté la imagen del marco al hacer el gif, se ve un poco atascado
El proyecto se puede descargar en el disco de red: https://pan.baidu.com/s/1cmDsGEUlBJsvJTJQcmFxpw
Código de extracción:
efecto yvjq :
diseño
Three.js necesita una escena. La producción de esta escena se establece mediante la propiedad de fondo de Escena. Esta configuración puede evitar que la cámara vaya más allá del fondo. Si simplemente colocas la cámara en una caja de cubo, es posible que aparezcan "perforaciones". El fenómeno
La escena se puede configurar usando THREE.CubeTextureLoader como:
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' ] );
Imagen ----- al final de este artículo
Sin embargo, si las imágenes que proporciono se cargan en CSDN, habrá marcas de agua. Si desea imágenes sin marcas de agua, también puede encontrarlas en el proyecto de disco de red de Baidu u obtener imágenes adecuadas a través de mi método posterior (el rastreador de Python obtiene imágenes en línea )
Una vez diseñada la escena, si desea rotar hacia la izquierda y hacia la derecha para ver, puede usar OrbitControls.js
<script src="js/OrbitControls.js" type="text/javascript" charset="utf-8"></script>
// 鼠标控件
var controls = new THREE.OrbitControls(camera, render.domElement); //创建控件对象
controls.update(); //更新方法，写在动画方法内
Adquisición de imágenes (python)
La producción de escenas de realidad virtual tiene altos requisitos para las imágenes. Aunque la esencia de la escena es una caja de cubo, las imágenes en los seis lados del cubo deben estar perfectamente conectadas, y elegí Wuzhen como fondo, así que mi primera opción es para buscar imágenes en Internet, "Robar" la imagen del sitio web.
El sitio web que seleccioné lamentablemente -------- Panorama Vision
. La escena que elegí: Área escénica de Wuzhen-Xishan.
Pero, ¿cómo puedo robar la imagen ? La etiqueta en la escena es lienzo, no directamente Copie la imagen.
Aquí puede ver la imagen proporcionada por el otro servidor en la red. Una vez más, el plan se aprobó, jajaja,
pero ¿cómo podría el otro lado no protegerse contra él? La imagen de seis caras se cortó y una imagen se cortó en 9 partes (esto también se descubrió después de que bajé y reorganicé la imagen). Antirrobo de nueve divisiones ...
En ese momento, estaba atónito, guau, ¿qué debo hacer? No puedo soportar si hice clic y descargué menos de 10 una por una con el mouse, todas las descargas se eliminaron. .
Luego elija un método que ahorre menos trabajo Un programador de interfaz de usuario que no conoce Python no es un buen pescador.
Comienza el camino del robo de imágenes de Python:
primero
Seleccione la imagen para ver la ley entre estas imágenes URL, estas imágenes deben tener su ley
https://360.quanjing.com/ul/nd/QP61029957/: Después de leer algunas, encontré que las imágenes tienen un prefijo común
después de Se compone de una de las seis letras de ['r', 'l', 'u', 'd', 'b', 'f'].
Después del análisis, se compone de ['/ l1 / 1 / l1_', una de '/ l2 / 1 / l2 _', '/ l1 / 2 / l1 _', '/ l2 / 2 / l2 _', '/ l1 / 3 / l1 _', '/ l2 / 3 / l2_'] es el
último son los dos últimos dígitos del nombre de la imagen entre 1_1 y 3_3
para que pueda escribir un método para recorrer todas las direcciones URL de la imagen
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)
segundo
Conociendo la URL de la imagen, entonces es fácil de manejar. El rastreador de Python es mejor para acceder a la dirección URL
. Hay una biblioteca urllib en Python, y el paso de descarga se puede completar directamente a través de urlretrieve del método urllib.request .
Al usar este método, debe proporcionar una dirección donde se almacenará la imagen descargada
El siguiente código directamente en el rastreador de 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)
La imagen se arrastró hacia abajo:
tercera
Pero, ¿qué debo hacer si las imágenes robadas están rotas? El parámetro del método CubeTextureLoader en three.js solo puede pasar 6 imágenes, y tú no puedes pasar todas las imágenes rotas.
A continuación, solo puedo recombinar las imágenes.
- Forma 1: use ps para unir las imágenes una por una. Pero soy una persona perezosa, parece demasiado ineficiente para hacer esto, y las imágenes también son regulares, debe haber una forma más conveniente
- Carretera 2: use lienzo para unir imágenes y luego copie el lienzo
método:
<!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>
A través de esta serie de pasos, he completado el proceso de robar las imágenes de
realidad virtual del sitio web de visión panorámica. Estoy demasiado cansado para escribir aquí
. Llegaré a su fin y continuaré ... (Canción del alma dorada: Nunca puedes llegar al final. Real)
Imágenes cosidas
- w01
- w02
- w03
- w04
- w05
- w06
