html圆柱体制作方法,three.js 制作一个简单的圆柱体模型

three.js webgl - orbit controls

body {

color: #000;

font-family:Monospace;

font-size:13px;

text-align:center;

font-weight: bold;

background-color: #fff;

margin: 0px;

overflow: hidden;

}

#info {

color:#000;

position: absolute;

top: 0px; width: 100%;

padding: 5px;

}

a {

color: red;

}

圆柱体模型

if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

var camera, controls, scene, renderer;

init();

//render(); // remove when using next line for animation loop (requestAnimationFrame)

animate();

function init() {

scene = new THREE.Scene();

scene.background = new THREE.Color( 0xcccccc );

scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );

renderer = new THREE.WebGLRenderer( { antialias: true } );

renderer.setPixelRatio( window.devicePixelRatio );

renderer.setSize( window.innerWidth, window.innerHeight );

document.body.appendChild( renderer.domElement );

camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );

camera.position.set( 400, 200, 0 );

// controls

//控制旋转

controls = new THREE.OrbitControls( camera, renderer.domElement );

//controls.addEventListener( ‘change‘, render ); // call this only in static scenes (i.e., if there is no animation loop)

//惯性

controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled

//拖拽灵敏度

controls.dampingFactor = 0.25;

//是否可以缩放

controls.enableZoom = true;

controls.screenSpacePanning = false;

//是否开启右键拖拽

controls.enablePan = true;

//是否自动旋转

controls.autoRotate = true;

controls.minDistance = 100;

controls.maxDistance = 500

//controls.maxPolarAngle = Math.PI /2 只滚动一半;

controls.maxPolarAngle = Math.PI ;

/*

//拖拽

//可视化变换控件对象

transformControl = new THREE.TransformControls( camera,renderer.domElement );

scene.add( transformControl );//控件对象添加到场景对象

//拖拽控件对象

var dragcontrols = new THREE.DragControls(scene.children,camera,renderer.domElement );

//拖拽控件对象设置鼠标事件

dragcontrols.addEventListener( ‘hoveron‘, function ( event ) {

//控件对象transformControl与选中的对象object绑定

transformControl.attach( event.object );

} )

*/

// world 圆柱体

var geometry=new THREE.CylinderGeometry(20,20,100,40);

/*var geometry = new THREE.CylinderBufferGeometry( 0, 10, 30, 4, 1 );

*/

var material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );

var mesh = new THREE.Mesh( geometry, material );

mesh.position.x = 0;

mesh.position.y = 0;

mesh.position.z = 0;

mesh.updateMatrix();

mesh.matrixAutoUpdate = false;

scene.add( mesh );

// lights

var light = new THREE.DirectionalLight( 0xffffff );

light.position.set( 1, 1, 1 );

scene.add( light );

var light = new THREE.DirectionalLight( 0x002288 );

light.position.set( - 1, - 1, - 1 );

scene.add( light );

var light = new THREE.AmbientLight( 0x222222 );

scene.add( light );

//

window.addEventListener( ‘resize‘, onWindowResize, false );

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;

camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

}

function animate() {

requestAnimationFrame( animate );

controls.update(); // only required if controls.enableDamping = true, or if controls.autoRotate = true

render();

}

function render() {

renderer.render( scene, camera );

}