Three 银河系

总体效果图

当然，这也只是银河系的一部分，要想知道全景视野下的银河系是什么样的，只有通过科学家依据观测结果所制作的绘图来实现，因为银河系实在是太大了，目前的技术水平还无法实现全景捕捉。绘制的这张三维立体图像中，银河系的结构非常清晰明了。

摄像机的视野（或 FOV）也是动态的。 当一个人向外拉时，视野变宽，越来越多的银河系被吸收。 当向内朝向恒星移动时，情况正好相反，视野变窄。

总体步骤

1. 创建在 x 轴直线上的点物体

2. 创建在俯视角度，3 根平分角度的分支, 分布不同的点

3. 设置点弯曲效果（在原本角度基础上 + 点距离圆心的距离作为增加的角度值）

4. 设置发散效果（在原来坐标基础上，x，y，z 都加上一个随机数范围（0 - 1）

5. 设置向轴线集中（偏移的随机距离 0 - 1，做 3 的幂，集中在数小的范围的数值比较多）

6. 设置向中心原点集中（半径现在是 0 - 5，乘以 0 - 1 的 3次幂，得到的值就集中在中间）

7. 设置中心往远处，垂直范围是从大到小效果（原有坐标基础上 * （半径 - 距离） / 5），因为发现值范围太大，所以除以 5

8. 中心向四周的渐变色

一、HTML部分

1、首先需要创建一个html 文件，设置好我们js 的引入模式。代码如下 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
    </style>
</head>
<body>
<script type="importmap">
    {
      "imports": {
        "three": "../js/three.module.js",
        "three/jsm/": "../js/jsm/"
      }
    }
</script>
<script type="module" src="js/04雪花飘落.js"></script>
</body>
</html>

二、创建银河系场景

1、引入three和OrbitControls相机控件。相机控件，它允许用户通过鼠标拖拽、滚轮缩放以及键盘移动相机，实现类似于球形的相机旋转操作。这个控件可以用于3D场景中，以提供更好的用户体验

import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

2、3D场景对象Scene  和  实例化一个相机对象，设置其大小位置

const scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(0, 0, 0.1)

3、创建渲染器 WebGLRenderer。在threejs中，常用的渲染器WebGLRenderer。通常情况下使用WebGLRenderer非常简单，我们直接对它进行实例化即可，然后调用其render方法进行渲染

renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(window.innerWidth, window.innerHeight)  // 输出画布的尺寸
renderer.shadowMap.enabled = true
document.body.appendChild(renderer.domElement) // 渲染到元素中

4、初始化 场景代码

let scene, camera, renderer, controls, points
function init() {
    scene = new THREE.Scene()
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
    camera.position.set(5, 5, 5)
    renderer = new THREE.WebGLRenderer({ antialias: true })
    renderer.setSize(window.innerWidth, window.innerHeight)
    document.body.appendChild(renderer.domElement)

    controls = new OrbitControls(camera, renderer.domElement)
    controls.enableDamping = true

    const axesHelper = new THREE.AxesHelper(5)
    scene.add(axesHelper)
}

三、创建银河系场景实例

1、创建在 x 轴直线上的点物体。创建一个空的缓冲区数据， 将缓冲区数据添加到几何体中

const geometry = new THREE.BufferGeometry()
const posArr = new Float32Array(params.count * 3)
const colorArr = new Float32Array(params.count * 3)

2、创建在俯视角度，3 根平分角度的分支, 分布不同的点。 俯视：以 x 轴正方向为基准，偏移多少弧度。一圈是 2π，平分后，相对旋转角度公式：2π / 分支数 * 相对的分支序号。 偏移角度

const branchAngle = ((Math.PI * 2) / params.branches) * (i % params.branches)

 3、设置点弯曲效果（在原本角度基础上 + 点距离圆心的距离作为增加的角度值）。

Math.cos(branchAngle + distance * 0.3) * distance

4、设置发散效果（在原来坐标基础上，x，y，z 都加上一个随机数范围（0 - 1）。

