three.js实现鼠标点击控制物体移动(带动画效果,位置精确)

这篇具有很好参考价值的文章主要介绍了three.js实现鼠标点击控制物体移动(带动画效果,位置精确)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

通过查阅各种资料,最终确定解决方案,动画效果使用gsap组件库实现,也可不用,代码稍作修改即可。解决鼠标点击坐标偏移问题,复制可直接运行。
threejs鼠标移动物体,前端,javascript,开发语言

完整代码如下:文章来源地址https://www.toymoban.com/news/detail-726690.html

import * as THREE from "three";
// 导入动画库
import gsap from "gsap";
// 导入轨道控制器
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'

// 1、创建场景
const scene = new THREE.Scene();

// 2、创建相机
const camera = new THREE.PerspectiveCamera(
  65,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

// 设置相机位置
camera.position.set(0, -10, 2);
scene.add(camera);

// 添加物体
// 创建几何体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
const cubeMaterial = new THREE.MeshStandardMaterial();
// 根据几何体和材质创建物体
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.castShadow = true;
scene.add(cube);

// 添加平面
const geometry = new THREE.PlaneGeometry( 20, 20 );
const material = new THREE.MeshStandardMaterial( {color: 0xCCFFFF, side: THREE.DoubleSide} );
const plane = new THREE.Mesh( geometry, material );
plane.receiveShadow = true;
plane.position.z = -0.5;
scene.add( plane );

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 开启阴影计算
renderer.shadowMap.enabled = true;
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);

// 使用渲染器,通过相机将场景渲染进来
renderer.render(scene, camera);

// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 设置控制器阻尼,让控制器更有真是效果,必须在动画循环里调用update()
controls.enableDamping = true;

// 添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

var mouse = new THREE.Vector2();
function onMouseClick( e ) {
	// 获取鼠标点击点的场景坐标
  const mousePosition = getMousePosition(event.clientX, event.clientY);

  // 将物体的位置更新为鼠标点击点的位置
  // 直接移动
  // cube.position.copy(mousePosition);
  // 带有动画效果
  gsap.to(cube.position,{
    x: mousePosition.x,
    duration: 3
  });
  gsap.to(cube.position,{
    y: mousePosition.y,
    duration: 3
  });
}

