这篇文章主要介绍了three.js实现圆柱体，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
JS是JavaScript的简称，它是一种直译式的脚本语言，其解释器被称为JavaScript引擎，是浏览器的一部分，主要用于web的开发，可以给网站添加各种各样的动态效果，让网页更加美观。
分享了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>感谢你能够认真阅读完这篇文章，希望小编分享的“three.js实现圆柱体”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
