html5里的空心圆柱体,three.js实现圆柱体

圆柱体

#canvas{

width:1100px;

height:600px;

border:1px solid;

}

// 渲染器

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);

}