5、设置向轴线集中（偏移的随机距离 0 - 1，做 3 的幂，集中在数小的范围的数值比较多）。

6、设置向中心原点集中（半径现在是 0 - 5，乘以 0 - 1 的 3次幂，得到的值就集中在中间）。

const distance = Math.random() * params.radius * Math.pow(Math.random(), 3)

7、设置中心往远处，垂直范围是从大到小效果（原有坐标基础上 * （半径 - 距离） / 5），因为发现值范围太大，所以除以 5

const randomX = Math.pow(Math.random() * 2 - 1, 3) * (params.radius - distance) / 5
const randomY = Math.pow(Math.random() * 2 - 1, 3) * (params.radius - distance) / 5
const randomZ = Math.pow(Math.random() * 2 - 1, 3) * (params.radius - distance) / 5

posArr[currentI] = Math.cos(branchAngle + distance * 0.3) * distance + randomX
posArr[currentI + 1] = randomY
posArr[currentI + 2] = Math.sin(branchAngle + distance * 0.3) * distance + randomZ

8、中心向四周的渐变色。混合颜色。

const mixColor = startColor.clone()
// 参数1：要渐变到的目标颜色，参数2：0 到 1 的范围（过渡比例）
mixColor.lerp(endColor, (distance / params.radius))

colorArr[currentI] = mixColor.r
colorArr[currentI + 1] = mixColor.g
colorArr[currentI + 2] = mixColor.b

四、设置动画效果

1、银河系整体循环旋转移动

function renderLoop() {
  renderer.render(scene, camera)
  points.rotation.y += 0.001
  requestAnimationFrame(renderLoop)
}

五、完整代码

import * as THREE from 'three'
import { OrbitControls } from '../../js/jsm/controls/OrbitControls.js'; // 引入相机控件

let scene, camera, renderer, controls, points
function init() {
    scene = new THREE.Scene()
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
    camera.position.set(5, 5, 5)
    renderer = new THREE.WebGLRenderer({ antialias: true })
    renderer.setSize(window.innerWidth, window.innerHeight)
    document.body.appendChild(renderer.domElement)

    controls = new OrbitControls(camera, renderer.domElement)
    controls.enableDamping = true

    const axesHelper = new THREE.AxesHelper(5)
    scene.add(axesHelper)
}
function renderLoop() {
    renderer.render(scene, camera)
    points.rotation.y += 0.001
    requestAnimationFrame(renderLoop)
}

// 目标：银河系
// 1. 创建在 x 轴直线上的点物体
// 2. 创建在俯视角度，3 根平分角度的分支, 分布不同的点
// 3. 设置点弯曲效果（在原本角度基础上 + 点距离圆心的距离作为增加的角度值）
// 4. 设置发散效果（在原来坐标基础上，x，y，z 都加上一个随机数范围（0 - 1）
// 5. 设置向轴线集中（偏移的随机距离 0 - 1，做 3 的幂，集中在数小的范围的数值比较多）
// 6. 设置向中心原点集中（半径现在是 0 - 5，乘以 0 - 1 的 3次幂，得到的值就集中在中间）
// 7. 设置中心往远处，垂直范围是从大到小效果（原有坐标基础上 * （半径 - 距离） / 5），因为发现值范围太大，所以除以 5
// 8. 中心向四周的渐变色

const params = {
    count: 10000, // 点数量
    size: 0.1, // 点尺寸
    radius: 5, // 点所在范围半径
    branches: 13, // 多少个分支方向的线段
    color: 0xff6030, // 中心点颜色
    endColor: 0x1b3984, // 轴线终点颜色
}
const startColor = new THREE.Color(params.color)
const endColor = new THREE.Color(params.endColor)


