집 > 기사 > 웹 프론트엔드 > Three.js는 트랙볼 플러그인(트랙볼)을 사용하여 모델에 대화형 기능을 추가합니다.

Three.js는 트랙볼 플러그인(트랙볼)을 사용하여 모델에 대화형 기능을 추가합니다.

巴扎黑원래의: 2017-09-26 09:38:453189검색

이 글에서는 Three.js가 트랙볼 플러그인, 즉 트랙볼을 사용하여 모델의 인터랙티브 기능을 높이는 방법에 대한 관련 정보를 주로 소개합니다. 이 글에서는 예제 코드를 통해 자세히 소개하고 있습니다. 학습 가치를 참고하세요. 필요한 친구는 아래를 살펴보세요.

머리말

three.js를 시작하는 몇 가지 사례를 간략하게 소개했습니다. 다음 글에서는 Three.js가 트랙볼 플러그인(트랙볼)을 사용하여 대화형 기능을 향상시키는 방법을 자세히 소개합니다. 아래에서는 별로 할 말이 없지만, 자세한 소개를 살펴보겠습니다.

이것은 three.js의 구성 요소이며 추가 가져오기 파일이 필요합니다. 파일 주소는 공식 다운로드 케이스 example/js/controls/TrackballControls.js에 있습니다.

케이스와 같이 관련 속성만 설정하고 인스턴스화할 때 카메라를 전달하면 됩니다. 대화형 효과를 얻을 수 있습니다.

얻을 수 있는 효과:

모델을 회전하려면 마우스 왼쪽 버튼을 누르고 있습니다.
모델을 이동하려면 마우스 오른쪽 버튼을 누른 채 드래그하세요.
The 마우스 휠로 모델을 확대/축소할 수 있습니다

케이스 코드:

<!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( &#39;change&#39;, 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는 트랙볼 플러그인(트랙볼)을 사용하여 모델에 대화형 기능을 추가합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：Three.js는 성능 플러그인 통계를 사용하여 성능 모니터링 예제를 자세히 구현합니다.다음 기사：Three.js는 성능 플러그인 통계를 사용하여 성능 모니터링 예제를 자세히 구현합니다.