Threejs入门之三:让物体跟随鼠标动起来

这篇具有很好参考价值的文章主要介绍了Threejs入门之三:让物体跟随鼠标动起来。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

上一节我们创建了一个三维的立方体,将其放在了浏览器窗口中,但是目前来讲它只是一个静态的图片,我们并不能通过鼠标控制其旋转、缩放和移动,这一节我们来实现用鼠标控制物体的运动。
首先我们要了解一个概念,在三维场景中,我们要控制物体旋转,实际上不是物体在旋转,而是我们的相机(还记得上一节中说的相机吗)在围绕物体旋转,就像电影中的镜头拉近一样,是相机在动,不是物体在动,所以,在Threejs中要想让我们的物探动起来,我们需要引入一个轨道控制器(OrbitControls),它可以使得相机围绕目标进行轨道运动,下面我们来实现下
1.导入轨道控制器OrbitControls
OrbitControls是ThreeJS的一个扩展库,其本身不在threejs的基础库里面,其位于threejs—examples—jsm—controls文件夹下面,我们在上一节引入threeJS的下面添加如下代码进行引入

"three/addons/": "../../three.js/examples/jsm/"

完整代码如下

<script type="importmap">
    {
      "imports":{
        "three":"../../three.js/build/three.module.js",
        "three/addons/": "../../three.js/examples/jsm/"

      }
    }
  </script>

2.在index.js中使用导入OrbitControls

// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

3.创建一个轨道控制器对象

// 设置相机控件轨道控制器OrbitControls
const controls = new OrbitControls(camera,renderer.domElement)

轨道控制器对象里面有两个参数,第一个是你要控制的是哪一个相机,第二个是用于事件监听的HTML元素,也就是你要控制的范围。
4.相机设置完成后,我们运行浏览器,点击鼠标控制物体发现物体依然没有旋转,这是因为我们虽然用鼠标控制物体旋转了,但是我们的画布没有重新渲染导致的,我们前面提到过,要想将场景中物体展示到容器中,需要用渲染器进行渲染后展示,所以,我们还需要通过监听事件来监听OrbitControls的change事件,在监听到OrbitControls的change事件改变时,我们重新渲染场景就可以了

// 监听轨道控制器的change事件,监听到改变时,重新执行渲染操作渲染三维场景
controls.addEventListener('change',function(){
  renderer.render(scene,camera)
})

现在我们通过鼠标来控制物体放大缩小、旋转移动都可以了。
threejs鼠标移动物体,ThreeJS,javascript,3d,html5
附上完整代码如下
index.html的代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    #webgl {
      width: 400px;
      height: 300px;
      margin: 0 auto;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <div id="webgl" ></div>
  <script type="importmap">
    {
      "imports":{
        "three":"../../three.js/build/three.module.js",
        "three/addons/": "../../three.js/examples/jsm/"

      }
    }
  </script>
  <script type="module" src="./index.js">
  </script>
</body>
</html>

index.js的代码如下文章来源地址https://www.toymoban.com/news/detail-680460.html

import * as THREE from 'three'
// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

// 创建一个三维场景,相当于一个画布
const scene = new THREE.Scene()

// 创建一个几何体,相当于在画布上想要呈现的物体
const geometry = new THREE.BoxGeometry(50,50,50)

// 创建材质,相当于画画时的颜料
const material = new THREE.MeshBasicMaterial({
  color:0xff0000,//设置颜色
  transparent:true,//开启透明
  opacity:0.5//设置透明度
})
// 添加辅助坐标轴
// const axeshelper = new THREE.AxesHelper(100)
// scene.add(axeshelper)

// 创建物体,相当于在画物体的过程,将上面的几何体和材质结合起来形成物体
const mesh = new THREE.Mesh(geometry,material)
// 设置物体在场景中的位置
mesh.position.set(0,10,0)
// 将物体添加到场景中,相当于将物体添加到画布汇总
scene.add(mesh)
// console.log(mesh);

// 创建一个相机,相机相当于画家的眼睛,
// PerspectiveCamera 透视相机:有四个参数,fov:视角,aspect:宽高比,一般定位为相机照射物体的宽高比值,
// near:近端点,离相机最近的点,far:远端点,离相机最远的点
const width = 400
const height = 300
const camera = new THREE.PerspectiveCamera(30,width/height,0.1,3000)
// 设置相机的位置,即画家的眼睛离画布的位置
camera.position.set(200,200,200)
// 设置相机要看的位置,即眼睛要看的物体的位置
// 相机看原点
// camera.lookAt(0,0,0)
// 相机看向物体
camera.lookAt(mesh.position)
// 创建webgl渲染器
const renderer = new THREE.WebGLRenderer()
// canvas画布宽高
renderer.setSize(width,height)
// 执行渲染操作,将scene和camera关联起来,
// 相当于太阳,你有一个空间scene,空间中有物体,有人的眼睛camera,但是没有光是看不到物体的
renderer.render(scene,camera)
// 把渲染结果canvas画布,添加到网页上
// document.body.appendChild(renderer.domElement)
document.getElementById('webgl').appendChild(renderer.domElement)

