到此我们已经创建了一个场景,并且使用camera进行取景,然后使用render 渲染,下一步开始在添加一些东西了。
首先我们定义一个物体的简单属性
var obje = {
geometry: {
x: 1000, y: 0.1, z: 700
},
position: {
x: 0,y: -100,z: 0
},
style: {
color: 0xff0000
}
}
大致上我们完成了一个对象的建模,包括他的长宽高,外部颜色以及在3维场景中的位置,下一步使用THREEjs创建出该物体,然后加载到场景中,使用camera取景,渲染,就可以得到他了。
/*
make a function
*/
function createbox(obj) {
geometry=newTHREE.BoxBufferGeometry(obj.geometry.x, obj.geometry.y, obj.geometry.z);
// 创建出物体的样式
materil=newTHREE.MeshBasicMaterial({
color: obj.style.color,
})
// 材质
//materil.map= //贴图这里我注释掉了后面再说
mesh=newTHREE.Mesh(geometry,materil);
if(obj.position) {
mesh.position.set(obj.position.x, obj.position.y, obj.position.z);
}
// 方便创建处于圆心的位置的对象,对传递进来的参数进行判断,有位置信息的才设定位置,
scene.add(mesh)
// 将物体添加到场景中
//console.log(mesh)
}
结果如下图
![](https://i-blog.csdnimg.cn/blog_migrate/ae51ac1fa41c9da3816998177065238e.webp?x-image-process=image/format,png%7CimageView2/2/w/1240)
demo源码http://pan.baidu.com/s/1hsFjAG8