Three.js--》实现3d地月模型展示

news2024/11/27 16:17:28

目录

项目搭建

初始化three.js基础代码

创建月球模型

添加地球模型

添加模型标签

今天简单实现一个three.js的小Demo，加强自己对three知识的掌握与学习，只有在项目中才能灵活将所学知识运用起来，话不多说直接开始。

项目搭建

本案例还是借助框架书写three项目，借用vite构建工具搭建vue项目，vite这个构建工具如果有不了解的朋友，可以参考我之前对其讲解的文章：vite脚手架的搭建与使用 。搭建完成之后，用编辑器打开该项目，在终端执行 npm i 安装一下依赖，安装完成之后终端在安装 npm i three 即可。

<template>
  <!-- 地月模型 -->
  <EarthMoonSurrounding></EarthMoonSurrounding>
</template>

<script setup>
import EarthMoonSurrounding from './components/EarthMoonSurrounding.vue';
</script>

<style lang="less">
  *{
    margin: 0;
    padding: 0;
  }
</style>

初始化three.js基础代码

three.js开启必须用到的基础代码如下：

导入three库：

import * as THREE from 'three'

初始化场景：

const scene = new THREE.Scene()

初始化相机：

const camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,200)
camera.position.set(10,5,20)

初始化渲染器：

const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(window.innerWidth,window.innerHeight)

监听屏幕大小的改变，修改渲染器的宽高和相机的比例：

window.addEventListener("resize",()=>{ 
  renderer.setSize(window.innerWidth,window.innerHeight)
  camera.aspect = window.innerWidth/window.innerHeight
  camera.updateProjectionMatrix()
})

设置渲染函数：

