8 Three.js使用轨迹球插件(trackball)增加对模型的交互功能
来源:互联网 发布:mac 移动硬盘 ntfs 编辑:程序博客网 时间:2024/06/05 18:42
这是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>
阅读全文
0 0
- 8 Three.js使用轨迹球插件(trackball)增加对模型的交互功能
- 10 Three.js使用orbit controls插件(轨道控制)来控制模型交互动作
- OpenGL 交互方式Trackball的实现代码
- 使用Three.js + Blender构建在浏览器端显示的3D模型(5)
- 使用Three.js + Blender构建在浏览器端显示的3D模型(1)
- 使用Three.js + Blender构建在浏览器端显示的3D模型(2)
- 使用Three.js + Blender构建在浏览器端显示的3D模型(3)
- 使用Three.js + Blender构建在浏览器端显示的3D模型(4)
- AlloyTouch与three.js 3D模型交互
- three.js 入门(创建模型的必要因素)
- three.js 灯光的代替模型
- 深入理解three.js对svg的支持(三):svg转three对象
- 使用Three.js的材质
- Yomotsu 使用 THREE.js 创建的示例(Examples created by Yomotsu using THREE.js)
- 11 Three.js使用Detector.js插件实现兼容性检测
- three.js使用三:加载有纹理的模型,结合blender和convert_obj_three.py
- three.js使用四:加载有材质和纹理的模型
- 关于three.js载入js格式模型的问题
- Python 写入MySQL乱码
- leetcode[Intersection of Two Arrays]
- 用nodejs创建一个http2服务器
- Linux学习之Varnish
- setTimeout()延时器
- 8 Three.js使用轨迹球插件(trackball)增加对模型的交互功能
- CSUOJ:1226: ACM小组的内战
- R中如何用ifelse进行数据分组
- 线程中断
- Largest prime factor 素数筛(素数打表,打表不优美会爆)
- Unity游戏开发网络基础(1)
- MyBatis在SSM中的用法
- linear-gradient()
- Vue 数组视图不能更新的解决方案