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 ...
随机推荐
- jQuery学习-基本选择器
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- cogs2479 偏序 cdq+树套树
cdq+树状数组套替罪羊树. cdq归并a,树套树解决b,c. 记住平衡树树根不能暴力清零!!! // It is made by XZZ #include<cstdio> #includ ...
- CSS3设置背景图片的大小
设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩. background-size 语法详解: 要在插入图片之后进行设置背景图片的大小 backgroun ...
- SQL Server 日期格式和日期操作
SQL Server发展至今,关于日期的格式的控制方法,有传统的方法,比如CONVERT(),也有比较便利的新方法,比如FORMAT():同样,关于日期的操作函数,也分为传统方法:DATEADD()等 ...
- c#多线程中Lock()关键字的用法小结
本篇文章主要是对c#多线程中Lock()关键字的用法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 本文介绍C# lock关键字,C#提供了一个关键字lock,它可以把一段 ...
- JUC——延迟队列
所谓的延迟队列最大的特征是它可以自动通过队列进行脱离,例如:现在有一些对象被临时保存着,但是有可能该集合对象是一个公共对象,那么里面的某些数据如果不在使用的时候就希望其可以在指定的时间达到后自动的消失 ...
- Egret入门(一)--简介
关于Egret 构建2D游戏,开源. TS + JS 完成打包后可以转换成HTML5的游戏(跨平台) Egret特点 1. 优秀的设计思想 2. 高效的渲染模块 3. 完善的配套工具 4. 灵活的工作 ...
- RabbitMQ入门：工作队列(Work Queue)
在上一篇博客<RabbitMQ入门:Hello RabbitMQ 代码实例>中,我们通过指定的队列发送和接收消息,代码还算是比较简单的. 假设有这一些比较耗时的任务,按照上一次的那种方式, ...
- Tensorflow张量的形状表示方法
对输入或输出而言: 一个张量的形状为a x b x c x d,实际写出这个张量时: 最外层括号[…]表示这个是一个张量,无别的意义! 次外层括号有a个,表示这个张量里有a个样本 再往内的括号有b个, ...
- Swing的概述
Swing在Java中是一个包,下面就是它的基本概述:简介: Java为了方便图形界面的实现, 专门设计了类库来满足各种各样的图形元素和用户交互事件, 该类库即为抽象窗口工具箱(Abstract Wi ...