3.js - 运动曲线

这个球,绕着这个红色的线圈转

在这里插入图片描述

代码


import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'let scene,camera,renderer,controls = nulllet moon,earth = null// 根据,一系列的点,创建曲线
let curveconst textureLoader = new THREE.TextureLoader()const clock = new THREE.Clock()const onWindowResize = () => {// 重置相机的宽高比camera.aspect = window.innerWidth / window.innerHeight// 更新相机的投影矩阵camera.updateProjectionMatrix()// 重置渲染器的宽高比renderer.setSize(window.innerWidth, window.innerHeight)// 更新渲染器的像素比renderer.setPixelRatio(window.devicePixelRatio)
}const render = () => {requestAnimationFrame(render)const elapsed = clock.getElapsedTime()let time = (elapsed /10) % 1const point = curve.getPoint(time)// console.log('point=', point) // Vector3 {x: -10, y: 0, z: 10}// 情况一,moon绕着地球转// moon.position.set(Math.sin(elapsed) * 5, 0, Math.cos(elapsed) * 5)// 情况二,moon绕着咱画的线转moon.position.copy(point)// camera.position.copy(point)// camera.lookAt(earth.position)renderer.render(scene, camera)
}const init = () => {const EARTH_RADIUS = 1const MOON_RADIUS = 0.27scene = new THREE.Scene()camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200)// camera.position.set(0, 0, 3)camera.position.set(0, 5, -10)scene.add(camera)const directionLight = new THREE.DirectionalLight(0xffffff) // 平行光directionLight.position.set(0, 0, 1)scene.add(directionLight)const light = new THREE.AmbientLight(0xffffff, 0.5) // 环境光scene.add(light)// 添加地球const earthGeometry = new THREE.SphereGeometry(EARTH_RADIUS, 16, 16)const earthMaterial = new THREE.MeshPhongMaterial({map: textureLoader.load('../public/assets/texture/planets/earth_atmos_2048.jpg'),specularMap: textureLoader.load('../public/assets/texture/planets/earth_specular_2048.jpg'),specular: 0x333333, // 高光部分的颜色,默认值:0x111111(深灰色)shininess: 5, // 高光反射效果的锐利程度,该值越大,高光区域越小且更亮。默认值为30。normalMap: textureLoader.load('../public/assets/texture/planets/earth_normal_2048.jpg'),normalScale: new THREE.Vector2(0.85, 0.85)})earth = new THREE.Mesh(earthGeometry, earthMaterial)scene.add(earth)// 添加月球const moonGeometry = new THREE.SphereGeometry(MOON_RADIUS, 16, 16)const moonMaterial = new THREE.MeshPhongMaterial({map: textureLoader.load('../public/assets/texture/planets/moon_1024.jpg'),shininess: 5})moon = new THREE.Mesh(moonGeometry, moonMaterial)// moon.position.x = 3scene.add(moon)//-------------------------------------------------------------------------------// 根据,一系列的点,创建曲线【参数true:表示曲线是封闭的】curve = new THREE.CatmullRomCurve3([new THREE.Vector3(-10, 0, 10), new THREE.Vector3(-5, 5, 5), new THREE.Vector3(0, 0, 5), new THREE.Vector3(5, -5, 5), new THREE.Vector3(10, 0, 10)], true)// 在曲线里,使用`getPoints()`,获取51个点const points = curve.getPoints(600)// console.log('points=', points) // 一个,包含600个Vector3元素的数组const geometry = new THREE.BufferGeometry().setFromPoints(points)const material = new THREE.LineBasicMaterial({ color: 0xff0000 })const curveObject = new THREE.Line(geometry, material)scene.add(curveObject)//-------------------------------------------------------------------------------renderer = new THREE.WebGLRenderer()renderer.setSize(window.innerWidth, window.innerHeight)document.body.appendChild(renderer.domElement)controls = new OrbitControls(camera, renderer.domElement)controls.minDistance = 5 // 相机可以离目标对象的最小距离为5个单位(意味着,用户无法将相机拉得太近)controls.maxDistance = 100 // 相机可以离目标对象的最大距离为100个单位(意味着,限制了用户可以将相机拉远的最大距离)window.addEventListener('resize', onWindowResize)
}init()
render()

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/53838.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【全新课程】正点原子《基于GD32 ARM32单片机项目实战入门》培训课程上线!

