three.js实现圆柱体
程序员文章站
2024-01-30 12:12:28
本文实例为大家分享了three.js绘制圆柱体的具体代码，供大家参考，具体内容如下
本文实例为大家分享了three.js绘制圆柱体的具体代码，供大家参考，具体内容如下
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>圆柱体</title>
<style>
#canvas{
width:1100px;
height:600px;
border:1px solid;
}
</style>
<script type="text/javascript" src="js/three.js"></script>
<script>
// 渲染器
var renderer;
function init_renderer(){
width = document.getelementbyid("canvas").clientwidth;
height = document.getelementbyid("canvas").clientheight;
renderer = new three.webglrenderer({ //生成渲染对象
antialias : true //去锯齿
});
renderer.setsize(width,height);//设置渲染的宽度和高度；
document.getelementbyid("canvas").appendchild(renderer.domelement);
renderer.setclearcolor(0xeeeeee,1);//设置渲染的颜色；
}
// 场景
var scene;
function init_scene(){
scene = new three.scene();
}
// 圆柱体
var cylinder;
function init_cylinder(){
var cylinder = new three.cylindergeometry(80,50,300,50,50);
var texture = three.imageutils.loadtexture("textures/2.jpg",null,function(t)//图片地址可使用本地,同根目录下文件夹即可
{
});
var material = new three.meshlambertmaterial({map:texture}); //材料
cube = new three.mesh(cylinder,material);
cube.position.set(0,0,5); //设置几何体的位置（x,y,z）
scene.add(cube);
}
// 相机
var camera;
function init_camera(){
// camera = new three.perspectivecamera(100,width/height,1,10000); //透视相机
camera = new three.orthographiccamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000) //正投影相机
// （可视角度，可视范围的长宽比，相对于深度剪切面的近的距离 必须为正数，相对于深度剪切面的远的距离 必须为正数）
camera.position.x =600
camera.position.y = 100;
camera.position.z = 100;
camera.up.x = -2;//设置相机的上为「x」轴方向
camera.up.y = 2;//设置相机的上为「y」轴方向
camera.up.z = 0;//设置相机的上为「z」轴方向
camera.lookat({x:0,y:0,z:0}); //设置视野的中心坐标
}
// 光源
var light;
function init_light(){
light = new three.directionallight(0xffffff,1);//设置平行光源 (光颜色，光强度)
light.position.set(200,100,50);//设置光源向量 (x,y,z)
scene.add(light);
}
function threejs_main(){
init_renderer();//渲染
init_scene();//场景
init_cylinder();//圆柱体
init_camera();//相机
init_light();//光源
renderer.clear();
animation()
renderer.render(scene,camera);
}
function animation(){
//x,y,z为旋转的轴 后边数字为速度
// cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// cube.rotation.z += 0.01;
renderer.render(scene,camera);
requestanimationframe(animation);
}
</script>
</head>
<body onload="threejs_main()">
<div id="canvas"></div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。