本文實例為大家分享了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) //正投影相機 // （可視角度，可視范圍的長寬比，相對于深度剪切面的近的距離 必須為正數(shù)，相對于深度剪切面的遠的距離 必須為正數(shù)） 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為旋轉的軸 后邊數(shù)字為速度// 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>
新聞熱點
疑難解答
圖片精選