正点原子《基于GD32 ARM32单片机项目实战入门》全新培训课程上线啦!正点原子工程师手把手教你学!彻底解决ARM32单片机项目入门难的问题! 一、课程介绍 本课程专为ARM32单片机的入门学习者设计,涵盖了环境搭建、编程软件使用、模…

ML 系列:机器学习和深度学习的深层次总结(08)—欠拟合、过拟合,正确拟合

ML 系列赛:第 9 天 — Under、Over 和 Good Fit 文章目录 一、说明二、了解欠拟合、过拟合和实现正确的平衡三、关于泛化四、欠拟合五、过拟合六、适度拟合七、结论 一、说明 在有监督学习过程中,对于指定数据集进行训练,训练结果存在欠拟合…

微软Win11 22H2/23H2 九月可选更新KB5043145发布!

系统之家于9月27日发出最新报道,微软针对Windows11系统,发布了九月最新可选更新补丁KB5043145,22H2用户安装后,系统版本号升至22621.4249,23H2用户安装后升至22631.4249。本次更新修复了Edge使用IE模式有时会停止响应等…

本地部署开源在线PPT制作与演示应用PPTist并实现异地远程使用

文章目录 前言1. 本地安装PPTist2. PPTist 使用介绍3. 安装Cpolar内网穿透4. 配置公网地址5. 配置固定公网地址 前言 本文主要介绍如何在Windows系统环境本地部署开源在线演示文稿应用PPTist,并结合cpolar内网穿透工具实现随时随地远程访问与使用该项目。 PPTist …

远程访问软路由

远程访问软路由主要涉及通过互联网从远程位置访问和控制基于软件的路由器系统。以下是远程访问软路由的一般方法: 一、远程访问软路由的方法 通过Web管理界面访问: 适用于大多数支持Web管理的软路由系统。用户只需在浏览器中输入软路由的公网IP地址或域…

