Three.js曲线篇 8.管道漫游

news/2024/12/11 18:32:25/

目录

创建样条曲线

创建管道

 透视相机漫游

完整代码


大家不要被这个“管道漫游”这几个字所蒙骗了,学完后大家就知道这个知识点有多脏了。我也是误入歧途,好奇了一下“管道漫游”。好了,现在就给大家展示一下为啥这个只是点脏了。

 我也废话少说了,带大家实现这个轨道漫游。

创建样条曲线

javascript">    // 3d样条曲线const path = new THREE.CatmullRomCurve3([new THREE.Vector3(-50, 20, 90),new THREE.Vector3(-10, 40, 40),new THREE.Vector3(0, 0, 0),new THREE.Vector3(60, -60, 0),new THREE.Vector3(90, -40, 60),new THREE.Vector3(120, 30, 30),]);

穿件完样条曲线后,然后需要 TubeGeometry 来创建管道。

创建管道

javascript">    // 创建管道const geometry = new THREE.TubeGeometry(path, 200, 5, 30);const texLoader = new THREE.TextureLoader();const url = new URL('../../assets/images/gd.png', import.meta.url).href;const texture = texLoader.load(url);texture.wrapS = THREE.RepeatWrapping;texture.wrapT = THREE.RepeatWrapping;const material = new THREE.MeshBasicMaterial({ map: texture, side: THREE.DoubleSide });const mesh = new THREE.Mesh(geometry, material);scene.add(mesh);

 透视相机漫游

透视相机漫游,其实就是按照按照样条曲线的轨迹来设置,通过 样条曲线上的一个方法 getSpacedPoints 可以获取样条曲线上一定的点位数量,然后使用循环来设置相机的位置。

javascript">    // 从曲线上等间距获取一定数量点坐标const pointsArr = path.getSpacedPoints(500);let i = 0;/* ------------------------------动画函数--------------------------------- */const animation = () => {if (i < pointsArr.length - 1) {// 相机位置设置在当前点位置camera.position.copy(pointsArr[i]);// 曲线上当前点pointsArr[i]和下一个点pointsArr[i+1]近似模拟当前点曲线切线// 设置相机观察点为当前点的下一个点,相机视线和当前点曲线切线重合camera.lookAt(pointsArr[i + 1]);camera.updateProjectionMatrix();controls.target.copy(pointsArr[i + 1]);i += 1; //调节速度} else {i = 0}controls.update();// 如果不调用,就会很卡renderer.render(scene, camera);requestAnimationFrame(animation);}animation();

这里给大家带来的知识点就是利用线条来实现相机漫游的效果。

完整代码

javascript">import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'export default (domId) => {/* ------------------------------初始化三件套--------------------------------- */const dom = document.getElementById(domId);const { innerHeight, innerWidth } = windowconst scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera(45, innerWidth / innerHeight, 1, 2000);camera.position.set(50, 50, 50);camera.lookAt(scene.position);const renderer = new THREE.WebGLRenderer({antialias: true,// 抗锯齿alpha: false,// 透明度powerPreference: 'high-performance',// 性能// logarithmicDepthBuffer: true,// 深度缓冲})renderer.shadowMap.enabled = true;// 开启阴影renderer.shadowMap.type = THREE.PCFSoftShadowMap;// 阴影类型renderer.outputEncoding = THREE.sRGBEncoding;// 输出编码renderer.toneMapping = THREE.ACESFilmicToneMapping;// 色调映射renderer.toneMappingExposure = 1;// 色调映射曝光renderer.physicallyCorrectLights = true;// 物理正确灯光renderer.setPixelRatio(window.devicePixelRatio);// 设置像素比renderer.setSize(innerWidth, innerHeight);// 设置渲染器大小dom.appendChild(renderer.domElement);// 重置大小window.addEventListener('resize', () => {const { innerHeight, innerWidth } = windowcamera.aspect = innerWidth / innerHeight;camera.updateProjectionMatrix();renderer.setSize(innerWidth, innerHeight);})/* ------------------------------初始化工具--------------------------------- */const controls = new OrbitControls(camera, renderer.domElement) // 相机轨道控制器controls.enableDamping = true // 是否开启阻尼controls.dampingFactor = 0.05// 阻尼系数controls.panSpeed = -1// 平移速度const axesHelper = new THREE.AxesHelper(10);scene.add(axesHelper);/* ------------------------------正题--------------------------------- */// 3d样条曲线const path = new THREE.CatmullRomCurve3([new THREE.Vector3(-50, 20, 90),new THREE.Vector3(-10, 40, 40),new THREE.Vector3(0, 0, 0),new THREE.Vector3(60, -60, 0),new THREE.Vector3(90, -40, 60),new THREE.Vector3(120, 30, 30),]);// 创建管道const geometry = new THREE.TubeGeometry(path, 200, 5, 30);const texLoader = new THREE.TextureLoader();const url = new URL('../../assets/images/gd.png', import.meta.url).href;const texture = texLoader.load(url);texture.wrapS = THREE.RepeatWrapping;texture.wrapT = THREE.RepeatWrapping;const material = new THREE.MeshBasicMaterial({ map: texture, side: THREE.DoubleSide });const mesh = new THREE.Mesh(geometry, material);scene.add(mesh);// 从曲线上等间距获取一定数量点坐标const pointsArr = path.getSpacedPoints(500);let i = 0;/* ------------------------------动画函数--------------------------------- */const animation = () => {if (i < pointsArr.length - 1) {// 相机位置设置在当前点位置camera.position.copy(pointsArr[i]);// 曲线上当前点pointsArr[i]和下一个点pointsArr[i+1]近似模拟当前点曲线切线// 设置相机观察点为当前点的下一个点,相机视线和当前点曲线切线重合camera.lookAt(pointsArr[i + 1]);camera.updateProjectionMatrix();controls.target.copy(pointsArr[i + 1]);i += 1; //调节速度} else {i = 0}controls.update();// 如果不调用,就会很卡renderer.render(scene, camera);requestAnimationFrame(animation);}animation();
}

