threejs 实现场景漫游效果（相机沿着自定义轨道移动）

已于 2022-06-15 19:02:11 修改
阅读量7.5k 收藏 33
点赞数 15
分类专栏： threejs 文章标签： 3d javascript threejs webgl 场景漫游
于 2022-06-15 18:40:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40856652/article/details/125302355
版权

一、先看看效果

在这里插入图片描述
效果视频：

Video_22-06-15_18-10-11

二、实现方法：

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

1、创建curve曲线

获取点坐标的数据可以参照 threejs点击获取三维坐标(Three.js获取鼠标点击的三维坐标)

// 点的坐标数据
const p
了解本专栏 订阅专栏 解锁全文 超级会员免费看
慢步者_rambler
关注
  • 15
    点赞
  • 踩
  • 33
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 99
    评论
专栏目录
订阅专栏
three.js自定义路径漫游
12-27
基于three.js封装的自定义漫游小代码，传入最少两点三维坐标，即可实现飞行漫游。
threejs双人称场景漫游
04-01
threejs双人称场景漫游
three.js室内场景+模型第三人称行走demo
05-21
three.js室内场景+模型第三人称行走demo 跟随模型的第三人称相机控制，以键盘wasd控制模型的行走，以鼠标控制模型的朝向。 具体效果参见：https://blog.csdn.net/u014529917/article/details/106610955
three.js应用篇（五）模型内第一视角漫游
最新发布
weixin_44137047的博客
05-12 243
three.js实现第一视角漫游
three.js实现全景展厅漫游(项目实战)
qq_52730657的博客
10-25 1448
众所周知实现全景有很种不同的方法,今天主要介绍使用three.js来实现效果，Three.js是基于原生WebGL封装运行的三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。
threejs室内展示漫游
12-21
常见建筑模型加载，模型常见室内效果渲染，室内场景漫游行走，室内家具动态提示。
threejs轨迹漫游、Scissor、setViewport
qq_43157227的博客
02-15 1726
threejs轨迹漫游、Scissor、setViewport
threeJs进阶 让模型沿着指定轨迹移动与转向
c_qianxia5040的博客
05-10 4758
效果图：涉及相关知识点：欧拉对象和四元数主要用来表达对象的旋转信息。关键词：欧拉Euler、四元数Quaternion、矩阵Matrix4。
threejs以第一人称进行人物漫游，以wasd来控制人的模型，不使用PointerLockControls，需要碰撞检测。可以使用插件
书读百遍，其义自见
03-22 1860
threejs以第一人称进行人物漫游，以wasd来控制人的模型，不使用PointerLockControls，需要碰撞检测。可以使用插件
Threejs 中学shader001----three.js中使用GLSL指南
qq_21476953的博客
09-10 2671
https://qiita.com/kitasenjudesign/items/1657d9556591284a43c8 输入和输出 VertexShader 没有输入 在2D平面上输出gl_Position（vec4）顶点坐标 输出gl_PointSize（float）点的大小 FragmentShader 输入gl_FrontFacing（bool）多边形的前后布尔值 输入gl_Fr...
webgl(threejs)实现室内漫游-导航功能-应用于移动端
05-12
webgl(threejs)实现室内漫游-导航功能-应用于移动端。 模型是采用glb模型。 基于threejs来实现的webgl项目，能应用于手机app、小程序等。 后期结合室内蓝牙定位技术，来实现实时的室内导航。 具体的项目实现方式，...
Three.js全景漫游代码实现
04-26
代码可以实现全景漫游，切换全景图照片即可，鼠标实现交互
three.js仿人行走的动画效果
04-08
利用three导入json模型 饼渲染 加上three自带的动画效果 模拟像人一样走路的动画。
arcgis结合 three js 实现动态管网效果
09-23
本话题主要探讨如何利用ArcGIS和Three.js这两个强大的库来实现动态管网的效果。ArcGIS是Esri公司开发的专业地理信息系统，而Three.js则是一个流行的JavaScript库，用于在浏览器中创建3D图形，特别适合构建交互式的、...
Three.js 进阶之旅：全景漫游-高阶版在线看房
2301_76429513的博客
08-01 644
浏览网页时，常被一些基于鼠标滚轮控制的页面动画所惊艳到，比如greensock 官网这些showcase案例页面就非常优秀，它们大多数都是使用Tween.jsgasp及greensock提供的一些动画扩展库实现的。使用Three.js也能很容易实现丝滑的滚动效果，本文使用ReactThree.js技术栈，实现一个《塞尔达传说：王国之泪》主题风格基于滚动控制的平滑滚动图片展示页面。通过本文的阅读，你将学习到的知识点包括：了解R3F中及基本原理及用法；了解库的基本组成，学习使用它提供的Preload。
ThreeJS使用Curve曲线让物体沿轨迹运动
xyphf的博客
12-09 5190
创建几何体的顶点数据可以手动定义，可以自定义一个函数创建，也可使用three.js提供的函数创建，本节课主要讲解一些2D或3D线条的构造函数及其方法属性， 如何通过这些构造函数获得一系列曲线上的顶点数据。 线性曲线（直线） LineCurve LineCurve3圆弧、椭圆弧EllipseCurve样条曲线 SplineCurve三维样条曲线 CatmullRomCurve3贝塞尔曲线 QuadraticBezierCurve（二次贝塞尔曲线） QuadraticBezierCurve3（三维二次贝塞..
Threejs入门之二十四：Threejs中的Animation动画
九仞山的专栏
04-18 4540
详细介绍了Threejs中的动画API，并通过一个实例实现了移动动画和旋转动画，对Threejs中的关键帧轨道、动画剪辑、动画混合器和动画动作进行了详细介绍
基于three-mesh-bvh实现第一人称及第三人称的漫游
zgynbnbnb的博客
04-02 774
这篇文章主要介绍在3d场景中实现第一人称与第三人称切换以及碰撞监测的漫游方案。人称视角的场景漫游主要需要解决两个问题，人物在场景中的移动和碰撞检测。移动与碰撞功能是所有三维场景首先需要解决的基本问题，今天我们就通过最基本的threejs来完成第一人称视角的场景漫游功能。
threejs 画线
04-25
Three.js是一个用于创建和展示3D图形的JavaScript库。它提供了一系列功能强大的工具和API，可以轻松地在Web浏览器中创建交互式的3D场景和动画效果。 要使用Three.js来画线，你可以按照以下步骤进行操作： 1. 创建一个场景(Scene)对象，用于容纳所有的3D元素。 2. 创建一个相机(Camera)对象，用于定义观察者的视角和位置。 3. 创建一个渲染器(Renderer)对象，用于将场景渲染到HTML页面上。 4. 创建一个几何体(Geometry)对象，用于定义线的形状和位置。 5. 创建一个材质(Material)对象，用于定义线的颜色和外观。 6. 创建一个线条(Line)对象，将几何体和材质结合起来。 7. 将线条添加到场景中。 8. 渲染场景，将结果显示在HTML页面上。 下面是一个简单的示例代码，演示了如何使用Three.js来画一条线： ```javascript // 创建场景 var scene = new THREE.Scene(); // 创建相机 var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; // 创建渲染器 var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 创建几何体 var geometry = new THREE.Geometry(); geometry.vertices.push(new THREE.Vector3(-2, 0, 0)); geometry.vertices.push(new THREE.Vector3(0, 2, 0)); geometry.vertices.push(new THREE.Vector3(2, 0, 0)); // 创建材质 var material = new THREE.LineBasicMaterial({ color: 0x00ff00 }); // 创建线条 var line = new THREE.Line(geometry, material); // 将线条添加到场景中 scene.add(line); // 渲染场景 function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate(); ``` 这段代码创建了一个场景，一个相机和一个渲染器。然后，它创建了一个几何体，定义了线的形状和位置。接着，它创建了一个材质，定义了线的颜色和外观。最后，它创建了一个线条，并将线条添加到场景中。通过调用`renderer.render(scene, camera)`来渲染场景，将结果显示在HTML页面上。 希望这个简单的示例能够帮助你理解如何使用Three.js来画线。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 99
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

慢步者_rambler

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值