使用Three.js为QQ用户生成3D头像阵列
东西其实比较简单，就是输出某一范围内QQ账号的3D头像
涉及的技术主要是Three.js的基本使用
而后通过腾讯的接口异步并发请求QQ用户头像，Canavs作图生成Texture应用在球体上
需要注意的是，必须修改Chrome启动参数允许访问跨域资源才可正常打开此页面
GitHub地址：https://github.com/gstoken/qq-cube
先上效果图
然后是主要代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css/bootstrap.css" />
<style>
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
.page {
position: fixed;
width: 100%;
height: 100%;
background-color: white;
}
.top {
padding: 10px;
width: 100%;
background-color: #222;
color: white;
}
.content {
width: 100%;
height: 100%;
}
</style>
<title>QQ号顺序阵列查询</title>
</head>
<body>
<div class="page">
<div class="top">
<form class="form-inline">
<div class="form-group">
<label for="dstQQNum">QQ号：</label>
<input type="number" class="form-control" id="dstQQNum" value="1982775886" placeholder="目标QQ号" />
</div>
<div class="form-group">
<label for="querySize">查询数量：</label>
<input type="number" class="form-control" id="querySize" value="64" placeholder="查询个数" />
</div>
<div class="form-group">
<label for="taskNum">并发数量：</label>
<input type="number" class="form-control" id="taskNum" value="50" placeholder="并发数量" />
</div>
<div class="form-group">
<input id="standardQuery" type="button" class="btn btn-primary" value="查询" />
<input id="randomQuery" type="button" class="btn btn-primary" value="随机查查" />
<input id="clearQQ" type="button" class="btn btn-primary" value="清空QQ" />
</div>
</form>
</div>
<div class="content">
</div>
</div>
<script src="./js/jquery-3.3.1.js"></script>
<script src="./js/three.js"></script>
<script src="./js/OrbitControls.js"></script>
<script src="./js/Detector.js"></script>
<script src="./js/stats.min.js"></script>
<script type="x-shader/x-vertex" id="vertexShader">
varying vec3 vWorldPosition;
void main() {
vec4 worldPosition = modelMatrix * vec4( position, 1.0 );
vWorldPosition = worldPosition.xyz;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>
<script type="x-shader/x-fragment" id="fragmentShader">
uniform vec3 topColor;
uniform vec3 bottomColor;
uniform float offset;
uniform float exponent;
varying vec3 vWorldPosition;
void main() {
float h = normalize( vWorldPosition + offset ).y;
gl_FragColor = vec4( mix( bottomColor, topColor, max( pow( max( h , 0.0), exponent ), 0.0 ) ), 1.0 );
}
</script> <script>
if (!Detector.webgl) Detector.addGetWebGLMessage(); //球体贴图宽
const ballTextureWidth = 256;
//球体贴图高
const ballTextureHeight = 128;
//头像尺寸
const headSize = 128;
//摄像机，场景，渲染器
let camera, scene, renderer;
let stats; let $area = $(".content"); let meshList = []; //绘制图像到canvas
function drawToCanvas (img, canvas) {
let ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, (ballTextureHeight - headSize) / 2, headSize, headSize);
ctx.drawImage(img, ballTextureWidth / 2, (ballTextureHeight - headSize) / 2, headSize, headSize);
} //根据QQ以及坐标位置信息生成球体对象
function createBallMesh (img) {
let canvas = document.createElement("canvas");
canvas.width = ballTextureWidth;
canvas.height = ballTextureHeight; let ctx = canvas.getContext("2d");
ctx.fillStyle = "#ffffff";
ctx.fillRect(0, 0, ballTextureWidth, ballTextureHeight);
drawToCanvas(img, canvas); let texture = new THREE.Texture(canvas);
//新建标准网孔材质
let ballMat = new THREE.MeshStandardMaterial( {
color: "white",
roughness: 0.4,
metalness: 0.4,
map: texture
});
texture.needsUpdate = true; let ballGeometry = new THREE.SphereGeometry(0.5, 32, 32);
let ballMesh = new THREE.Mesh(ballGeometry, ballMat);
ballMesh.rotation.y = Math.PI; texture = undefined;
canvas = undefined; return ballMesh;
} async function buildQQMeshList (qqNumList, concurrencyNum) {
let rtvList = [];
let getList = await getAllQQHead(qqNumList, concurrencyNum);
for (let i = 0; i < getList.length; ++i) {
let curQQInfo = getList[i];
let curQQNum = curQQInfo.qqNum;
let curMesh = createBallMesh(curQQInfo.headImg);
rtvList[i] = {
qqNum: curQQNum,
qqMesh: curMesh
};
}
return rtvList;
} async function draw (scene, list, concurrencyNum) {
clear();
meshList = await buildQQMeshList(list, concurrencyNum);
meshList.sort((a, b) => {
return a.qqNum - b.qqNum;
});
len = meshList.length;
let size = Math.ceil(Math.cbrt(len));
let i = 0;
for (let z = 0; z > -size; --z) {
for (let y = size - 1; y >= 0; --y) {
for (let x = 0; x < size; ++x) {
if (i < len) {
let ballMesh = meshList[i++].qqMesh;
ballMesh.position.set(x * 2, y * 2, z * 2);
scene.add(ballMesh);
}
else {
return;
}
}
}
}
} function clear () {
for (let i = 0; i < meshList.length; ++i) {
scene.remove(meshList[i].qqMesh);
}
} async function init(element) {
let areaWidth = $area.width();
let areaHeight = $area.height(); //初始化相机
camera = new THREE.PerspectiveCamera(30, areaWidth / areaHeight, 1, 5000);
camera.position.set(0, 0, 25); //初始化场景
scene = new THREE.Scene();
scene.background = new THREE.Color().setHSL(0.6, 0, 1);
scene.fog = new THREE.Fog(scene.background, 1, 5000); //添加半球光源
let = hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.6);
hemiLight.color.setHSL(0.6, 1, 0.6);
hemiLight.groundColor.setHSL(0.095, 1, 0.75);
hemiLight.position.set(0, 50, 0);
scene.add(hemiLight);
//添加直接光源
let dirLight = new THREE.DirectionalLight(0xffffff, 1);
dirLight.color.setHSL(0.1, 1, 0.95);
dirLight.position.set(-1, 1.75, 1);
dirLight.position.multiplyScalar(30);
scene.add(dirLight); //环境
let groundGeo = new THREE.PlaneBufferGeometry(10000, 10000);
let groundMat = new THREE.MeshPhongMaterial({color: 0xffffff, specular: 0x050505});
groundMat.color.setHSL(0.095, 1, 0.75);
let ground = new THREE.Mesh(groundGeo, groundMat);
ground.rotation.x = -Math.PI / 2;
ground.position.y = -33;
scene.add(ground);
ground.receiveShadow = true; //天幕
var vertexShader = document.getElementById('vertexShader').textContent;
var fragmentShader = document.getElementById('fragmentShader').textContent;
var uniforms = {
topColor: {value: new THREE.Color(0x0077ff)},
bottomColor: {value: new THREE.Color(0xffffff)},
offset: {value: 33},
exponent: {value: 0.6}
};
uniforms.topColor.value.copy(hemiLight.color);
scene.fog.color.copy(uniforms.bottomColor.value);
var skyGeo = new THREE.SphereGeometry(4000, 32, 15);
var skyMat = new THREE.ShaderMaterial( { vertexShader: vertexShader, fragmentShader: fragmentShader, uniforms: uniforms, side: THREE.BackSide } );
var sky = new THREE.Mesh( skyGeo, skyMat );
scene.add(sky); //渲染器
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(areaWidth, areaHeight);
element.appendChild(renderer.domElement);
renderer.gammaInput = true;
renderer.gammaOutput = true;
renderer.shadowMap.enabled = true; //初始化轨道控制器
controls = new THREE.OrbitControls(camera, renderer.domElement); // stats = new Stats();
// element.appendChild(stats.dom); window.addEventListener('resize', onWindowResize, false);
} function onWindowResize() {
let width = $area.width();
let height = $area.height();
camera.aspect = width / height;
camera.updateProjectionMatrix();
renderer.setSize(width, height);
} function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
//stats.update();
} (async () => {
let element = $area[0];
await init(element);
animate();
})();
</script> <script>
//根据起始QQ，结束QQ生成QQ列表
function buildInputQQNumList (opQQNum, edQQNum) {
let len = edQQNum - opQQNum + 1;
let list = Array(len).fill(0).map((item, index) => {
return opQQNum + index;
});
return list;
}
//闭区间随机选数
function randomRange (op, ed) {
let len = ed - op + 1;
let offset = Math.floor(Math.random() * len);
return op + offset;
}
//随机生成模拟数据
function buildTestList (len) {
let randOpQQNum = randomRange(10000, 100000000);
let edQQNum = randOpQQNum + len - 1;
return buildInputQQNumList(randOpQQNum, edQQNum);
}
//对列表按索引分组，传入列表和分组个数
function batch (list, num) {
let batchList = [];
for (let i = 0; i < num; ++i) {
batchList[i] = list.filter((item, index) => {
if (index % num == i) {
return true;
}
else {
return false;
}
});
}
return batchList;
}
</script> <script>
//根据url获取Image对象，返回一个Promise
function getImage (url, timeout) {
timeout = timeout || 60000;
return new Promise((resolve, reject) => {
try {
let imgObj = new Image();
imgObj.src = url;
imgObj.crossOrigin = ""; let id = setTimeout(() => {
reject();
}, timeout); imgObj.onload = () => {
clearTimeout(id);
resolve(imgObj);
}; imgObj.onerror = () => {
reject();
};
}
catch (e) {
reject();
}
});
}
//获取访问QQ头像的接口url
function getQQHeadUrl (qqNum) {
//return "https://qlogo2.store.qq.com/qzone/" + qqNum + "/" + qqNum + "/100";
return "http://q2.qlogo.cn/headimg_dl?dst_uin=" + qqNum + "&spec=100";
}
//获取QQ头像
function getQQHead (qqNum) {
return getImage(getQQHeadUrl(qqNum));
}
//根据传入的QQ账号列表生成一个Promise异步任务获取对应QQ头像
function startGetQQHeadTask (qqNumList) {
return new Promise(async (resolve, reject) => {
let taskArray = [];
for (let i = 0; i < qqNumList.length; ++i) {
let curQQNum = qqNumList[i];
let curQQHeadImg;
try {
curQQHeadImg = await getQQHead(curQQNum);
}
catch (e) {
curQQHeadImg = null;
}
taskArray[i] = {
qqNum: curQQNum,
headImg: curQQHeadImg
};
}
resolve(taskArray);
});
}
//根据QQ账号列表获取所有头像
function getAllQQHead (qqNumList, concurrencyNum) {
return new Promise((resolve, reject) => {
let rtvList = [];
let batchList = batch(qqNumList, concurrencyNum);
let count = 0;
for (let i = 0; i < batchList.length; ++i) {
let dstTaskList = batchList[i];
startGetQQHeadTask(dstTaskList).then((list) => {
rtvList = rtvList.concat(list);
count++;
if (count >= concurrencyNum) {
resolve(rtvList);
}
});
}
});
}
</script> <script>
$(function () {
$("#standardQuery").click(async () => {
let dstQQNum = Number(document.getElementById("dstQQNum").value);
let querySize = Number(document.getElementById("querySize").value);
if (querySize < 1) {
alert("查询个数输入错误");
return;
}
let taskNum = Number(document.getElementById("taskNum").value);
if (taskNum < 1) {
alert("并发数量输入错误");
return;
}
let list = buildInputQQNumList(dstQQNum, dstQQNum + querySize - 1);
await draw(scene, list, taskNum);
});
$("#randomQuery").click(async () => {
let taskNum = Number(document.getElementById("taskNum").value);
let list = buildTestList(4 * 4 * 4);
await draw(scene, list, taskNum);
});
$("#clearQQ").click(() => {
clear();
});
});
</script>
</body>
</html>
使用Three.js为QQ用户生成3D头像阵列的更多相关文章
- JS获得QQ号码的昵称,头像,生日
这篇文章主要介绍了JS获得QQ号码的昵称,头像,生日的简单实例,有需要的朋友可以参考一下 http://r.qzone.qq.com/cgi-bin/user/cgi_personal_card?ui ...
- 我的世界 ParaCraft 结合开源地图 OpenStreetMap 生成3D校园的方法简介
我的世界ParaCraft结合开源地图OpenStreetMap生成3D校园的方法简介 版本1.0 日期2019.2.3 作者Ray (82735589@qq.com) www.TimeGIS.com ...
- Django商城项目笔记No.12用户部分-QQ登录2获取QQ用户openid
Django商城项目笔记No.12用户部分-QQ登录2获取QQ用户openid 上一步获取QQ登录网址之后,测试登录之后本该跳转到这个界面 但是报错了: 新建oauth_callback.html & ...
- webgl(three.js)实现室内三维定位,3D定位,3D楼宇bim、实时定位三维可视化解决方案——第十四课（定位升级版）
序: 还是要抽出时间看书的,迷上了豆豆的作品,最近在看<天幕红尘>,书中主人公的人生价值观以及修为都是让我惊为叹止.很想成为那样的人,但是再看看自己每天干的事,与时间的支配情况,真是十分的 ...
- 使用腾讯开发平台获取QQ用户数据资料
<今天是七夕:祝大家七夕嗨皮,前可么么哒,后可啪啪啪> Tips:本篇博客将教你如何使用腾讯开发平台获取QQ用户资料 ----------------------------------- ...
- Space.js – HTML 驱动的页面 3D 滚动效果
为了让我们的信息能够有效地沟通,我们需要创建用户和我们的媒体之间的强有力的联系.今天我们就来探讨在网络上呈现故事的新方法,并为此创造了一个开源和免费使用的 JavaScript 库称为 space.j ...
- 我从腾讯那“偷了”3000万QQ用户数据，出了份很有趣的独家报告！
声明: 1.目前程序已停止运行!QQ空间也已升级访问安全机制. 2.本“分析”数据源自部分用户的公开信息,并未触及隐私内容,广大网友无需担心. 3.QQ空间会不定期发布大数据分析报告,感兴趣的朋友关注 ...
- JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果
JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果 今天是2014年第一篇博客是关于类似于我们的qq空间长图片展示效果,因为一张很长的图片不可能全部把他展示出来,所以外层用了一个容器给他一个高度,超 ...
- Three.js 实现2022冬奥主题3D趣味页面 🐼
背景 迎冬奥,一起向未来!2022冬奥会马上就要开始了,本文使用 Three.js + React 技术栈,实现冬日和奥运元素,制作了一个充满趣味和纪念意义的冬奥主题 3D 页面.本文涉及到的知识点主 ...
随机推荐
- ERP系统
ERP系统是企业资源计划(Enterprise Resource Planning )的简称,是指建立在信息技术基础上,集信息技术与先进管理思想于一身,以系统化的管理思想,为企业员工及决策层提供决策手 ...
- 牛客寒假算法基础训练集中营4 E题 Applese 涂颜色
链接:https://ac.nowcoder.com/acm/contest/330/E 来源:牛客网 题目描述 精通程序设计的 Applese 叕写了一个游戏. 在这个游戏中,有一个 n 行 m 列 ...
- python 0007
#coding='utf-8'# import re import os def get_list(): list_file=[] for f in os.listdir(): if f.endswi ...
- SQLServer索引及统计信息
索引除了提高性能,还能维护数据库. 索引是一种存储结构,主要以B-Tree形式存储信息. B-Tree的定义: 1.每个节点最多只有m个节点(m>=2) 2.除了根节点和叶子节点外的每个节点上最 ...
- 处理OSS上传失败一例
问题描述: 上传oss云存储,无法成功,报错: 2019-01-29 17:44:59,552 oss2.api [ERROR] 140080008111872 : Exception: {'stat ...
- .Net页面缓存OutPutCache详解
一 它在Web.Config中的位置 <system.web> <!--页面缓存--> <caching> <outputCacheSettings> ...
- Android 敏感权限申请
动态权限管理是Android6.0(Build.VERSION_CODES.M = Api23)推出的,提醒用户当前APP所需要的权限,防止滥用.这些权限一般分为三种:(1)普通权限:直接manife ...
- Java判断不为空的工具类总结
1.Java判断是否为空的工具类,可以直接使用.包含,String字符串,数组,集合等等. package com.bie.util; import java.util.Collection; imp ...
- Windows Server 2012 R2 设置 NTP 服务
其实和以前的server版本配置没啥不一样 都是先改注册表: HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\W32Time\Config\ ...
- Refs & DOM
Refs 提供了一种访问在 render 方法中创建的 DOM 节点或 React 元素的方式. 在典型的 React 数据流中, 属性(props)是父组件与子代交互的唯一方式.要修改子组件,你需要 ...