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 ...
随机推荐
- 微信小程序的经纬度不想写死，需要转成number类型不能用浮点型
click: function (e) { var msg = this.data.placeData; var latitude = Number(msg.latitude) var longitu ...
- Oracle 在 多个Virtualbox 虚拟机间 跨不同物理宿主机进行通信
因为单位网络管理的原因,不太方便使用 Virtualbox 的Bridge Adapter 模式,故此欲采用NAT模式,不对外不暴露虚拟机IP. 但是此时会有一个问题:采用NAT模式后,在通常情况下, ...
- log4j.properties配置文件详解
Log4J的配置文件(Configuration File)就是用来设置记录器的级别.存放器和布局的,它可接key=value格式的设置或xml格式的设置信息.通过配置,可以创建出Log4J的运行环境 ...
- javaweb 报表生成（pdf excel）所需要用到的技术和思路
pdf: “ 目前开源.成熟.稳定的第三方包只有iText.而用iText生成PDF有三种方式: 调用iText API,用代码“写”出PDF,依赖包:com.itextpdf:itextpdf:5. ...
- 对大表进行全表更新，导致 Replication 同步数据的过程十分缓慢
在Publisher database中更新一个big table,数据行数是3.4亿多.由于没有更新 clustered Index key,因此,只产生了3.4亿多个Update Commands ...
- 处于同一域中的两台SQL Server 实例无法连接
处于同一个域中的两台Sql server 实例无法连接,报的错误信息如下: A network-related or instance-specific error occurred while es ...
- anaconda 及python pip安装 类库等问题收集
在win7下 通过anaconda安装jieba 报如下错误: 问题1:TypeError: parse() got an unexpected keyword argument 'transport ...
- 如何让mysql按照两个或多个字段排序
我准备设计一个供求信息的表格,里边包含序号(id)(自动增量),发布日期(time),上次更新(last_time).因为考虑到避免有人不停的重复发布信息来占据前列位置所以设置了last_time这个 ...
- Java生成唯一ID
这里我用的是Java提供的java.util.UUID类来产生随机字串,UUID码是什么我就不再赘述,能满足我们的需求就可以. 下面是java代码: import java.util.UUID; pu ...
- 初试Shell脚本
背景 临上线前测试比较努力,遇到闪退或者其他问题,会把日志包打给我,由于app内存限制,目前每次打包都是1m大小,所以有时查找问题的上下文比较吃力.同时由于日志比较多,根据关键词过滤的需求越来越重要. ...