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 ...
随机推荐
- 2017战略No.1：坚定不移地走全产业链发展路线
编者按:2016年9月9日,首次公开表达"我想走全产业链发展路线"的想法. 这几个月,认真思考了下这个决定背后的原因.目的和价值. 付出常人5倍以上的努力,先抓住"技术研 ...
- 消息队列ZeroMQ
消息队列概念 消息队列技术是分布式应用间交换信息的一种技术.消息队列可以驻留在内存或者磁盘上,队列存储消息直到它们被应用程序读走.通过消息队列,应用程序可以独立的执行,它们不需要知道彼此的位置,或者在 ...
- 2-[HTML]--介绍
1.HTML简介 HTML,全称是超文本标记语言(HyperText Markup Language),它是一种用于创建网页的标记语言.标记语言是一种将文本(Text)以及文本相关的其他信息结合起来, ...
- 1997: [Hnoi2010]Planar
1997: [Hnoi2010]Planar 链接 分析: 首先在给定的那个环上考虑进行操作,如果环内有有两条边相交,那么可以把其中的一条放到环的外面去.所以转换为2-sat问题. 像这样,由于1-4 ...
- C#时间间隔
System.Diagnostics.Stopwatch stopwatch = new System.Diagnostics.Stopwatch(); stopwatch.Start(); stop ...
- UWP 卡片视图 Card View
上一篇 提到了 UWP 轨道视图Orbit View,这次就说一下卡片视图,毕竟两个差不多. 卡片视图,效果如其名,卡片一样,左右滑动,当然能翻牌最好了. 嗯,我这个可以的额(⊙﹏⊙)... 看下效果 ...
- Form,选择并转移导航菜单
1.代码实例 <!DOCTYPE html> <html> <head> <title>选择并转移导航菜单</title> <meta ...
- C#例题集
收集一些从网上看到的例题 1.抽象类 抽象类不能被实例化一个抽象类只能通过接口和作为其它类的基类使用 抽象方法的声明只能在抽象类中 抽象方法必定不能实现(方法带一对{}都不行) 当一个子类集成自抽象类 ...
- 【Go】Mac上安装Go
一:首先安装brew,方便管理,安装方法,终端中输入 ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/ins ...
- 高可用OpenStack（Queen版）集群-9.Cinder控制节点集群
参考文档: Install-guide:https://docs.openstack.org/install-guide/ OpenStack High Availability Guide:http ...