ホームページ > 記事 > ウェブフロントエンド > Three.js は、トラックボール プラグイン (トラックボール) を使用して、モデルにインタラクティブな機能を追加します。
Three.js は、トラックボール プラグイン (トラックボール) を使用して、モデルにインタラクティブな機能を追加します。
- 巴扎黑オリジナル
- 2017-09-26 09:38:453189ブラウズ
この記事では、Three.js がトラックボール プラグイン、つまりモデルのインタラクティブ機能を高めるためにどのように使用するかに関する関連情報を主に、サンプル コードを通じて詳細に紹介しています。学習や仕事に重要な意味があるので、必要な方は以下をご覧ください。
はじめに
three.jsの入門についていくつかの事例を簡単に紹介しましたが、次の記事ではThree.jsがトラックボールプラグイン（トラックボール）を使用してインタラクティブ機能を高める方法を詳しく紹介します。モデルについては特に説明する必要はありません。詳細な紹介を見てみましょう。
これは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 は、トラックボール プラグイン (トラックボール) を使用して、モデルにインタラクティブな機能を追加します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。