gpt4 book ai didi

javascript - 缩放 THREE.js 对象上的光标位置

转载 作者:行者123 更新时间:2023-11-29 14:40:17 25 4
gpt4 key购买 nike

目前我正在做一个 THREE.js 项目,我在缩放对象时遇到问题。它在使用轨迹球控件时基于渲染的中心位置进行缩放,但我想基于光标位置进行缩放。我有尝试使用 controls.noZoom=true 禁用轨迹球控件下的缩放,并在鼠标滚轮下编写代码。正如我预期的那样非常好,但它只是放大而不是缩小。

mousewheel = function (event) {
event.preventDefault();
event.stopPropagation();
var factor = 15;
var mX = (event.clientX / jQuery(container).width()) * 2 - 1;
var mY = -(event.clientY / jQuery(container).height()) * 2 + 1;
var vector = new THREE.Vector3(mX, mY, 0.5);
zoomstart = vector.unproject(camera);
vector.sub(camera.position);
camera.position.addVectors(camera.position, vector.setLength(factor));
trackBallControls.target.addVectors(trackBallControls.target, vector.setLength(factor));
};

帮我用这段代码根据鼠标位置进行缩放。

最佳答案

我想出了解决方案,效果非常好

var camera = new THREE.PerspectiveCamera(45, container.offsetWidth / 
container.offsetHeight, 1, 100000);
camera.position.set(0, 0, 40);

var trackBallControls= new THREE.TrackballControls(webGl.cameraP, container);
trackBallControls.rotateSpeed = 2.0;
trackBallControls.zoomSpeed = 3.0;
trackBallControls.panSpeed = 2.0;
trackBallControls.dynamicDampingFactor = 0.3;
trackBallControls.minDistance = 300;
trackBallControls.maxDistance = 4000;
trackBallControls.noZoom = false;
trackBallControls.noRotate = false;
trackBallControls.noPan = false;
trackBallControls.staticMoving = true;
trackBallControls.enabled = true;

mousewheel = function (event) {
var factor = 15;
var mX = (event.clientX / jQuery(container).width()) * 2 - 1;
var mY = -(event.clientY / jQuery(container).height()) * 2 + 1;
var vector = new THREE.Vector3(mX, mY, 0.1);

vector.unproject(camera);
vector.sub(camera.position);
if (event.deltaY < 0) {
camera.position.addVectors(camera.position, vector.setLength(factor));
trackBallControls.target.addVectors(trackBallControls.target, vector.setLength(factor));
} else {
camera.position.subVectors(camera.position, vector.setLength(factor));
trackBallControls.target.subVectors(trackBallControls.target, vector.setLength(factor));
}
};

关于javascript - 缩放 THREE.js 对象上的光标位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39220279/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com