<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - orbit controls</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
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;
}
</style>
</head> <body>
<div id="info">
<h1>圆柱体模型</h1>
</div> <script src="three.js"></script>
<script src="OrbitControls.js"></script>
<script src="Detector.js"></script>
<script src="DragControls.js.js"></script> <script> 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 ); } </script> </body>
</html>
js包在文件里。