Three.js用轨迹球插件（trackball）增加对模型的交互功能实例详解
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Three.js用轨迹球插件（trackball）增加对模型的交互功能实例详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3093字，纯文字阅读大概需要5分钟。
内容图文
这篇文章主要给大家介绍了关于Three.js如何用轨迹球插件，也就是trackball增加对模型的交互功能的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。前言
之前我们已经简单的给大家介绍了关于three.js入门的一些案例，下面本文将详细介绍关于Three.js如何用轨迹球插件（trackball）增加对模型的交互功能，下面话不多说了，来一起看看详细的介绍吧。
这是three.js的一个组件，需要额外的引入文件，文件的地址是在官方下载的案例examples/js/controls/TrackballControls.js。
只需要和案例里面一样设置相关的属性，并在实例化的时候讲相机传入。就可以实现交互效果。
可以实现的效果：
鼠标按住左键可以旋转模型
鼠标按住右键拖拽可以移动模型
鼠标滚轮可以缩放模型
案例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
html, body {
margin: 0;
height: 100%;
}
canvas {
display: block;
}
</style>
</head>
<body onload="draw();">
</body>
<script src="build/three.js"></script>
<script src="examples/js/controls/TrackballControls.js"></script>
<script>
var renderer;
function initRender() {
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
var camera;
function initCamera() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 10000);
camera.position.set(0, 0, 400);
}
var scene;
function initScene() {
scene = new THREE.Scene();
}
var light;
function initLight() {
scene.add(new THREE.AmbientLight(0x404040));
light = new THREE.DirectionalLight(0xffffff);
light.position.set(1,1,1);
scene.add(light);
}
function initModel() {
var map = new THREE.TextureLoader().load("examples/textures/UV_Grid_Sm.jpg");
var material = new THREE.MeshLambertMaterial({map:map});
var cube = new THREE.Mesh(new THREE.BoxGeometry(100, 200, 100, 1, 1, 1), material);
scene.add(cube);
}
//用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放
var controls;
function initControls() {
controls = new THREE.TrackballControls( camera );
//旋转速度
controls.rotateSpeed = 5;
//变焦速度
controls.zoomSpeed = 3;
//平移速度
controls.panSpeed = 0.8;
//是否不变焦
controls.noZoom = false;
//是否不平移
controls.noPan = false;
//是否开启移动惯性
controls.staticMoving = false;
//动态阻尼系数 就是灵敏度
controls.dynamicDampingFactor = 0.3;
//未知，占时先保留
//controls.keys = [ 65, 83, 68 ];
controls.addEventListener( 'change', render );
}
function render() {
renderer.render( scene, camera );
}
//窗口变动触发的函数
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
controls.handleResize();
render();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
//更新控制器
controls.update();
render();
requestAnimationFrame(animate);
}
function draw() {
initRender();
initScene();
initCamera();
initLight();
initModel();
initControls();
animate();
window.onresize = onWindowResize;
}
</script>
</html>以上就是Three.js用轨迹球插件（trackball）增加对模型的交互功能实例详解的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的Three.js用轨迹球插件（trackball）增加对模型的交互功能实例详解全部内容，希望文章能够帮你解决Three.js用轨迹球插件（trackball）增加对模型的交互功能实例详解所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。