const render = () =>{ 
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

进行挂载：

onMounted(()=>{
  render()
})

ok，写完基础代码之后，接下来开始具体的Demo实操。

创建月球模型

首先这里通过直接给画布的canvas标签添加css样式，给其一个背景图片作为背景：

canvas{
  background-image: url('../../public/images/star.jpg');
  background-size: cover;
}

然后使用TextureLoader用于加载图片纹理的工具，将图片文件加载为 Three.js 中的纹理对象，并且可以将纹理应用到场景中的任何物体上，从而实现更加生动的渲染效果。

// 创建月球
const moonGeometry = new THREE.SphereGeometry(MOON_RADIUS,16,16)
const moonMaterial = new THREE.MeshPhongMaterial({
  map: textureLoader.load('/public/textures/planets/moon_1024.jpg')
})
const moon = new THREE.Mesh(moonGeometry, moonMaterial)
moon.receiveShadow = true
moon.castShadow = true;
scene.add(moon)

创建好模型之后给场景中添加光源：

// 创建添加聚光灯光源
const dirLight = new THREE.SpotLight(0xffffff)
dirLight.position.set(0,0,10)
dirLight.intensity = 1
dirLight.castShadow = true
scene.add(dirLight)
// 添加环境光
const aLight = new THREE.AmbientLight(0xffffff)
aLight.intensity = 0.03
scene.add(aLight)

在渲染函数中通过getElapsedTime方法计算动画经过的时间或者控制动画的播放速度，来动态改变月球位置，让其绕圆周开始运动。

let clock = new THREE.Clock();
// 设置渲染函数
const render = () =>{ 
  const elapsed = clock.getElapsedTime()
  // 月球旋转
  moon.position.set(Math.sin(elapsed)*5,0,Math.cos(elapsed)*5)
  renderer.render(scene,camera)
  requestAnimationFrame(render)
}

添加地球模型

这里也采用TextureLoader用于加载图片纹理的工具，将图片文件加载为 Three.js 中的纹理对象，并且可以将纹理应用到场景中的任何物体上，从而实现更加生动的渲染效果。

// 创建地球
const earthGeometry = new THREE.SphereGeometry(EARTH_RADIUS,16,16)
const earthMaterial = new THREE.MeshPhongMaterial({
  map: textureLoader.load('/public/textures/planets/earth_atmos_2048.jpg'),
  specularMap: textureLoader.load('/public/textures/planets/earth_specular_2048.jpg'),
  normalMap: textureLoader.load('/public/textures/planets/earth_normal_2048.jpg'),
})
const earth = new THREE.Mesh(earthGeometry,earthMaterial)
earth.receiveShadow = true
earth.castShadow = true
scene.add(earth)

这里依然在render渲染函数处通过getElapsedTime方法计算动画经过的时间或者控制动画的播放速度，来动态改变地球自转速度，让自转运动。

let clock = new THREE.Clock();
let oldtime = 0
// 设置渲染函数
const render = () =>{ 
  const elapsed = clock.getElapsedTime()
  // 月球旋转
  moon.position.set(Math.sin(elapsed)*5,0,Math.cos(elapsed)*5)
  // 地球自转
  let axis = new THREE.Vector3(0,1,0)
  earth.rotateOnAxis(axis, (elapsed - oldtime) * Math.PI / 10)
  oldtime = elapsed
  requestAnimationFrame(render)
}

添加模型标签

在 Three.js 中，CSS2DRenderer 是一个用于将 HTML 元素渲染成 2D 贴图，并将其添加到 Three.js 场景中的工具类。它可以帮助我们更方便地在 Three.js 场景中添加 HTML 元素，比如显示标签、文字等。CSS2DRenderer 类似于 Three.js 中的 WebGLRenderer，但是它渲染的不是 Three.js 的 3D 对象，而是 HTML 元素。

import { CSS2DRenderer} from 'three/examples/jsm/renderers/CSS2DRenderer'

// 创建标签选择器
const labelRenderer = new CSS2DRenderer();
labelRenderer.setSize(window.innerWidth, window.innerHeight)
labelRenderer.domElement.style.position = 'absolute';
labelRenderer.domElement.style.top = '0px';
document.body.appendChild(labelRenderer.domElement)
// 给CSS2DRenderer添加控制器
const controls1 = new OrbitControls(camera,labelRenderer.domElement)
controls1.enableDamping = true

CSS2DObject 则是可以在 Three.js 场景中创建的一个 CSS2D 元素。它类似于 Three.js 中的 Mesh，但是它表示的不是三维物体，而是一个 CSS 元素。你可以通过创建 CSS2DObject 实例，将其添加到 Three.js 的场景中，并设置其内部的 HTML 元素，从而在 Three.js 场景中显示 HTML 内容。

import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer'

// 创建月球标签
const moonDiv = document.createElement('div');
moonDiv.className = 'label';
moonDiv.textContent = 'Moon';
const moonLabel = new CSS2DObject(moonDiv)
moonLabel.position.set(0, MOON_RADIUS + 0.5, 0);
moon.add(moonLabel)

// 创建地球标签
const earthDiv = document.createElement('div');
earthDiv.className = 'label';
earthDiv.textContent = 'Earch';
const eartchLabel = new CSS2DObject(earthDiv)
eartchLabel.position.set(0, EARTH_RADIUS + 0.5, 0);
earth.add(eartchLabel)

然后给出直接设置类名的样式：

最后在渲染函数中加载渲染标签函数 ：

demo做完，给出本案例的完整代码：（获取素材也可以私信博主）

<script setup>
import * as THREE from 'three'
import { onMounted } from 'vue';
// 控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
// 文字2D渲染器
import { CSS2DRenderer,CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer'

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,200)
camera.position.set(10,5,20)

// 创建渲染器
const renderer = new THREE.WebGLRenderer({ 
  alpha: true
})
renderer.setPixelRatio(window.devicePixelRatio) // 根据屏幕显示像素比
renderer.setSize(window.innerWidth,window.innerHeight)
renderer.shadowMap.enabled = true // 渲染阴影
document.body.appendChild(renderer.domElement)

window.addEventListener("resize",()=>{ 
  renderer.setSize(window.innerWidth,window.innerHeight)
  camera.aspect = window.innerWidth/window.innerHeight
  camera.updateProjectionMatrix()
})

// 设置控制器
const controls = new OrbitControls(camera,renderer.domElement)
controls.enableDamping = true

let clock = new THREE.Clock();
let oldtime = 0
// 设置渲染函数
const render = () =>{ 
  const elapsed = clock.getElapsedTime()
  // 月球旋转
  moon.position.set(Math.sin(elapsed)*5,0,Math.cos(elapsed)*5)
  // 地球自转
  let axis = new THREE.Vector3(0,1,0)
  earth.rotateOnAxis(axis, (elapsed - oldtime) * Math.PI / 10)
  oldtime = elapsed
  renderer.render(scene,camera)
  labelRenderer.render(scene, camera)
  requestAnimationFrame(render)
}

// 设置地球和月球的半径大小
const EARTH_RADIUS = 2.5
const MOON_RADIUS = 0.27
// 实例化纹理加载器
const textureLoader = new THREE.TextureLoader()
// 创建标签选择器
const labelRenderer = new CSS2DRenderer();
labelRenderer.setSize(window.innerWidth, window.innerHeight)
labelRenderer.domElement.style.position = 'absolute';
labelRenderer.domElement.style.top = '0px';
document.body.appendChild(labelRenderer.domElement)
// 给CSS2DRenderer添加控制器
const controls1 = new OrbitControls(camera,labelRenderer.domElement)
controls1.enableDamping = true

// 创建月球
const moonGeometry = new THREE.SphereGeometry(MOON_RADIUS,16,16)
const moonMaterial = new THREE.MeshPhongMaterial({
  map: textureLoader.load('/public/textures/planets/moon_1024.jpg')
})
const moon = new THREE.Mesh(moonGeometry, moonMaterial)
moon.receiveShadow = true
moon.castShadow = true;
scene.add(moon)
// 创建月球标签
const moonDiv = document.createElement('div');
moonDiv.className = 'label';
moonDiv.textContent = 'Moon';
const moonLabel = new CSS2DObject(moonDiv)
moonLabel.position.set(0, MOON_RADIUS + 0.5, 0);
moon.add(moonLabel)

// 创建地球
const earthGeometry = new THREE.SphereGeometry(EARTH_RADIUS,16,16)
const earthMaterial = new THREE.MeshPhongMaterial({
  map: textureLoader.load('/public/textures/planets/earth_atmos_2048.jpg'),
  specularMap: textureLoader.load('/public/textures/planets/earth_specular_2048.jpg'),
  normalMap: textureLoader.load('/public/textures/planets/earth_normal_2048.jpg'),
})
const earth = new THREE.Mesh(earthGeometry,earthMaterial)
earth.receiveShadow = true
earth.castShadow = true
scene.add(earth)
// 创建地球标签
const earthDiv = document.createElement('div');
earthDiv.className = 'label';
earthDiv.textContent = 'Earch';
const eartchLabel = new CSS2DObject(earthDiv)
eartchLabel.position.set(0, EARTH_RADIUS + 0.5, 0);
earth.add(eartchLabel)

// 创建添加聚光灯光源
const dirLight = new THREE.SpotLight(0xffffff)
dirLight.position.set(0,0,10)
dirLight.intensity = 1
dirLight.castShadow = true
scene.add(dirLight)
// 添加环境光
const aLight = new THREE.AmbientLight(0xffffff)
aLight.intensity = 0.03
scene.add(aLight)

onMounted(()=>{
  render()
})
</script>
<style lang="less">
canvas{
  background-image: url('../../public/images/star.jpg');
  background-size: cover;
}
.label {
  color: #fff;
  font-size: 16px;
}
</style>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

230530-论文整理-课题组2

230530-论文整理-课题组2

对这些研究有点兴趣颇微。 文章目录 Rethinking Dense Retrieval’s Few-Shot AbilityDecoder-Only or Encoder-Decoder? Interpreting Language Model as a Regularized Encoder-DecoderPLOME: Pre-training with Misspelled Knowledge for Chinese Spelling CorrectionRead…
阅读更多...
北邮22信通：复习补充：双向链表的实现

北邮22信通：复习补充：双向链表的实现

北邮22信通一枚~ 跟随课程进度每周更新数据结构与算法的代码和文章 持续关注作者 解锁更多邮苑信通专属代码~ 获取更多文章 请访问专栏&#xff1a; 北邮22信通_青山如墨雨如画的博客-CSDN博客 **说明** 最近复习看到书后有双向链表的题目&#xff0c;编出来供大家…
阅读更多...
Mybatis-Plus 进阶开发-自定义乐观锁插件

Mybatis-Plus 进阶开发-自定义乐观锁插件

文章目录 前言0. OptimisticLockerInnerInterceptor 介绍1. Mybatis-plus 实现乐观锁的原理2. 自定义乐观锁插件1. 创建自定义乐观锁插件2. 配置自定义乐观锁插件 3. 总结 &#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是冰点&#xff0c;从业11年&#xff0c;目前在…
阅读更多...
jmeter 性能测试工具的使用（Web性能测试）

jmeter 性能测试工具的使用（Web性能测试）

1、下载 2023Jmeter性能测试项目实战教程&#xff0c;十年测试大佬手把手教你做性能&#xff01;_哔哩哔哩_bilibili2023Jmeter性能测试项目实战教程&#xff0c;十年测试大佬手把手教你做性能&#xff01;共计11条视频&#xff0c;包括&#xff1a;1.什么是性能测试以及性能测…
阅读更多...
爬虫进阶-反爬破解1（反爬技术简介、HTTP网络基础知识、搭建代理服务）

爬虫进阶-反爬破解1（反爬技术简介、HTTP网络基础知识、搭建代理服务）

目录 一、反爬技术简介 二、HTTP网络基础知识 三、搭建代理服务 一、反爬技术简介 &#xff08;一&#xff09;破解Web端反爬技术 1.常见的反爬策略方向&#xff1a;同一时间的请求数量、请求的身份信息、浏览器和爬虫的区别 2.浏览器和爬虫的不同&#xff1a;异步数据加…
阅读更多...
Maui初体验

Maui初体验

创建Maui应用程序 使用vs创建项目&#xff0c;选择maui模板。 生成即可。 体验Font. 下载字体&#xff0c;放在Font文件夹下&#xff0c;或者子文件夹。 将 文件的生成操作改成MauiFont. 注册字体 如果在Font的子文件夹下&#xff0c;则需要编辑项目&#xff0c;修改ItemGrou…
阅读更多...
SeaFormer实战：使用SeaFormer实现图像分类任务（二）

SeaFormer实战：使用SeaFormer实现图像分类任务（二）

文章目录 训练部分导入项目使用的库设置随机因子设置全局参数图像预处理与增强读取数据设置Loss设置模型设置优化器和学习率调整算法设置混合精度&#xff0c;DP多卡&#xff0c;EMA定义训练和验证函数训练函数验证函数调用训练和验证方法 运行以及结果查看测试热力图可视化展示…
阅读更多...
Ansible任务控制与Ansible-Playbook

Ansible任务控制与Ansible-Playbook

YAML特点 YAML 文件以 # 为注释符 YAML 文件以 .yml或者.yaml 结尾 YAML 文件以 --- 开始 &#xff0c; 以 ... 结束&#xff0c;但开始和结束标志都是可选的 基本语法 大小写敏感 使用缩进表示层级关系 缩进时是使用Tab键还是使用空格- -定要达到统- &#xff0c;建议使用空格…
阅读更多...
SpringMVC第七阶段：SpringMVC的增删改查（02）

SpringMVC第七阶段：SpringMVC的增删改查（02）

1、图书列表功能的实现 需要导入JSTL标签库的jar包: druid-1.1.9.jar junit_4.12.jar mysql-connector-java-5.1.37-bin.jar org.hamcrest.core_1.3.0.jar spring-aop-5.2.5.RELEASE.jar spring-beans-5.2.5.RELEASE.jar spring-context-5.2.5.RELEASE.jar spring-core-5.2.5…
阅读更多...
操作系统期末复习——课时八——进程同步（二）

操作系统期末复习——课时八——进程同步（二）

1、信号量 信号量机制是一种功能较强的机制&#xff0c;可用来解决互斥和同步问题&#xff0c;它只能被两个标准的原语wait(S)&#xff08;P操作&#xff09;和signal(S)&#xff08;V操作 &#xff09;访问。 注意&#xff1a;原语是一种特殊的程序段&#xff0c;其执行只能一…
阅读更多...
HNU-电子测试平台与工具2-I2C

HNU-电子测试平台与工具2-I2C

FPGA I2C接口实现 计科210X wolf 202108010XXX 报告内容将包括： （1）如何描述组合电路、时序电路、状态机？如何编写TestBench？ （2）ModelSim工具的使用； （3）EEPROM读写代码分析； （4）实验总结； 注意：其中（1）将在自定FSM中以实例的方式呈现，（2）将在（3）中提…
阅读更多...
Java学习笔记22——异常

Java学习笔记22——异常

异常 异常异常的概述JVM处理异常的默认方案异常处理Throwable的成员方法编译时异常和运行时异常的区别异常处理throws自定义异常 异常 异常的概述 Throwable是所有异常和错误的超类 error表示严重的问题&#xff0c;合理的程序不应该试图捕获 Exception表示合理的应用想要捕…
阅读更多...
chatgpt赋能python：Python中的{:5d}是什么？

chatgpt赋能python：Python中的{:5d}是什么？

Python中的{:5d}是什么&#xff1f; 在Python中&#xff0c;{:5d}是一种格式化字符串的方法&#xff0c;用于将整数格式化为一定宽度的字符串&#xff0c;其中{}代表占位符&#xff0c;5代表宽度&#xff0c;d代表将数据格式化为十进制整数。 简而言之&#xff0c;{:5d}的作用…
阅读更多...
【pytest】tep环境变量、fixtures、用例三者之间的关系

【pytest】tep环境变量、fixtures、用例三者之间的关系

tep是一款测试工具&#xff0c;在pytest测试框架基础上集成了第三方包&#xff0c;提供项目脚手架&#xff0c;帮助以写Python代码方式&#xff0c;快速实现自动化项目落地。 在tep项目中&#xff0c;自动化测试用例都是放到tests目录下的&#xff0c;每个.py文件相互独立&…
阅读更多...
做接口测试需要哪些技能？一篇文章教你如何学会Python接口自动化测试

做接口测试需要哪些技能？一篇文章教你如何学会Python接口自动化测试

目录 1、什么是接口测试&#xff1f; 2、接口测试需要会什么&#xff1f; 3、如何学这些技能&#xff1f; 4、如何获取接口相关信息&#xff1f; 5、如何进行进行接口测试&#xff1f; 6、自动化接口测试 7、其他 1、什么是接口测试&#xff1f; 定义&#xff1a;测试系…
阅读更多...
【反向面试】向你未来的软件雇主提出的36个问题

【反向面试】向你未来的软件雇主提出的36个问题

作者 | Tomas Fernandez 祝贺通过了面试&#xff01;你准备得很充分&#xff0c;并通过了所有的问题。现在你可以放松了。 "你有什么问题要问我们吗&#xff1f;” 面试官问道。哦&#xff01;这还没有结束&#xff0c;你意识到。你应该会有一些问题。 面试官并不是想让…
阅读更多...
JVM学习（十三）：面试中绕不开的String

JVM学习（十三）：面试中绕不开的String

一、String 的基本特性 1.1 String类的声明 String实现了Serializable接口&#xff0c;表示字符串是支持序列化的&#xff1b; 实现了Comparable接口&#xff0c;表示String可以比较大小 1.2 String的存储方式在jdk9中的变更 我们知道&#xff0c;String在jdk8中使用 final …
阅读更多...
Lua学习笔记：C++操作Lua的表

Lua学习笔记：C++操作Lua的表

前言 本篇在讲什么 C操作Lua的表(table) 本篇适合什么 适合初学Lua的小白 适合需要C/C和lua结合开发的人 本篇需要什么 对Lua语法有简单认知 对C/C语法有简单认知 依赖Lua5.1的环境 依赖VS 2017编辑器 本篇的特色 具有全流程的图文教学 重实践&#xff0c;轻理论…
阅读更多...
23种设计模式之策略模式（Strategy Pattern）

23种设计模式之策略模式（Strategy Pattern）

前言&#xff1a;大家好&#xff0c;我是小威&#xff0c;24届毕业生&#xff0c;在一家满意的公司实习。本篇文章将23种设计模式中的策略模式&#xff0c;此篇文章为一天学习一个设计模式系列文章&#xff0c;后面会分享其他模式知识。 如果文章有什么需要改进的地方还请大佬不…
阅读更多...
构建Transformer模型 | 在wikiText-2数据集上训练一个语言模型

构建Transformer模型 | 在wikiText-2数据集上训练一个语言模型

0 Introduction CSDN上有很多关于Transformer模型代码及解析的教程&#xff0c;但总体感觉还是不够直观&#xff0c;本文来自以B站上一个公开课&#xff0c;讲得非常详细&#xff0c;建议花一点时间从头到尾跟做一遍&#xff0c;单纯看静态的代码和文字描述&#xff0c;还是比…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023