threejs论坛

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 5846|回复: 0

08 Three.js使用轨迹球插件(trackball)增加对模型的交互功能

[复制链接]

227

主题

203

帖子

589

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
589
发表于 2021-1-3 10:46:50 | 显示全部楼层 |阅读模式


这是three.js的一个组件,需要额外的引入文件,文件的地址是在官方下载的案例的examples/js/controls/TrackballControls.js。
只需要和案例里面一样设置相关的属性,并在实例化的时候讲相机传入。就可以实现交互效果。
可以实现的效果:
鼠标按住左键可以旋转模型
鼠标按住右键拖拽可以移动模型
鼠标滚轮可以缩放模型
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style type="text/css">
  7.         html, body {
  8.             margin: 0;
  9.             height: 100%;
  10.         }

  11.         canvas {
  12.             display: block;
  13.         }

  14.     </style>
  15. </head>
  16. <body onload="draw();">

  17. </body>
  18. <script src="https://www.wjceo.com/lib/three.js"></script>
  19. <script src="https://www.wjceo.com/lib/js/controls/TrackballControls.js"></script>
  20. <script>
  21.     var renderer;
  22.     function initRender() {
  23.         renderer = new THREE.WebGLRenderer({antialias:true});
  24.         renderer.setSize(window.innerWidth, window.innerHeight);
  25.         document.body.appendChild(renderer.domElement);
  26.     }

  27.     var camera;
  28.     function initCamera() {
  29.         camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 10000);
  30.         camera.position.set(0, 0, 400);
  31.     }

  32.     var scene;
  33.     function initScene() {
  34.         scene = new THREE.Scene();
  35.     }

  36.     var light;
  37.     function initLight() {
  38.         scene.add(new THREE.AmbientLight(0x404040));

  39.         light = new THREE.DirectionalLight(0xffffff);
  40.         light.position.set(1,1,1);
  41.         scene.add(light);
  42.     }

  43.     function initModel() {
  44.         var map = new THREE.TextureLoader().load("/lib/textures/UV_Grid_Sm.jpg");
  45.         var material = new THREE.MeshLambertMaterial({map:map});

  46.         var cube = new THREE.Mesh(new THREE.BoxGeometry(100, 200, 100, 1, 1, 1), material);
  47.         scene.add(cube);
  48.     }

  49.     //用户交互插件 鼠标左键按住旋转,右键按住平移,滚轮缩放
  50.     var controls;
  51.     function initControls() {
  52.         controls = new THREE.TrackballControls( camera );
  53.         //旋转速度
  54.         controls.rotateSpeed = 5;
  55.         //变焦速度
  56.         controls.zoomSpeed = 3;
  57.         //平移速度
  58.         controls.panSpeed = 0.8;
  59.         //是否不变焦
  60.         controls.noZoom = false;
  61.         //是否不平移
  62.         controls.noPan = false;
  63.         //是否开启移动惯性
  64.         controls.staticMoving = false;
  65.         //动态阻尼系数 就是灵敏度
  66.         controls.dynamicDampingFactor = 0.3;
  67.         //未知,占时先保留
  68.         //controls.keys = [ 65, 83, 68 ];
  69.         controls.addEventListener( 'change', render );
  70.     }

  71.     function render() {
  72.         renderer.render( scene, camera );
  73.     }

  74.     //窗口变动触发的函数
  75.     function onWindowResize() {

  76.         camera.aspect = window.innerWidth / window.innerHeight;
  77.         camera.updateProjectionMatrix();
  78.         controls.handleResize();
  79.         render();
  80.         renderer.setSize( window.innerWidth, window.innerHeight );

  81.     }

  82.     function animate() {
  83.         //更新控制器
  84.         controls.update();
  85.         render();
  86.         requestAnimationFrame(animate);
  87.     }

  88.     function draw() {
  89.         initRender();
  90.         initScene();
  91.         initCamera();
  92.         initLight();
  93.         initModel();
  94.         initControls();

  95.         animate();
  96.         window.onresize = onWindowResize;
  97.     }
  98. </script>
  99. </html>
复制代码

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

<