Get started
After learning three.js for a period of time, you can try to make a VR panorama effect.
At that time, it was near the end of 2020, so let’s make a new year's scene effect. It is similar to the VR panorama on the web page. There
must be a goal. The VR panorama needs to determine a location. I am in Jiangnan, then take it. The small town in Jiangnan will do the background layout of three.js! There are many small towns in Jiangnan, but the typical Internet-related one is Wuzhen. The location is get
Let's show the effect in advance:
At the end of 2020, the production of the effect has been completed. Because I can’t upload too big pictures, I cut the frame picture when making the gif, and it looks a bit stuck.
The project can be downloaded in the network disk: https://pan.baidu.com/s/1cmDsGEUlBJsvJTJQcmFxpw
Extraction code: yvjq
effect:
layout
Three.js needs a scene. The production of this scene is set by the background property of Scene. This setting can keep the camera from going beyond the background. If you just put the camera in a cube box, "punching" may appear. The phenomenon
The scene can be set using THREE.CubeTextureLoader as:
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' ] );
Picture----- at the end of this article
However, if the pictures I provide are uploaded to CSDN, there will be watermarks. If you want pictures without watermarks, you can also find them from the Baidu network disk project, or obtain suitable pictures through my later method (python crawler obtains online pictures)
After the scene is laid out, if you want to rotate left and right to view, you can use OrbitControls.js
<script src="js/OrbitControls.js" type="text/javascript" charset="utf-8"></script>
// 鼠标控件
var controls = new THREE.OrbitControls(camera, render.domElement); //创建控件对象
controls.update(); //更新方法，写在动画方法内
Picture acquisition (python)
The production of VR scenes has high requirements for pictures. Although the essence of the scene is a cube box, the pictures on the six sides of the cube need to be seamlessly connected, and I chose Wuzhen as the background, so my first choice is to find pictures from the Internet , "Steal" the picture from the website.
The website I unfortunately selected -------- Panorama Vision
. The scene I chose: Wuzhen-Xishan Scenic Area.
But how do I steal the picture? The label in the scene is canvas, not directly Copy the picture.
Here you can see the picture provided by the other server in the network. Once again, the plan is passed, hahaha,
but how could the other side not guard against it. The six-sided picture was chopped up, and one picture was cut into 9 parts (this It was also discovered after I climbed down and reorganized the picture). Nine-division anti-theft...
At that time, I was stunned, wow, what should I do, I can’t stand it if I clicked and downloaded less than 10 one by one with the mouse, all the downloads were deleted.
Then choose a less labor-saving method. A front-end programmer who does not know Python is not a good fisherman.
Start the road of python stealing pictures:
first
Select the image to view law between these pictures URL, these pictures must have its law
https://360.quanjing.com/ul/nd/QP61029957/: After reading a few, I found pictures have a common prefix
after Is composed of one of the six letters of ['r','l','u','d','b','f'].
After analysis, it is composed of ['/l1/1/l1_', One of'/l2/1/l2_','/l1/2/l1_','/l2/2/l2_','/l1/3/l1_','/l2/3/l2_'] is the
last It is the last two digits of the name of the picture between 1_1 and 3_3
so that you can write a method to traverse all the picture URL addresses
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)
second
Knowing the URL of the picture, then it is easy to handle. The python crawler is best at accessing the URL address
. There is a urllib library in python, and the download step can be completed directly through the urlretrieve of the urllib.request method.
When using this method, you need to give an address where the downloaded image will be stored
The following code directly on the 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)
Picture crawled down:
third
But what should I do if the stolen pictures are broken? The CubeTextureLoader method parameter in three.js can only pass 6 pictures, and you can’t pass all the broken pictures in.
Next, I can only recombine the pictures.
- Way 1: Use ps to stitch the pictures together one by one. But I am a lazy person, it seems to be too inefficient to do this, and the pictures are also regular, there must be a more convenient way.
- Road 2: Use canvas to stitch pictures, and then copy the canvas
method:
<!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>
Through this series of steps, I have completed the process of stealing the VR images from the panoramic vision website. I’m
too tired to write here
. I’ll come to an end and I will continue... (Golden Soul Song: You can never reach the end. real)
Stitched pictures
- w01
- w02
- w03
- w04
- w05
- w06
