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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)