// 获取鼠标点击点的场景坐标
// 解决坐标偏移问题核心代码
function getMousePosition(clientX, clientY) {
  const mouse = new THREE.Vector2();
  mouse.x = (clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(clientY / window.innerHeight) * 2 + 1;

  const raycaster = new THREE.Raycaster();
  raycaster.setFromCamera(mouse, camera);
  const intersects = raycaster.intersectObjects(scene.children);

  if (intersects.length > 0) {
      return intersects[0].point;
  }

  return null;
}
window.addEventListener( 'click', onMouseClick, false );

// 添加平行光
const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
directionalLight.position.set(10,-10,10);
directionalLight.castShadow = true;
scene.add( directionalLight );

// 添加环境光
const light = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( light );

// 实现每一帧渲染一次场景和相机
function render(time) {
    controls.update();
    renderer.render(scene,camera);
    // 每一帧执行一次render函数
    requestAnimationFrame(render);
}
render();

// 监听画面变化,更新渲染画面
window.addEventListener("resize", ()=>{
    // 更新摄像头
    camera.aspect = window.innerWidth / window.innerHeight;
    // 更新摄像机的投影矩阵
    camera.updateProjectionMatrix();

    // 更新渲染器
    renderer.setSize(window.innerWidth,window.innerHeight);
    // 设置渲染器的像素比
    renderer.setPixelRatio(window.devicePixelRatio);
})

到了这里,关于three.js实现鼠标点击控制物体移动(带动画效果,位置精确)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • VUE使用Three.js实现模型,点击交互,相机旋转视角跟随移动(Threejs中使用Tweenjs,含demo源码)

    目录 一、Three.js是什么? 二、VUE简单使用Three.js步骤 1.npm安装 2.template模板 3.引入库 4.定义全局变量 5.初始化场景 6.初始化相机 7.初始化灯光 8.初始化渲染器 9.创建模型(这里我搭建的模型是一个简单双面货架模型) 10.根据浏览器窗口自适应 11.初始化函数,页面加载完成时调用

    2024年02月03日
    浏览(69)
  • threejs点击获取三维坐标(Three.js获取鼠标点击的三维坐标)

    绑定点击事件,通过 THREE.Raycaster 光线投射,用于确定鼠标点击位置上有哪些物体, raycaster.intersectObjects(scene.children) 返回点击位置上所有的物体的数组;我们用 var selected = intersects[0] 取第一个,也就是最前面的那个物体;在通过 selected.point 取点坐标

    2024年02月11日
    浏览(127)
  • three.js 点击交互事件 含解决点击的物体与看到的不一致问题(非全屏/多边形偏移)

    在 three.js 中,可以通过添加事件监听器来实现点击交互事件。具体步骤如下: 通过以上方法,可以实现 three.js 中的点击交互事件,并解决点击的物体与看到的不一致问题。

    2024年02月06日
    浏览(62)
  • Unity鼠标控制3D物体的移动、旋转、缩放

    1.使用协程 2.鼠标左键控制物体移动,鼠标碰到物体,物体颜色改变 1. 控制物体左右旋转,上下旋转 2. 控制摄像机以物体为中心旋转 脚本挂载到摄像机上 1. 基于物体本身的Transform的缩放 2. 基于摄像机的远近的缩放 脚本挂载到摄像机上

    2024年02月11日
    浏览(52)
  • Unity鼠标带动物体运动的三种方法

    目录 第一种:物体跟随鼠标移动。 第二种:鼠标拖动物体运动。 第三种:鼠标点到哪,物体运动到哪。 描述:鼠标左键点击物体,将物体拾起,松开鼠标左键,物体跟随鼠标光标移动。再次点击鼠标左键,物体不在跟随鼠标,处于静止状态。 实现方法:射线。 165767804284

    2024年02月02日
    浏览(56)
  • Unity 通过键盘鼠标控制物体移动、旋转、缩放的方法

    在Unity中,使用键盘ADWS键控制物体移动,通过鼠标左键控制物体旋转,鼠标中键控制物体缩放是再常见不过的方法。 方法如下:  效果如下:Unity 通过键盘鼠标控制物体移动、旋转、缩放_哔哩哔哩_bilibili

    2024年02月03日
    浏览(50)
  • 瓦片地图编辑器——实现卡马克卷轴的编辑,键盘控制游戏移动和鼠标点击游戏编辑通过同一个视口实现。

      左边是游戏地图编辑区,右边是地图缓冲区,解决了地图缓冲区拖动bug,成功使得缓冲区可以更新。 AWSD进行移动 鼠标左右键分别是绘制/拖动 按F1健导出为mapv3.txt F2清空数组 打印的是游戏数组 easyx开发devcpp 5.11 easyx20220922版本

    2024年01月25日
    浏览(79)
  • three.js鼠标控制场景旋转

    鼠标控制旋转

    2024年02月17日
    浏览(39)
  • Three.js - 通过键盘控制模型移动和攻击(二十五)

    上节加载了模型和模型动画,本节使用键盘控制模型移动和连贯动画实现攻击动作。 基础模板 上节讲述加载了模型,并实现了动画。本节在上节的基础上进行修改。 修改灯光并添加阴影 开启阴影渲染。 添加方向光,开启阴影投射。 在地面网格上开启阴影接收。 修改模型网

    2024年02月10日
    浏览(55)
  • unity手指、鼠标滑动实现物体360度旋转、点击按钮实现物体旋转

    先创建一个ObjectRotation 脚本 之后将该脚本拖动到需要转动的object上 因为如果每次都真机模拟回很麻烦,所以我加入了让鼠标代替手指滑动的脚本来代替手指输入 同样的也是先创建一个MouseRow 脚本 最后我还需要某笔画沿着坐标旋转,代码如下: 里面有我的其他参数,如果读

    2024年02月11日
    浏览(65)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包