THREE.JS（如何想场景中添加物体对象）
这篇主要实现向模型对象中添加头像，并组成一个矩形
一、three.js是什么?
上篇说了点TWEEN这篇又来一根THREE是不是两兄弟啊？还真有点像，当想要做3D动画的时候，可能会考虑用TWEEN的动画函数。
其实THREE.JS就是实现3D效果的WEBGL的模型库。内容涵盖量大，目前的技术博文较少，要领会其中部分API需要一点功夫啊。
二、如何建立一个3D模型呢?
先来一个HTML代码。看看我们需要哪些东西
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
html,body{
width: 100%;
height: 100%;
background: #000;
}
a {
color: #8888ff;
}
#info {
position: absolute;
width: 100%;
color: #000000;
padding: 5px;
font-family: Monospace;
font-size: 13px;
font-weight: bold;
text-align: center;
z-index: 1;
}
.element {
width: 100px;
height: 100px;
box-shadow: 0px 0px 12px rgba(0,255,255,0.5);
border: 1px solid rgba(127,255,255,0.25);
text-align: center;
cursor: default;
border-radius: 50%;
overflow: hidden;
} .element2:hover {
box-shadow: 0px 0px 12px rgba(0,255,255,0.75);
border: 1px solid rgba(127,255,255,0.75);
} .element .number {
position: absolute;
top: 20px;
right: 20px;
font-size: 12px;
color: rgba(127,255,255,0.75);
display: none;
} .element .symbol {
position: absolute;
top: 0;
left: 0px;
right: 0px;
width: 100%;
height: 100%;
} .element .details {
position: absolute;
bottom: 10px;
left: 0px;
right: 0px;
font-size: 12px;
color: rgba(127,255,255,0.75);
height:15px;
line-height:15px;
font-size: 12px;
font-weight: bold;
color: rgba(255,255,255,0.75);
text-shadow: 0 0 10px rgba(0,255,255,0.95);
overflow: hidden;
display: none;
}
#container img{
border-radius: 0!important;
}
#animation{
-webkit-animation:rollOut .5s .2s ease both;
-moz-animation:rollOut .5s .2s ease both;
}
@-webkit-keyframes rollOut{
0%{
opacity:1;
-webkit-transform:translateX(0px) rotate(0deg);
left: 0px;
top:0px;
width: 200px;
} 100%{
opacity:0;
-webkit-transform:translateX(100%) rotate(240deg);
left:800px;
top:500px;
width: 0px;
}
}
@-moz-keyframes rollOut{
0%{
opacity:1;
-moz-transform:translateX(0px) rotate(0deg);
left: 0px;
top:0px;
width: 200px;
}
100%{
opacity:0;
-moz-transform:translateX(100%) rotate(120deg);
left:1400px;
top:500px;
width: 0px;
}
}
</style>
</head>
<body>
<div id="container"></div> </body> <script src="js/jquery-1.12.4.js"></script> <script src="js/three.js"></script> <script src="js/CSS3DRenderer.js"></script> <script src="js/tween.min.js"></script> <script src="js/TrackballControls.js"></script> <script src="js/demo.js"></script> </html>
从上面看到主要引进了three.js。CSS3DRenderer.js(css3模型渲染器)。TrackballControls.js(可以理解为场景控制器吧); tween.min.js 这篇就不说了。也用不上。
var demoConfig = {
'fakeNum': 500, //500张头像图片
'fakeUserImgTpl': "head/pic_#id#.jpg", //图片路径
'fakeUserTpl': { //对每个图片的描述
"id": "#id#",
"cont": "爽歪歪",
"name": "3D模型",
"img": "#img#"
}
};
var camera,scene,renderer,contols,obj;
//相机， 场景， 渲染器， 控制器， 物体对象。
var fakeUserArr = (function () {
var arr = [], picNum = demoConfig['fakeNum'];
var fakeUserTpl = demoConfig['fakeUserTpl'], fakeUserImgTpl = demoConfig['fakeUserImgTpl'];
for (var i = 0; i < picNum; i++) {
var userId = (i + 1), img = fakeUserImgTpl.replace(/#id#/gi, (i + 1));
userId = 'fake' + userId;
var fakeUser = $.extend({}, fakeUserTpl, {"id": userId, "img": img});
arr.push(fakeUser);
}
return arr;
})();
var appendImg = function(userJson,i){
var image = document.createElement('img');
var element = document.createElement('div');
var objId = 'user_' + userJson['id'];
element.setAttribute("id", objId);
element.className = 'element fakeuser';
element.style.backgroundColor = 'rgba(0,127,127,' + ( Math.random() * 0.5 + 0.25 ) + ')';
image.className = 'symbol';
element.appendChild(image);
image.src = userJson['img'];
// var object = new THREE.CSS3DSprite( element );//头像正对镜头
var object = new THREE.CSS3DObject(element);//头像平贴平面
object.objId = objId;
object.position.x = Math.random() * 3000 - 2000; //随机位置
object.position.y = Math.random() * 3000 - 2000;
object.position.z = Math.random() * 3000 - 2000;
obj.add(object);
}
var width = window.innerWidth,height = window.innerHeight,doc = document;
var init = function () {
//创建相机
camera = new THREE.PerspectiveCamera(75, width / height, 1, 5000);
camera.position.z = 2500; //相机的位置
//参数啥意思呢？
//设置透视投影的相机,默认情况下相机的上方向为Y轴，右方向为X轴，
// 沿着Z轴朝里（视野角：fov 纵横比：aspect 相机离视体积最近的距离：near 相机离视体积最远的距离：far）
scene = new THREE.Scene();//创建场景
obj = new THREE.Object3D(); //物体对象
scene.add(obj); //把物体放置到场景中
for(var i = 0,l = fakeUserArr.length; i < l; i++ ){
appendImg(fakeUserArr[i],i);
}
//创建渲染器
renderer = new THREE.CSS3DRenderer();
renderer.setSize(width,height); //设置尺寸
renderer.domElement.style.position = 'absolute'; //渲染器的style
doc.getElementById('container').appendChild(renderer.domElement); //把渲染器添加到场景中
//创建场景控制器
contols = new THREE.TrackballControls(camera,renderer.domElement);
contols.rotateSpeed = 0.5; //旋转速度
contols.minDistance = 500; //滚动滚动时的缩放距离 最大
contols.maxDistance = 10000; // 最小
renderer.render(scene,camera); //把物体对象添加到渲染器中
};
init();
这样就把头像点放到渲染器里面去了。那怎么拼成各种图形呢?
三、如何把像素点拼成各种图形？
1.矩形。
其实我们仔细想如何才能把头像拼成矩形呢？我们可以把一个矩形先画出来，再取像素点，把位置头像放到对应位置不就行了吗？写个方法把坐标点保存下来。
table = function (i) {
var x = i / 18;
var y = i % 18;
var object = new THREE.Object3D();
object.position.x = ( x * 140 ) - 1330;
object.position.y = -( y * 180 ) + 1100;
return object;
}
完整代码：
/**
* Created by Administrator on 2017/6/13.
*/
var demoConfig = {
'fakeNum': 500, //500张头像图片
'fakeUserImgTpl': "head/pic_#id#.jpg", //图片路径
'fakeUserTpl': { //对每个图片的描述
"id": "#id#",
"cont": "爽歪歪",
"name": "3D模型",
"img": "#img#"
}
};
var camera,scene,renderer,contols,obj;
//相机， 场景， 渲染器， 控制器， 物体对象。
var fakeUserArr = (function () {
var arr = [], picNum = demoConfig['fakeNum'];
var fakeUserTpl = demoConfig['fakeUserTpl'], fakeUserImgTpl = demoConfig['fakeUserImgTpl'];
for (var i = 0; i < picNum; i++) {
var userId = (i + 1), img = fakeUserImgTpl.replace(/#id#/gi, (i + 1));
userId = 'fake' + userId;
var fakeUser = $.extend({}, fakeUserTpl, {"id": userId, "img": img});
arr.push(fakeUser);
}
return arr;
})();
var appendImg = function(userJson,i){
var image = document.createElement('img');
var element = document.createElement('div');
var objId = 'user_' + userJson['id'];
element.setAttribute("id", objId);
element.className = 'element fakeuser'; element.style.backgroundColor = 'rgba(0,127,127,' + ( Math.random() * 0.5 + 0.25 ) + ')'; image.className = 'symbol';
element.appendChild(image);
image.src = userJson['img']; // var object = new THREE.CSS3DSprite( element );//头像正对镜头
var object = new THREE.CSS3DObject(element);//头像平贴平面
object.objId = objId; object.position.x = tableArr[i].position.x; //随机位置
object.position.y = tableArr[i].position.y;
object.position.z = tableArr[i].position.z;
obj.add(object);
}
table = function (i) {
var x = i / 18;
var y = i % 18;
var object = new THREE.Object3D();
object.position.x = ( x * 140 ) - 1330;
object.position.y = -( y * 180 ) + 1100;
return object;
}
var width = window.innerWidth,height = window.innerHeight,doc = document,tableArr = []; for(var i = 0 ; i < 500; i++){
tableArr.push(table(i));
}
var init = function () {
//创建相机
camera = new THREE.PerspectiveCamera(75, width / height, 1, 5000);
camera.position.z = 2500; //相机的位置
//参数啥意思呢？
//设置透视投影的相机,默认情况下相机的上方向为Y轴，右方向为X轴，
// 沿着Z轴朝里（视野角：fov 纵横比：aspect 相机离视体积最近的距离：near 相机离视体积最远的距离：far） scene = new THREE.Scene();//创建场景
obj = new THREE.Object3D(); //物体对象
scene.add(obj); //把物体放置到场景中 for(var i = 0,l = fakeUserArr.length; i < l; i++ ){
appendImg(fakeUserArr[i],i);
} //创建渲染器
renderer = new THREE.CSS3DRenderer();
renderer.setSize(width,height); //设置尺寸
renderer.domElement.style.position = 'absolute'; //渲染器的style
doc.getElementById('container').appendChild(renderer.domElement); //把渲染器添加到场景中 //创建场景控制器
contols = new THREE.TrackballControls(camera,renderer.domElement);
contols.rotateSpeed = 0.5; //旋转速度
contols.minDistance = 500; //滚动滚动时的缩放距离 最大
contols.maxDistance = 10000; // 最小 renderer.render(scene,camera); //把物体对象添加到渲染器中
}; init();
好，本篇到此为止。主要是讲如何把像素点渲染到场景中去，下面几篇会结合TWEEN讲述动画,以及如何生成定制LOGO。如何让每个头像动起来，并且停在相应的位置。
四、结束篇。
每天学习一点，坚持做同一样事情，离老菜鸟就不远了。还是那句话， 当一个东西要入门的话，一定要敲，要写demo，去推演，不然你永远不知道
哪些地方埋有炸弹。
THREE.JS（如何想场景中添加物体对象）的更多相关文章
- 用Physijs在场景中添加物理效果
1.创建可用Physijs的基本Three.js场景 创建一个可用Physijs的Three.js场景非常简单,只要几个步骤即可.首先我们要包含正确的文件, 需要引入physi.js文件.实际模拟物理 ...
- [Unity3D]Unity3D游戏开发之在3D场景中选择物体并显示轮廓效果
大家好,我是秦元培,欢迎大家关注我的博客,我的博客地址是blog.csdn.net/qinyuanpei. 在<仙剑奇侠传>.<古剑奇谭>等游戏中,常常须要玩家在一个3D场景中 ...
- 在unity中用鼠标实现在场景中拖动物体，用鼠标滚轮实现缩放
在场景中添加一个Plan,Camera,Directional Light,Cube.添加两个脚本scrollerScirpt(挂在Camera),CubeDragScript(挂在Cube上). 1 ...
- LoadRunner测试场景中添加负载生成器
如何在LoadRunner测试场景中添加负载生成器 本文对如何在LoadRunner的测试场景中添加负载生成器,如何使用负载生成器的方法,总结形成操作指导手册,以指导测试人员指导开展相关工作. 1.什 ...
- Loadrunner：场景中添加负载生成器
场景中添加负载生成器: (1)远程机子(假设ip为192.168.134.23)开启负载生成器 开始菜单找到:LoadRunner Agent Process 开启后任务栏会显示如下图: (2)场景中 ...
- JS向固定数组中添加不重复元素并冒泡排序
向数组{7,20,12,6,25}中添加一个不重复的数字,然后按照从小到大的顺序排列 源代码: <!DOCTYPE html> <html> <head> < ...
- OSG项目经验2<在场景中添加文字面版>
添加文字版需要用到osg的三个名字空间: osgText::Text,这个类用来添加文字和设置文字的一些属性: ...
- js动态向页面中添加表格
我们在实际开发中经常会想要实现如下情况: 点击某个按钮,然后动态的网页面里面添加一个表格或者一行,这个更加灵活方便.但是实现起来肯定不能像在页面里面直接写标签来的容易,以下是我项目中的代码,拿过来分享 ...
- FineUI中在一个页面中通过控件事件(JS)向父页面中添加Tab页
1.在前台页面尾部添加js代码 </form> <script type="text/javascript"> var basePath ...
随机推荐
- HBase数据结构（读书笔记 ）
背景: 最近在做一些跟大数据相关的东西,涉及到数据的存储和分析,考虑各个方面,选择使用HBase进行存储,使用原生Java API进行数据分析,之后会陆续写一系列来说明最近做的东西,给像我这样未曾涉及 ...
- .net core的定时任务框架Timed Job
参考文档:http://www.1234.sh/post/pomelo-extensions-timed-jobs 在该文档中介绍了怎么使用timed job,但是在使用db的时候会发生错误,错误一般 ...
- [Luogu1891]疯狂LCM[辗转相减法]
题意 多组询问,每次给定 \(n\) ,求:\(\sum_{i=1}^nlcm(i,n)\) . \(\rm T \leq 3\times 10^4\ ,n \leq 10^6\). 分析 推式子: ...
- 分布式服务框架 Zookeeper — 管理分布式环境中的数据
本节本来是要介绍ZooKeeper的实现原理,但是ZooKeeper的原理比较复杂,它涉及到了paxos算法.Zab协议.通信协议等相关知识,理解起来比较抽象所以还需要借助一些应用场景,来帮我们理解. ...
- 手把手带你打造一个 Android 热修复框架（上篇）
本文来自网易云社区 作者:王晨彦 前言 热修复和插件化是目前 Android 领域很火热的两门技术,也是 Android 开发工程师必备的技能. 目前比较流行的热修复方案有微信的 Tinker,手淘的 ...
- 设计模式之module模式及其改进
写在前面 编写易于维护的代码,其中最重要的方面就是能够找到代码中重复出现的主题并优化他们,这也是设计模式最有价值的地方 <head first设计模式>里有一篇文章,是说使用模式的心智, ...
- C#，清晨随手写
关于昨晚“猜拳”的博客 大家一定要记得,C#的书写规范是很严格的 很严格很严格很严格 简单的说 下面这样就没办法取值 但是这样就可以取值 插眼,开撸
- mongodb主从以及auth主从 配置详解
1.主服务器配置 #auth = true dbpath = /data/mongodb/db logpath = /data/mongodb/log/mongodb.log port = ...
- MySQL事务及其实现
事务定义 事务是访问并更新数据库中各个数据项的一个程序执行单元.在事务操作中,要不都做修改,要么都不做. 事务特性 事务具有ACID四个特性,分别是:原子性(Atomicity).一致性(Consis ...
- Unity3D — — UGUI之RectTransform
Mask.GetComponent<RectTransform>().anchoredPosition(子物体) = hotKey_image.rectTransform.anchored ...