首页 > 其他分享 >在react中利用three.js 渲染模型 让鼠标拖拽是模型转动

在react中利用three.js 渲染模型 让鼠标拖拽是模型转动

时间:2024-09-09 13:52:36浏览次数:13  
标签:OrbitControls 渲染 模型 three controls js PI event Math


import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

 useEffect(() => {
  // 初始化OrbitControls
  const controls = new OrbitControls(camera, renderer.domElement); 
  // 设置控制参数
  controls.enableDamping = true; // 平滑化运动
  controls.dampingFactor = 0.05;
  controls.screenSpacePanning = false;
  controls.minDistance = 10;
  controls.maxDistance = 200;//缩放最大距离
  controls.minAzimuthAngle = -Math.PI / 4; // 最小方位角
  controls.maxAzimuthAngle = Math.PI / 4; // 最大方位角
  controls.minPolarAngle =-Math.PI/6;; // 允许相机向上看
  controls.maxPolarAngle = Math.PI/3; // 允许相机向下看直到正下方
  controls.addEventListener('start', (event) => {

  });
  controls.addEventListener('end', (event) => {
    console.log('Interaction ended.',event);
   
  });
  // 注册zoom事件
  controls.addEventListener('zoom', function() {
    console.log('Zooming');
 
  });
})

利用OrbitControls  实现模型转动放大缩小等功能,这是three里带的 所以用起来比较顺畅一些。

下面可以设置他放打缩小的限制已经 转动的角度。

所有的代码包括渲染代码我上一篇文章有写到渲染代码。都是写在了useEffect中,否则页面标签没有渲染完去渲染模型,会报错。

标签:OrbitControls,渲染,模型,three,controls,js,PI,event,Math
From: https://blog.51cto.com/u_15482477/11960676

相关文章

  • react 中three.js 模型渲染
      npminstallthreeimport*asTHREEfrom"three";import{GLTFLoader}from"three/examples/jsm/loaders/GLTFLoader.js";constmountRef=useRef(null);useEffect(()=>{//创建渲染器constrenderer=newTHREE.WebGLRender......
  • 在react 中还有另外一种three.js 渲染方式
    npminstall@react-three/drei利用标签去渲染模型importReact,{useRef,useEffect,useState}from'react';import{Canvas,useFrame,useThree,useLoader}from'@react-three/fiber';import{GLTFLoader}from'three/examples/jsm/loaders/GLT......
  • 2025秋招NLP算法面试真题(十九)-大模型分布式训练题目
    分布式训练题目1.理论篇1.1训练大语言模型存在问题?计算资源需求**:**训练大型语言模型需要大量的计算资源,包括高端GPU、大量的内存和高速存储器。这可能限制了许多研究人员和组织的训练能力,因为这些资源通常很昂贵。数据需求**:**训练大型语言模型需要大规模的数......
  • 2025秋招NLP算法面试真题(十八)-大模型训练数据格式常见问题
    1.SFT(有监督微调)的数据集格式?对于大语言模型的训练中,SFT(SupervisedFine-Tuning)的数据集格式可以采用以下方式:输入数据:输入数据是一个文本序列,通常是一个句子或者一个段落。每个样本可以是一个字符串或者是一个tokenized的文本序列。标签数据:标签数据是与输入数据对应的......
  • 大模型新手必读:刷经验,少走三年弯路的秘籍!
    这篇文章,我将结合自己在大模型领域的经验,给大家详细聊聊新人应该如何转行大模型赛道?比如大模型都有哪些方向?各方向的能力要求和岗位匹配?新手转行大模型常踩的坑和常见的误区?以及入行大模型最顺滑的路径?如果你是正打算入行大模型的校招/社招同学,请一定看完,可能会让你在入行......
  • 【LLM大模型】转行大模型:趋势、必要性及可行路径
    在当今这个数字化快速发展的时代,人工智能(AI)尤其是大规模预训练模型(大模型),已经成为推动科技进步和产业变革的重要力量。对于各行各业的技术从业者而言,转行大模型不仅是适应行业趋势的需要,更是自我提升与职业发展的必经之路。转行大模型的必要性市场需求的增长:随着人工智能......
  • json.dumps(data.__dict__) 会把中文字符转义为 Unicode 码点
    在Python中,json.dumps()函数会将Python对象序列化为JSON字符串,并默认使用UTF-8编码来处理非ASCII字符。虽然在Python3中,字符串是默认以Unicode形式存储的,但是当json.dumps()将Python字符串转换为JSON格式时,非ASCII字符会自动被转义为Unicode码点(例如\u......
  • linux手动安装nodejs
    1.下载nodejs的安装文件,要选择编译好的  预构建二进制文件 这样就不用自己再编译安装了 https://nodejs.org/zh-cn/download/prebuilt-binaries2.下载完成后使用如下命令解压缩文件1)使用xz-dnode-v18.20.4-linux-x64.tar.xz 解压缩得到node-v18.20.4-linux......
  • 【转】数据模型——从D模型到C/C'模型的浅谈
    数据模型——从D模型到C/C'模型的浅谈原文链接:https://zhuanlan.zhihu.com/p/521380989DSColloquium在DA和ML中寻找life的wisdom(真香~)​关注 15人赞同了该文章一、引言在日常企业运营和发展过程中,总会遇到这么一个情景:已有的业务系统的设计与实施......
  • 【JavaScript系列八】—讲述JS学习历程的知识分享!
    前言本篇主要讲述JS中较为重要的一环,函数的用法,深拷贝和浅拷贝的概念和区别,闭包和递归,包括一些案例:例如递归实现斐波那契数列,求阶乘等等一、关于函数定义函数的方式function关键字函数表达式(匿名函数)varfn=function(){}newfunction()函数的调用及其this指向普通函数—......