這篇文章主要介紹了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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