[Linux#58][HTTP] 自己构建服务器 | 实现网页分离 | 设计思路

目录 一. 最简单的HTTP服务器 二.服务器 2.0 Protocol.hpp httpServer.hpp 子进程的创建和退出 子进程退出的意义 父进程关闭连接套接字 httpServer.cc argc (argument count) argv (argument vector) 三.服务器和网页分离 思考与补充: 一. 最简单的HTT…

ONFI 5.1:定义、缩写语和约定

address 该地址由一个行地址和一个列地址组成。行地址标识要访问的page、block和LUN。列地址标识要访问的page中的byte或word。 asynchronous 异步是指数据用WE_n信号进行写,RE_n信号进行读。 block 由多个page组成,是擦除操作的最小可寻址单元。 column…

安卓开发板_MTK开发板_联发科开发评估套件Demo板接口介绍

开发板是一种功能丰富的电路平台,专为开发人员设计,集成了多种传感器、扩展接口和通信模块。这使得开发者能够高效进行原型设计和功能验证,极大地简化了软硬件开发的过程。 此次介绍的安卓开发板由MT8788核心板与底板构成,特别之处…

OpenCV视频I/O(5)视频采集类VideoCapture之从视频流中获取下一帧的函数grab()的使用

操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 从视频文件或捕获设备中抓取下一帧。 grab() 函数是 OpenCV 中 VideoCapture 类的一个成员函数,用于从视频流中获取下一帧而不立即检…

AB plc设备数据 转profinet IO项目案例

目录 1 案例说明 1 2 VFBOX网关工作原理 1 3 准备工作 2 4 网关采集AB PLC数据 2 5 用PROFINET IO协议转发数据 4 6 案例总结 7 1 案例说明 设置网关采集AB PLC数据把采集的数据转成profinet IO协议转发给其他系统。 2 VFBOX网关工作原理 VFBOX网关是协议转换网关&#xff0…

Vue.js与Flask/Django全栈开发实战:从零搭建前后端分离的高效Web应用,打造现代化全栈开发体验!

将Vue.js与Flask或Django等后端框架配合使用,可以构建一个全栈的Web应用。以下是一个简要的指南,介绍如何将Vue.js与Flask或Django结合使用。 1. 准备工作 确保你已经安装了Node.js、npm(或yarn)以及Python和相应的包管理工具&am…

【系统交付资料】软件文档交付清单整理套用原件(Word,PPT,Excel)

软件文档交付清单是指在软件开发项目完成后,开发团队需要准备的一份详细清单,用于确保交付的软件产品符合客户需求并达到预期的质量标准。以下是软件文档交付清单中可能包含的一些关键要素 软件资料清单列表部分文档清单:工作安排任务书&…

CSS的弹性盒子模型(Flex box)

弹性盒子模型是CSS3的一种新的布局模式,弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保拥有合适的布局方式,引入弹性盒子模型的目的时提供更加有效的方式来对一个容器中的子元素进行排列,对齐和分配空白空间。 弹性盒子由弹性容…

高密度EEG人脑成像:技术与应用

摘要 EEG是一种非侵入性的人脑神经活动测量技术。随着数字技术的进步,EEG分析已从定性分析幅值和频率调制发展到全面分析记录信号的复杂时空特征。EEG能够在亚秒级的时间范围内测量神经过程,但其空间分辨率较低,这使得难以准确可靠地定位EEG…

unix中父进程如何获取子进程的终止状态

一、前言 本文将介绍在unix系统中,父进程如何获取子进程的终止状态。本文主要围绕如下函数展开: 1.wait 2.waitpid 3.waitid 4.wait3、wait4 在讨论这些函数前,先介绍一个进程从创建到释放子进程的过程。 二、子进程的创建以及终止 在unix…

【JAVA开源】基于Vue和SpringBoot的师生健康管理系统

博主说明:本文项目编号 T 052 ,文末自助获取源码 \color{red}{T052,文末自助获取源码} T052,文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析…

InfluxDB数据库在Windows中的部署与运行

本文介绍在Windows电脑中,下载、安装、部署并运行InfluxDB数据库服务的方法。 InfluxDB是一个开源的时间序列数据库,专为处理时间序列数据而设计。它最初发布于2013年,目前已被广泛应用于监控、日志记录、物联网、实时分析等领域,…

备战软考Day04-计算机网络

1、计算机网络的分类 2、七层网络体系结构 3、网络的设备与标准 4、TCP/IP协议族 TCP/IP作为Internet的核心协议,被广泛应用于局域网和广域网中,目前已成为事实上的国际标准 1、TCP/IP分层模型 TCP/IP协议是Internet的基础和核心,和OSI参考…

raylib实现生产者消费者模型增加缓冲提高帧率

原来增加了四叉树导致帧率下降 后来学了生产者消费者模型&#xff0c;尝试追加缓冲池&#xff0c;剥离主函数查找需要更新的数据 帧率上升稳定到60帧 多了10 帧 中间工程主要是探索数据结构体怎么安排 // 参考自 https://zhuanlan.zhihu.com/p/693482704 #include <stdio.…

OJ在线评测系统 在Linux虚拟机搭建Docker 概念 入门 安装

Docker的基本概念 为什么要用docker容器技术 为了提升系统的安全性 把不同的程序和宿主机进行隔离 使得某个程序 应用的执行不会影响到系统本身 docker技术可以实现程序和宿主机的隔离 容器可以理解成对一系列应用程序、服务和环境的封装 从而把程序运行在一个隔离的 封闭…