// 设置相机控件轨道控制器OrbitControls
const controls = new OrbitControls(camera,renderer.domElement)
// 监听轨道控制器的change事件,监听到改变时,重新执行渲染操作渲染三维场景
controls.addEventListener('change',function(){
  renderer.render(scene,camera)
})

到了这里,关于Threejs入门之三:让物体跟随鼠标动起来的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • threejs(6)-操控物体实现家居编辑器

    2024年02月07日
    浏览(137)
  • ThreeJS-3D教学三:平移缩放+物体沿轨迹运动

    我们在项目中会有一些这样的需求,我们可视化一个场景,需要俯视、平移、缩放,方便观察场景中的数据或者模型,之所以把这个案例拿出来 1、这是个很实用的需求,我相信很多人会用到 2、我自己认为在实际案例中我们可以学习相关知识点更易吸收些 为了丰富本篇文章

    2024年02月03日
    浏览(51)
  • ThreeJS-移动(三)

    关键代码 通过设置定位信息进行移动 mesh.position.set(0, 0, 0); 拖动物体:按住ctrl+按住鼠标左键 进行拖动 代码:  template   div id=\\\"three_div\\\"   /div /template   script import * as THREE from \\\"three\\\"; import {OrbitControls } from \\\'three/examples/jsm/controls/OrbitControls\\\' export default {   name: \\\"HOME\\\",   components:

    2024年02月10日
    浏览(46)
  • ThreeJs的场景实现鼠标拖动旋转控制

            前面一个章节中已经实现在场景中放置一个正方体,并添加灯光使得正方体可见。但是由于是静态的还不能证明是3D的,我们需要添加一些控制器,使得通过鼠标控制正方体可以动起来,实现真正的3D效果,由此引入OrbitControls组件,他实质是改变相机的位置,实现

    2024年02月07日
    浏览(59)
  • threejs 实现场景漫游效果(相机沿着自定义轨道移动)

    效果视频: Video_22-06-15_18-10-11 实现思路:先创建一条曲线curve作为运动路线,然后使用const points = curve.getPoints(n)方法将curve分成n-1段;我们可以通过points[n] 获取第n个点的坐标位置;将相机的位置设置为这个坐标,在动画中不断地修改n的值达到移动的效果;具体操作如下:

    2024年02月11日
    浏览(95)
  • Threejs入门之四:Threejs中的光

    前面我们用Threejs创建了一个3D立方体到浏览器,并使其跟随鼠标旋转和缩放,但是,上帝说要有光,于是就有了光~~~额,好吧,这一节我们来认识下Threejs中的灯光,Threejs提供了很多灯光的API,这里我们主要了解下环境光(AmbientLight)、点光(PointLight)、平行光(DirectionalLight)、和聚

    2024年02月12日
    浏览(42)
  • threejs 相机控制camera-controls鼠标和触摸

    npm i camera-controls 官网地址:相机控制 - npm (npmjs.com) three.js 的相机控件,类似于 THREE。OrbitControls 还支持平滑过渡和 es6 导入。 相机移动 用户输入 轨道旋转 鼠标左键拖动/触摸:单指移动 多莉(变焦) 鼠标中键拖动,或鼠标滚轮/触摸:双指捏合或捏出 卡车(平底锅) 鼠标

    2024年01月24日
    浏览(41)
  • Threejs入门之二十四:Threejs中的Animation动画

    Threejs为我们提供了强大的动画系统接口API,通过这些接口,我们可以很轻松的实现物体的移动、旋转、缩放、颜色变化、透明度变化等各种效果,今天我们就来了解下Threejs中的动画系统。 首先我们先了解几个在Threejs动画系统中比较重要的组件 关键帧轨道(KeyframeTrack)是关键

    2024年02月10日
    浏览(47)
  • Threejs入门之十四:Threejs中的组(Group)对象

    组其实就是一个集合,将不同的物体添加到一个组中,就形成了一个集合; 比如我们可以创建两个物体,然后将这两个物体使用group.add方法添加到同一个组中 Group的特性 在Threejs的官方文档中介绍Group时说它几乎与Object3D相同,因此,Group的属性和Object3D的相同 .children属性 使用

    2024年02月06日
    浏览(80)
  • CSS实现鼠标跟随 3D 旋转效果,让交互活起来

    一淘模板(56admin.com)给大家介绍一下如何使用CSS实现有意思的鼠标跟随 3D 旋转效果,让交互更加生动,希望对大家有所帮助! 今天,群友问了这样一个问题,如下所示的鼠标跟随交互效果,如何实现: 简单分析一下,这个交互效果主要有两个核心: 借助了 CSS 3D 的能力 元

    2024年02月10日
    浏览(95)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包