function createPoints() {
    // 1. 创建在 x 轴直线上的点物体
    const geometry = new THREE.BufferGeometry()
    const posArr = new Float32Array(params.count * 3)
    const colorArr = new Float32Array(params.count * 3)


    for (let i = 0; i < params.count; i++) {
        const currentI = i * 3

        // 2. 创建在俯视角度，3 根平分角度的分支, 分布不同的点
        // 俯视：以 x 轴正方向为基准，偏移多少弧度
        // 一圈是 2π，平分后，相对旋转角度公式：2π / 分支数 * 相对的分支序号
        // 偏移角度
        const branchAngle = ((Math.PI * 2) / params.branches) * (i % params.branches)
        // 当前点距离圆心的距离

        // 6. 设置向中心原点集中（半径现在是 0 - 5，乘以 0 - 1 的 3次幂，得到的值就集中在中间）
        const distance = Math.random() * params.radius * Math.pow(Math.random(), 3)

        // 用数据的三角函数公式：算出 x 和 z 在圆形的坐标值
        // 3. 设置点弯曲效果（在原本角度基础上 + 点距离圆心的距离作为增加的角度值）
        // Math.cos(branchAngle + distance * 0.3) * distance

        // 4. 设置发散效果（在原来坐标基础上，x，y，z 都加上一个随机数范围（0 - 1）
        // 5. 设置向轴线集中（偏移的随机距离 0 - 1，做 3 的幂，集中在数小的范围的数值比较多）
        // 7. 设置中心往远处，垂直范围是从大到小效果（原有坐标基础上 * （半径 - 距离） / 5），因为发现值范围太大，所以除以 5
        const randomX = Math.pow(Math.random() * 2 - 1, 3) * (params.radius - distance) / 5
        const randomY = Math.pow(Math.random() * 2 - 1, 3) * (params.radius - distance) / 5
        const randomZ = Math.pow(Math.random() * 2 - 1, 3) * (params.radius - distance) / 5

        posArr[currentI] = Math.cos(branchAngle + distance * 0.3) * distance + randomX
        posArr[currentI + 1] = randomY
        posArr[currentI + 2] = Math.sin(branchAngle + distance * 0.3) * distance + randomZ


        // 8. 中心向四周的渐变色
        // 混合颜色
        const mixColor = startColor.clone()
        // 参数1：要渐变到的目标颜色，参数2：0 到 1 的范围（过渡比例）
        mixColor.lerp(endColor, (distance / params.radius))

        colorArr[currentI] = mixColor.r
        colorArr[currentI + 1] = mixColor.g
        colorArr[currentI + 2] = mixColor.b
    }

    geometry.setAttribute('position', new THREE.BufferAttribute(posArr, 3))
    geometry.setAttribute('color', new THREE.BufferAttribute(colorArr, 3))

    var texture = new THREE.TextureLoader().load("../image/particles/1.png");
    var material = new THREE.PointsMaterial({
        size: params.size,
        // color: params.color,
        map: texture,
        alphaMap: texture,
        transparent: true,
        blending: THREE.AdditiveBlending,
        depthTest: false,
        vertexColors: true
    });

    points = new THREE.Points(geometry, material);

    scene.add(points)
}

init()
createPoints()
renderLoop()

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

记录：阿里云服务器网站搭建（4）

记录：阿里云服务器网站搭建（4）

Docker安装Nginx 现阶段主要目的是做一些静态资源路径的转发代理&#xff0c;相当于一个web服务器&#xff0c;tomcat也可以设置凡访问静态资源。但考虑到后续还需要作为代理服务器对域名等进行代理转发&#xff0c;所以使用nginx。 准备好要挂载的nginx配置目录 mkdir -p /m…
阅读更多...
React-RTK

React-RTK

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f525;系列专栏&#xff1a;React篇 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来React篇专栏内容:React-RTK 目录 1、介绍 2、安装 3、编写RTK使用示例 4、官方提供项目包示例 创建 Redux …
阅读更多...
ROS 2边学边练（33）-- 写一个静态广播（C++）

ROS 2边学边练（33）-- 写一个静态广播（C++）

前言 通过这一篇我们将了解并学习到如何广播静态坐标变换到tf2&#xff08;由tf2来转换这些坐标系&#xff09;。 发布静态变换对于定义机器人底座与其传感器或非移动部件之间的关系非常有用。例如&#xff0c;在以激光扫描仪中心的坐标系中推理激光扫描测量数据是最简单的。 这…
阅读更多...
基于人工智能的机动车号牌检测与推理系统v1.0

