three.js 制作一个简单的圆柱体模型
<!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包在文件里。