最后,透露一下为啥脏。

这颜色,这个洞,这个词,总觉得怪怪的。 


http://www.ppmy.cn/news/1554290.html

相关文章

用友U8+ API接口使用教程

前言 U8和其他的公开的开放API接口有一些差异&#xff0c;他是需要先对接的到代理服务器&#xff0c;通过代理服务器进行对接&#xff0c;所以只要保证U8能上网就能对接&#xff0c;和畅捷通T的模式有点类似 流程&#xff1a; 注册成为开发者&#xff08;用于创建用友U8 API应…

解决uview ui赋值后表单无法通过验证

微信小程序中 主要还是文档有这样一段话&#xff1a;//如果需要兼容微信小程序&#xff0c;并且校验规则中含有方法等&#xff0c;只能通过setRules方法设置规则。 添加即可通过 onReady() {//如果需要兼容微信小程序&#xff0c;并且校验规则中含有方法等&#xff0c;只能通过…

在react中使用组件的标签页写订单管理页面

在制作商城类的项目中&#xff0c;成功购物后&#xff0c;会生成订单&#xff0c;我们跳转到订单页面后就会需要使用这个标签页的组件。 首先呢我需要一个来渲染标签标题的一个数组。但是可以更便捷的方法就是直接将数组写入tabs标签内就进行遍历渲染。 // 使用styleCss对象中…

Day2——需求分析与设计

教师端签到应用软件的需求分析&#xff1b; 产品经理如何写好产品需求文档&#xff08;附模板&#xff09; 需求分析是软件开发过程中的关键步骤&#xff0c;它确保了开发的软件能够满足用户的需求。以下是进行需求分析的具体步骤&#xff1a; 1. 确定分析目标 明确教师端签到…

使用go生成、识别二维码

1、下载 # 创建目录 # 进入目录 # 执行 go mod init xxx 命令&#xff08;即&#xff1a;在当前目录初始化创建一个模块&#xff09;# 下载gozxing go get github.com/makiuchi-d/gozxing 2、生成二维码 package mainimport ("image/png""os""gith…

EMQ分布式MQTT消息服务器部署指南

1. EMQ简介 EMQ(Erlang MQTT Broker) 是基于Erlang/OTP平台开发的开源MQTT消息服务器,支持百万级连接和分布式集群。主要特点: 完整支持MQTT v3.1/v3.1.1/v5.0协议支持WebSocket协议支持分布式集群支持SSL/TLS加密传输提供Web管理控制台2. EMQ默认端口说明 EMQ默认开启以下服…

fastadmin集成xunsearch实战应用

背景 项目需求用到搜索引擎功能&#xff0c;fastadmin框架有比较成熟的插件xunsearch&#xff0c;如何灵活的提供给第三方产品使用。实战中根据不同条件查询记录 示例 //全文搜索public function search(){$keywords $this->request->request(keywords);$type (int)…

今天调了个转速的小BUG

同事说转速表有个bug&#xff0c;转速停止后&#xff0c;继电器没有恢复到初始状态。若停止之前是报警&#xff0c;继电器吸合&#xff0c;则停止后继电器还是吸合。我心想不会啊&#xff0c;这软件都弄了好几年了&#xff0c;一直也没出现过状况。 经过与调试同事的沟通&#…