基于人工智能的机动车号牌检测与推理系统v1.0

基于人工智能的机动车号牌检测与推理系统v1.0代码重构与实现。 目前整合3中现有算法&#xff0c;并完成阶段性改造&#xff0c;包括【传统方法检测车牌&#xff0c;SVM推理字符】、【YOLO方法检测车牌&#xff0c;SVM推理字符】、【YOLO方法检测车牌&#xff0c;CNN推理字符】&…
阅读更多...
MapReduce案例-电影网站数据统计分析

MapReduce案例-电影网站数据统计分析

本文适合大数据初学者学习MapReduce统计分析业务问题的步骤和基础的MapReduce编程方法&#xff0c;初步掌握Hadoop对计算任务的管理。 本文末尾有全部数据集和完整代码连接。 1.准备工作 安装Hadoop:Hadoop 3.3.2 离线安装-CSDN博客 按照好Hadoop之后要检查一下datanode运行情况…
阅读更多...
Llama网络结构介绍

Llama网络结构介绍

LLaMA现在已经是开源社区里炙手可热的模型了&#xff0c;但是原文中仅仅介绍了其和标准Transformer的差别&#xff0c;并没有一个全局的模型介绍。因此打算写篇文章&#xff0c;争取让读者不参考任何其他资料把LLaMA的模型搞懂。 结构 如图所示为LLaMA的示意图&#xff0c;由…
阅读更多...
ESP32学习第一天-ESP32点亮LED，按键控制LED状态，LED流水灯

ESP32学习第一天-ESP32点亮LED，按键控制LED状态，LED流水灯

第一天使用到的函数: 函数第一个参数设置哪一个引脚&#xff0c;第二个参数设置引脚模式。 pinMode(led_pin,OUTPUT); //设置引脚模式 函数的第一个参数设置哪一个引脚&#xff0c;第二个参数设置是高电平还是低电平。 digitalWrite(led_pin,HIGH);//将引脚电平拉高 #incl…
阅读更多...
电脑怎么拖动文件到想要的位置？电脑上拖拽没了的文件怎么找回

电脑怎么拖动文件到想要的位置？电脑上拖拽没了的文件怎么找回

在日常的办公和学习中&#xff0c;电脑文件拖拽操作是每位用户都不可或缺的技能。然而&#xff0c;有时在拖动文件时&#xff0c;可能会因为误操作或其他原因&#xff0c;导致文件消失或移至未知位置。本文将详细解析如何在电脑上轻松拖动文件到指定位置&#xff0c;并为您提供…
阅读更多...
大模型中的位置编码ALiBi,RoPE的总结和实现

大模型中的位置编码ALiBi,RoPE的总结和实现

目录 Alibi与旋转位置编码的比较 1. Alibi和旋转位置编码的外推性能比较 2. Alibi的处理方式 注意力线性偏置&#xff1a;ALiBi位置编码的实现 1. ALiBi的基本概念 2. ALiBi的实现方式 ALiBi位置编码的代码解读 1. 导入必要的库 2. 定义get_slopes函数 3. 定义get_al…
阅读更多...
C++ Primer 总结索引 | 第十三章：拷贝控制

C++ Primer 总结索引 | 第十三章：拷贝控制

1、类可以定义构造函数&#xff0c;用来控制在创建此类型对象时做什么 类如何控制该类型对象拷贝、赋值、移动或销毁时做什么 类通过一些 特殊的成员函数 控制这些操作&#xff0c;包括&#xff1a;拷贝构造函数、移动构造函数、拷贝赋值运算符、移动赋值运算符 以及 析构函数 …
阅读更多...
API请求报错 Required request body is missing问题解决

API请求报错 Required request body is missing问题解决

背景 在进行调用的时候&#xff0c;加载方法&#xff0c;提示以下错误 错误信息如下&#xff1a; {"code": 10001,"msg": "Required request body is missing: XXX","data": null,"extra": null }Required request body…
阅读更多...
Qt使用miniblink第三方浏览器模块

