WebGL学习(四)
运用鼠标控件对stl文件的查看
想要实现鼠标滑动,可旋转查看物体。从网上找到两种可实现的库,一个是OrbitControls.js,一个是TrackballControls.js,两者的共同点都是均能通过控制鼠标对场景物体进行查看,不同的是TrackballControls.js模拟的是球体转动,OrbitControls.js我也说不太来是怎样一种转动,知识点还没有掌握= 、=
TrackballControls.js的样例
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - STL</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 {
font-family: Monospace;
background-color: #fff;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<script src="js/three.js"></script>
<script src="js/STLLoader.js"></script>
<script src="js/TrackballControls.js"></script>
<script>
//**var stats;
var container, camera, scene, renderer, controls;
var start_time = Date.now();
var mouseX = 0, mouseY = 0;
init();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
// renderer
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xF5F5F5);
container.appendChild(renderer.domElement);
// scene
scene = new THREE.Scene();
// camera
var fov = 80,//拍摄距离 视野角值越大,场景中的物体越小
near = 1,//最小范围
far = 10000;//最大范围
camera = new THREE.PerspectiveCamera(fov, window.innerWidth / window.innerHeight, near, far);
camera.position.set(100, 100, 0);
camera.lookAt(scene.position);
scene.add(camera);
// lights
scene.add(new THREE.AmbientLight(0x8A8A8A));
var light = new THREE.PointLight(0xffffff, 1);
camera.add(light);
mouseControl
controls = new THREE.TrackballControls(camera, renderer.domElement);
controls.addEventListener('change', render); // add this only if there is no animation loop (requestAnimationFrame)
controls.enableDamping = false;//使动画循环使用时阻尼或自转 意思是否有惯性
controls.dynamicDampingFactor = 0.5;//动态阻尼系数 就是鼠标拖拽旋转灵敏度
controls.noZoom = false; //如果设置为true, 则禁用 鼠标滚轮调整大小(远近)的功能
controls.noPan = false; //如设置为true, 则禁用 按下鼠标右键平移的功能
//controls.minDistance = 100;//设置相机距离原点的最近距离
controls.maxDistance = 1000;//设置相机距离原点的最远距离
controls.rotateSpeed = 2.0; //按住鼠标左键后拖动查看时的旋转速度
controls.zoomSpeed = 1.2; //用滚轮调整大小(远近)时候的速度
controls.panSpeed = 0.5; //按住鼠标右键后的平移速度
// object
var loader = new THREE.STLLoader();
loader.load('stl/Pulmonary-001R2_Cut_1.stl', function (geometry) {
var material = new THREE.MeshPhongMaterial({ color: 0x1874CD });//63B8FF 1E92FB
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
});
window.addEventListener('resize', onWindowResize, false);
animate();
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame(animate);
controls.update();
render();
}
function render() {
renderer.render(scene, camera);
}
</script>
</body>
</html>
样例演示
━┳━ ━┳━奇困无比