Three.js 做旋钮开关

下载依赖的js：SwitchControl.js
效果如下：

使用方式如下：

// 引入开关控制的JS
import SwitchControl from '../../libs/SwitchControl.js';
// 创建一个旋钮开关的控件，添加到场景中，需要移动位置可以通过postion来操作
function createSwitch() {
var switchControl = SwitchControl.createSwitchControl();
switchControl.position.x = 10;
switchControl.position.y = 20;
switchControl.position.z = 30;
scene.add(switchControl);
}
//周期性渲染中调用updateSwitchControl，实现旋钮旋转的效果
function render() {
SwitchControl.updateSwitchControl();
requestAnimationFrame(render); // 周期性执行渲染函数 render
controls.update();
renderer.render(scene, camera); // 周期性执行渲染函数 render
}
/* 鼠标单击事件 */
function onMouseClick(event) {
const mousePoint = new THREE.Vector2();
mousePoint.x = (event.clientX / window.innerWidth) * 2 - 1;
mousePoint.y = -(event.clientY / window.innerHeight) * 2 + 1;
const rayCaster = new THREE.Raycaster();
rayCaster.setFromCamera(mousePoint, camera);
let intersects = rayCaster.intersectObjects(scene.children, true);
if (intersects.length > 0) {
// 鼠标单击如果有选中到obj，就调用checkSwitchControllerUpdate，如果是按钮控件会旋转
SwitchControl.checkSwitchControllerUpdate(intersects[0].object);
}
}
renderer.domElement.addEventListener("click", onMouseClick);

最后

以上就是玩命手机为你收集整理的Three.js 做旋钮开关的全部内容，希望文章能够帮你解决Three.js 做旋钮开关所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。