Qt使用miniblink第三方浏览器模块

文章目录 一、前言二、miniblink简介三、miniblink使用四、运行效果五、工程结构 一、前言 本文取自刘典武大师&#xff1a;Qt编写地图综合应用58-兼容多浏览器内核 用Qt做项目过程中&#xff0c;遇到需要用到浏览器控件的项目&#xff0c;可能都会绕不开一个问题&#xff0c;那…
阅读更多...
机器人模型匹配控制（MPC）MATLAB实现

机器人模型匹配控制（MPC）MATLAB实现

模型匹配控制&#xff08;Model matching control&#xff09;是指设计一个控制器使闭环系统的传递函数tf(s)与td(s)相一致&#xff01; mpcDesigner 可以分为&#xff1a; 2时域精确模型匹配控制3频域精确模型匹配控制 机械臂控制中应用模型匹配控制&#xff08;Model Matc…
阅读更多...
手把手教你搭建鲜花团购小程序

手把手教你搭建鲜花团购小程序

随着互联网的快速发展&#xff0c;线上小程序商城已经成为了一种流行的电商模式。对于花店来说&#xff0c;开发线上小程序商城不仅可以扩大销售渠道&#xff0c;提高销售效率&#xff0c;还可以增加客户粘性&#xff0c;提升品牌形象。下面就以花店为例&#xff0c;教你怎么开…
阅读更多...
【python】Python成语接龙游戏[1-3难度均有]（源码+数据）【独一无二】

【python】Python成语接龙游戏[1-3难度均有]（源码+数据）【独一无二】

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化【获取源码商业合作】 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、5…
阅读更多...
平衡二叉树（AVLTree）

平衡二叉树（AVLTree）

AVLTree 1、树的分类2、平衡二叉树2.1、构建一个平衡二叉树2.2、删除节点2.3、搜索方式2.3.1、广度优先搜索&#xff08;BFS&#xff09;2.3.2、深度优先搜索&#xff08;DFS&#xff09; 1、树的分类 树形结构是编程当中特别常见的一种数据结构。比如电脑中的文件管理系统就大…
阅读更多...
模拟BACnet设备（八）

模拟BACnet设备（八）

文章目录 前言模拟呼梯设备的功能前期准备——xml文件的编写创建工程&#xff0c;建立BACnet模拟设备如何将设备的对象列表打包发送呢&#xff1f;被订阅的属性值变化时&#xff0c;如何主动通知对方&#xff1f;读写属性值完整代码小结 前言 前面一到七篇&#xff0c;从理论&…
阅读更多...
[Collection与数据结构] PriorityQueue与堆

[Collection与数据结构] PriorityQueue与堆

1. 优先级队列 1.1 概念 前面介绍过队列&#xff0c;队列是一种先进先出(FIFO)的数据结构&#xff0c;但有些情况下&#xff0c;操作的数据可能带有优先级&#xff0c;一般出队列时&#xff0c;可能需要优先级高的元素先出队列&#xff0c;该中场景下&#xff0c;使用队列显然…
阅读更多...
Rust - 引用和借用

Rust - 引用和借用

上一篇章末尾提到&#xff0c;如果仅仅支持通过转移所有权的方式获取一个值&#xff0c;那会让程序变得复杂。 Rust 能否像其它编程语言一样&#xff0c;使用某个变量的指针或者引用呢&#xff1f;答案是可以。 Rust 通过 借用(Borrowing) 这个行为来达成上述的目的&#xff0…
阅读更多...
深入探索GDB：Linux下强大的调试神器

深入探索GDB：Linux下强大的调试神器

目录 一、GDB简介&#xff1a;源码级调试的基石 二、GDB基础操作&#xff1a;从入门到熟练 启动与基本命令 三、GDB进阶功能&#xff1a;解锁更深层次的调试能力 1. 回溯追踪&#xff1a;洞察调用栈 2. 动态内存检测&#xff1a;揪出内存问题 3. 条件断点与观察点&#…
阅读更多...
最新文章

Copyright @ 2022~2023