ThreeJs模型的缩放、移动、旋转以及使⽤⿏标对三维物体的缩
放
⾸先我们创建⼀个模型对象
var geometry = new THREE.BoxGeometry( 100, 100, 100);  //边长100的正⽅体
var material = new THREE.MeshLambertMaterial({
color: 0xFF0000
});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
移动
接下来我们尝试将模型中⼼移动到 100,100,100的位置
⽅法1：Mesh对象继承Object3D对象，调⽤Object3D对象⽅法
⽅法2：通过直接改变模型position属性或者通过position属性的set⽅法
mesh.position.x = 100;
mesh.position.y = 100;
mesh.position.z = 100;
mesh.position.set(100, 100, 100);
⽅法3：通过沿着向量 1，1，1移动100个单位
*上⾯⽅法3中如果沿着某⼀向量移动指定的距离，需要对向量进⾏归⼀化处理，原因是向量(1，1，1)的长度不为1，即：
//沿着向量1，1，1移动100，⽽⾮移动到100，100，100的位置
缩放
//沿着XYZ分别缩放2倍/1.5倍/2倍
mesh.scale.set(2, 1.5, 2);
旋转
沿着XYZ分别旋转45°
或者
使⽤⿏标对三维物体的缩放
可以通过官⽅的插件OrbitControls实现⿏标对模型控制，⽅法如下：
引⼊⽂件：
<script type="text/javascript" src="./js/OrbitControls.js"></script>
// 渲染函数
function render() {
}
render();
//创建控件对象相机对象camera作为参数控件可以监听⿏标的变化，改变相机对象的属性
var controls = new THREE.OrbitControls(camera);
//监听⿏标事件，触发渲染函数，更新canvas画布渲染效果rotate属性
controls.addEventListener('change', render);
如果是动画，则不需要监听change事件
// 渲染函数
function render() {
requestAnimationFrame(render);  //下⼀帧执⾏代码
}
render();
//创建控件对象相机对象camera作为参数控件可以监听⿏标的变化，改变相机对象的属性var controls = new THREE.OrbitControls(camera);
//监听⿏标事件，触发渲染函数，更新canvas画布渲染效果
// controls.addEventListener('change', render);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。