demo案例
TransformControls 是 Three.js 中的一個(gè)類，用于在網(wǎng)頁(yè)中進(jìn)行 3D 場(chǎng)景中物體的交互式操作。讓我們來(lái)詳細(xì)講解它的輸入?yún)?shù)、輸出、屬性和方法：
輸入?yún)?shù)：
TransformControls 構(gòu)造函數(shù)通常接受兩個(gè)參數(shù)：
-
camera（THREE.Camera）：用于渲染場(chǎng)景的攝像機(jī)。這個(gè)參數(shù)是必需的。
-
domElement（HTMLElement）：控制器將附加到的 HTML 元素。通常是渲染器的 DOM 元素。這個(gè)參數(shù)是可選的，如果未提供，則控制器將附加到文檔主體上。
輸出：
TransformControls 實(shí)例：表示變換控制器的對(duì)象，初始化為指定的攝像機(jī)，并附加到指定的 DOM 元素（如果未提供元素，則附加到文檔主體）。
屬性：
-
object（THREE.Object3D）：由變換控制器操作的對(duì)象。
-
enabled（布爾值）：指示控制器當(dāng)前是否已啟用或禁用。
-
space（字符串）：指定變換空間（‘local’ 或 ‘world’），其中應(yīng)用變換。
-
size（數(shù)字）：以像素為單位的變換控制器的大小。
-
dragging（布爾值）：指示用戶當(dāng)前是否正在拖動(dòng)控制器。
-
showX（布爾值）、showY（布爾值）、showZ（布爾值）：指示是否顯示沿 X、Y 和 Z 軸的控制手柄。
-
mode（字符串）：變換模式（‘translate’、‘rotate’ 或 ‘scale’）。
-
camera（THREE.Camera）：控制器使用的攝像機(jī)。
-
domElement（HTMLElement）：控制器附加到的 DOM 元素。
方法：
-
attach(object: THREE.Object3D)：將控制器附加到指定的對(duì)象以進(jìn)行操作。
-
detach()：將控制器從任何對(duì)象中分離，有效地停止操作，直到附加新對(duì)象為止。
-
dispose()：移除控制器，釋放資源。
-
update()：更新控制器。應(yīng)該在渲染循環(huán)中的每一幀中調(diào)用。
-
setMode(mode: String)：將變換模式設(shè)置為 ‘translate’、‘rotate’ 或 ‘scale’ 中的一種。
-
setSize(size: Number)：設(shè)置變換控制器的大?。ㄒ韵袼貫閱挝唬?。
-
setSpace(space: String)：將變換空間設(shè)置為 ‘local’ 或 ‘world’。
TransformControls 具體來(lái)說(shuō)，它可以實(shí)現(xiàn)以下功能：
-
平移（Translate）：您可以移動(dòng)物體，使其沿著三維空間中的 X、Y 或 Z 軸移動(dòng)。這對(duì)于調(diào)整物體在場(chǎng)景中的位置非常有用。
-
旋轉(zhuǎn)（Rotate）：您可以圍繞物體的原點(diǎn)或者某一指定點(diǎn)進(jìn)行旋轉(zhuǎn)操作，改變物體的方向或朝向。
-
縮放（Scale）：您可以調(diào)整物體的大小，使其放大或縮小。這在場(chǎng)景中創(chuàng)建視覺(jué)效果或者調(diào)整物體大小時(shí)非常有用。
-
設(shè)置變換空間（Set Transform Space）：您可以選擇將變換應(yīng)用于物體的局部坐標(biāo)系（Local Space）還是全局坐標(biāo)系（World Space）。在局部坐標(biāo)系中進(jìn)行變換會(huì)受到物體當(dāng)前旋轉(zhuǎn)的影響，而在全局坐標(biāo)系中進(jìn)行變換則會(huì)忽略物體的旋轉(zhuǎn)。
-
多軸控制（Multiple Axis Control）：您可以單獨(dú)控制每個(gè)軸上的變換，以便更精確地調(diào)整物體的位置、旋轉(zhuǎn)或縮放。
-
實(shí)時(shí)交互（Real-time Interaction）：變換控制器提供實(shí)時(shí)的交互式體驗(yàn)，您可以通過(guò)拖動(dòng)控制器上的手柄來(lái)直接調(diào)整物體的變換參數(shù)。
-
自定義設(shè)置（Customization）：您可以通過(guò)控制器的屬性來(lái)自定義其外觀和行為，例如控制手柄的顯示、設(shè)置控制器的大小等。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-852378.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - transform controls</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="main.css">
</head>
<body>
<div id="info">
"W" translate | "E" rotate | "R" scale | "+/-" adjust size<br />
"Q" toggle world/local space | "Shift" snap to grid<br />
"X" toggle X | "Y" toggle Y | "Z" toggle Z | "Spacebar" toggle enabled<br />
"Esc" reset current transform<br />
"C" toggle camera | "V" random zoom
</div>
<script type="importmap">
{
"imports": {
"three": "../build/three.module.js",
"three/addons/": "./jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { TransformControls } from 'three/addons/controls/TransformControls.js';
let cameraPersp, cameraOrtho, currentCamera;
let scene, renderer, control, orbit;
init();
render();
function init() {
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const aspect = window.innerWidth / window.innerHeight;
cameraPersp = new THREE.PerspectiveCamera( 50, aspect, 0.01, 30000 );
cameraOrtho = new THREE.OrthographicCamera( - 600 * aspect, 600 * aspect, 600, - 600, 0.01, 30000 );
currentCamera = cameraPersp;
currentCamera.position.set( 5, 2.5, 5 );
scene = new THREE.Scene();
scene.add( new THREE.GridHelper( 5, 10, 0x888888, 0x444444 ) );
const ambientLight = new THREE.AmbientLight( 0xffffff );
scene.add( ambientLight );
const light = new THREE.DirectionalLight( 0xffffff, 4 );
light.position.set( 1, 1, 1 );
scene.add( light );
const texture = new THREE.TextureLoader().load( 'textures/crate.gif', render );
texture.colorSpace = THREE.SRGBColorSpace;
texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshLambertMaterial( { map: texture } );
orbit = new OrbitControls( currentCamera, renderer.domElement );
orbit.update();
orbit.addEventListener( 'change', render );
control = new TransformControls( currentCamera, renderer.domElement );
control.addEventListener( 'change', render );
control.addEventListener( 'dragging-changed', function ( event ) {
orbit.enabled = ! event.value;
} );
const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
control.attach( mesh );
scene.add( control );
window.addEventListener( 'resize', onWindowResize );
window.addEventListener( 'keydown', function ( event ) {
switch ( event.keyCode ) {
case 81: // Q
control.setSpace( control.space === 'local' ? 'world' : 'local' );
break;
case 16: // Shift
control.setTranslationSnap( 100 );
control.setRotationSnap( THREE.MathUtils.degToRad( 15 ) );
control.setScaleSnap( 0.25 );
break;
case 87: // W
control.setMode( 'translate' );
break;
case 69: // E
control.setMode( 'rotate' );
break;
case 82: // R
control.setMode( 'scale' );
break;
case 67: // C
const position = currentCamera.position.clone();
currentCamera = currentCamera.isPerspectiveCamera ? cameraOrtho : cameraPersp;
currentCamera.position.copy( position );
orbit.object = currentCamera;
control.camera = currentCamera;
currentCamera.lookAt( orbit.target.x, orbit.target.y, orbit.target.z );
onWindowResize();
break;
case 86: // V
const randomFoV = Math.random() + 0.1;
const randomZoom = Math.random() + 0.1;
cameraPersp.fov = randomFoV * 160;
cameraOrtho.bottom = - randomFoV * 500;
cameraOrtho.top = randomFoV * 500;
cameraPersp.zoom = randomZoom * 5;
cameraOrtho.zoom = randomZoom * 5;
onWindowResize();
break;
case 187:
case 107: // +, =, num+
control.setSize( control.size + 0.1 );
break;
case 189:
case 109: // -, _, num-
control.setSize( Math.max( control.size - 0.1, 0.1 ) );
break;
case 88: // X
control.showX = ! control.showX;
break;
case 89: // Y
control.showY = ! control.showY;
break;
case 90: // Z
control.showZ = ! control.showZ;
break;
case 32: // Spacebar
control.enabled = ! control.enabled;
break;
case 27: // Esc
control.reset();
break;
}
} );
window.addEventListener( 'keyup', function ( event ) {
switch ( event.keyCode ) {
case 16: // Shift
control.setTranslationSnap( null );
control.setRotationSnap( null );
control.setScaleSnap( null );
break;
}
} );
}
function onWindowResize() {
const aspect = window.innerWidth / window.innerHeight;
cameraPersp.aspect = aspect;
cameraPersp.updateProjectionMatrix();
cameraOrtho.left = cameraOrtho.bottom * aspect;
cameraOrtho.right = cameraOrtho.top * aspect;
cameraOrtho.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
render();
}
function render() {
renderer.render( scene, currentCamera );
}
</script>
</body>
</html>
本內(nèi)容來(lái)源于小豆包，想要更多內(nèi)容請(qǐng)?zhí)D(zhuǎn)小豆包 》文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-852378.html
到了這里，關(guān)于TransformControls 是 Three.js 中的一個(gè)類，用于在網(wǎng)頁(yè)中進(jìn)行 3D 場(chǎng)景中物體的交互式操作。的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
