程序员经验分享-hwhale

Three.js3D可视化介绍，以及本地搭建three.js官网

2023-11-07

一、什么是Three.js

three.js官网：https://threejs.org/

Three.js是一个基于WebGL的JavaScript 3D图形库，它可以轻松地在浏览器中创建3D场景和动画。同时，它支持外部模型和纹理的导入，让开发者可以更加便捷地创建出震撼的3D场景。

Three.js的应用场景非常广泛，主要包括以下几个方面：

  1. 游戏开发：Three.js可以轻松地创建3D游戏场景和动画效果，让游戏制作变得更加简单。

  2. 产品展示：对于需要展现3D产品模型的企业来说，Three.js可以帮助他们创建出非常逼真的展示场景，大大提升了产品展示效果。

  3. 教育培训：Three.js还可以用于教育培训领域，例如创建出生动有趣的动画来解释物理现象或者化学反应。

  4. 虚拟现实：Three.js也可以用于虚拟现实领域，例如创建出现实世界中不存在的虚拟场景。

例如，可以将Three.js应用于制作自己的博客中，添加3D元素，增添可视化艺术，提升用户阅读体验，让博客更加活跃。或者，利用Three.js开发3D游戏，提升游戏体验。同时，Three.js还可以用于创建企业产品展示，将企业产品变得更加立体、真实，帮助企业提升营销能力。

二、Three.js示例

这里看几个官方的示例

  • webgl_lights_physical

在这里插入图片描述

  • webgpu_cubemap_dynamic

在这里插入图片描述

  • webgl_video_panorama_equirectangular

在这里插入图片描述

  • webgl_morphtargets_face

在这里插入图片描述

  • webgl_loader_fbx
    在这里插入图片描述
  • 智慧园区
    在这里插入图片描述

三、本地搭建three.js官网

  1. 去three.js官网，找到github
    在这里插入图片描述
  2. 将dev下载到本地

在这里插入图片描述
3. 解压three.js-dev

在这里插入图片描述
下载完成之后解压，用vscode打开

在这里插入图片描述

  1. 安装依赖

npm i

  1. 本地运行

npm run dev

  1. 效果
    在这里插入图片描述
    点击docs进入文档教程，这里可以切换语言
    在这里插入图片描述
    这里可以查看官网示例
    在这里插入图片描述
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

threeJs

javascript

3d

开发语言

Three.js3D可视化介绍，以及本地搭建three.js官网 的相关文章

  • 有没有办法在 React.render() 函数中渲染多个 React 组件？

    例如我可以这样做 import React from react import PanelA from panelA jsx import PanelB from panelB jsx React render

  • 如何按多个项目搜索/过滤列表？

    我正在寻找一个示例 或者可能是一个关于通过在文本框中输入的多个项目来过滤 搜索项目列表的方法的一点提示 假设我有一个列表 ul li Coffee li li Tea li li Milk li li Water li li Juice l

  • 实现悬停信息框

    我有一个日历 当用户将鼠标悬停在单元格上时 会出现一个很大的信息框 其中包含该日期的详细信息 虽然当用户离开时使信息框消失 但我遇到了一些麻烦 我基本上想要它 这样当鼠标光标移出信息框隐藏的日历单元格时 它就会消失 但我遇到了麻烦 因为mo

  • 如何强制折断不可折断的字符串？

    我有一个根据数据库中包含的数据生成的 HTML 页面 数据库有时包含浏览器无法分解的长字符串 因为这些字符串不包含可分解的字符 空格 点 逗号等 有没有办法使用 html css 甚至 javascript 来解决这个问题 看到这个link

  • Javascript 在另一个函数中检测“Shift”键按下

    我正在从 Flash 影片 使用外部接口 调用我的 html 页面中的 Javascript 函数 并且我想知道调用该函数时用户是否按下了 Shift 键 例如 如果我通过鼠标单击调用该函数 这似乎很简单 因为我可以传递事件并检查 if e

  • 在多个动态添加的表单上初始化 jQuery validate() 函数

    有人建议最好初始化一个 form validate 在页面加载而不是点击事件上运行 jquery form validate 插件仅允许在输入更改时提交 https stackoverflow com questions 10984196

  • 在 setInterval / setTimeout 中使用变量作为时间[重复]

    这个问题在这里已经有答案了 这是一个示例情况 var count time 1000 setInterval function count 1 time 上面的代码会将 count 变量加 1 即 1000 毫秒 看来 setInterva

  • React 应用程序中的 addEventListener 不起作用

    一些背景 我正在尝试消费自定义网络组件在 React 应用程序中并尝试监听来自 Web 组件的事件 我相信您不能只在自定义 Web 组件上以通常的反应方式处理事件 i e

  • 限制 Dropzone 仅上传特定类型的文件

    我正在使用 Dropzone 上传文件 这是我的代码 div div

  • 游戏手柄 JavaScript 未能按预期更新

    我正在尝试让浏览器报告我的 XBOX 控制器的状态 然而 在第一次按下按钮后 它似乎变得 卡住 我究竟做错了什么

  • JavaScript：常量属性

    在javascript中 我可以将对象的属性声明为常量吗 这是一个示例对象 var XU Cc Components classes or function aXU this Cc Components classes var XU new

  • 将异步事件监听器与 Nestjs EventEmitter 模块和无服务器函数结合使用

    我正在尝试在 Nestjs EventEmitter 模块的帮助下实现具有无服务器 lambda 函数的异步工作线程 处理程序在发出事件时被调用 但该函数在 async await 调用之前关闭 我尝试过同时使用emit and emitA

  • 使用 :hover 作为元素的内联样式（使用 HTML/CSS/php）[重复]

    这个问题在这里已经有答案了 可能的重复 如何将 a hover 规则嵌入到文档中间的样式属性中 https stackoverflow com questions 131653 how do i embed an ahover rule i

  • 窗口大小调整触发的 DOM 事件

    我有一个布局相当复杂的页面 最初打开页面时 某些元素的对齐存在问题 但是 可以通过更改浏览器窗口的大小来 永久 解决此问题 显然 我不希望用户必须调整浏览器窗口的大小才能使页面正确显示 所以我想知道是否有一种方法可以在页面首次加载时以编程方

  • Firebase 身份验证在 iOS 登录时卡住，没有错误

    我已经使用电子邮件和密码设置了 firebase 身份验证登录的最基本实现 firebase auth signInWithEmailAndPassword email password then gt console log Logged

  • 不使用控件时，视频元素在 Chrome 中消失

    So I think这是一个浏览器错误 它出现在一个更复杂的设计 网站中 但我已经进行了很好的尝试 简化了我的代码和设计等 并发现了以下内容 嵌入时

  • 检测浏览器选项卡是否具有焦点

    是否有可靠的跨浏览器方法来检测选项卡是否具有焦点 场景是 我们有一个定期轮询股票价格的应用程序 如果页面没有焦点 我们可以停止轮询并为每个人节省流量噪音 特别是当人们喜欢打开具有不同投资组合的多个选项卡时 Is window onblur

  • 具有固定顶部菜单的语义 UI 侧边栏

    Semantic UI 对其进行预警侧边栏页面 http semantic ui com modules sidebar html usage 当侧边栏出现时 固定位置内容可能会出现改变其位置的问题 然后它提供了该问题的两种可能的解决方案

  • p5 向量减法“sub”返回错误

    我一直在尝试将 p5 草图上传到 React 构建中 使用react p5 wrapper 我能够成功在屏幕上渲染画布 但是 某些矢量函数会导致错误 var distance this position dist ball position

  • 用javascript调用外部网页（跨域）

    我正在尝试使用以下网络服务来验证提要这个问题 https stackoverflow com questions 11996430 check if a url is a valid feed 但浏览器不允许我向另一台服务器发送 ajax

随机推荐

  • 视频无损放大软件：Topaz Video Enhance Al (Win&Mac) 激活版

    Topaz Video Enhance AI是一款由Topaz Labs开发的强大视频增强软件 它利用人工智能和机器学习技术 可以将低分辨率 模糊或噪声严重的视频转换为更清晰 更详细的高分辨率视频 Topaz Video Enhance A

  • 少儿学人工智能编程好还是机器人编程好

    少儿学人工智能编程好还是机器人编程好 小孩的学习一直以来都是家长们非常关心和重视的一件事情 很多的家长在培养孩子的学习方面也可以说相当的耐心的 会给孩子选择一些能够有利于孩子成长的课程 就拿现在很多的家长想要孩子去学习机器人编程的课程来说

  • vs+vm双机调试

    基础 VS2017安装成功 wdk10 注意事项 关闭 主机 客户机 防火墙 互相ping都能ping通 一 具体操作步骤 工具安装就不说了 不会的百度一下 只说一下一些关键的地方 1 安装好虚拟机后 给虚拟机增加一个串口设备 具体操作见图

  • 汇编基础(2) -- ARM64

    简介 ARM架构中 ARM64 也称为AArch64 是一种64位处理器架构 它是ARMv8指令集的一部分 与之前的32位ARM架构相比 ARM64提供了更大的寄存器容量 更广阔的地址空间和更高的计算能力 64位版本的指令集和32位版本的指

  • Linux上查找最大文件的3种方法

    Linux上查找最大文件的3种方法 第一种 ls 最简单的方法就是借助 ls 命令 因为 ls 命令本身输出是带文件大小信息的 比如 我要列出 data log 目录中的20个最大文件 可以 ls lSh data log head 20

  • mongouve的使用

    http my oschina net u 1026531 blog 188336

  • HTML的基础知识及（页面、多媒体、表格）标签

    1 HTML 什么是HTML 网络协议 hypertext markup language 超文本标记语言 2 环境准备 开发环境 sublime VScode editplus IDE hbuilder webstorm 运行环境 浏览器

  • 1-9九个数字不重复组成一个三位数加法算式，求出所有组合

    import java util ArrayList import java util List public class TestNumber public static void main String args int count 0

  • Java开发中的常见问题和解决方法：如何解决常见的性能和bug问题

    章节一 引言 在Java开发中 我们经常会面临各种各样的问题 包括性能问题和Bug 这些问题可能会导致应用程序的运行变慢 不稳定甚至崩溃 本文将介绍一些常见的Java开发问题 并提供解决这些问题的方法和技巧 帮助开发人员更好地处理性能和Bu

  • html 发件人怎么设置,a标签创建mailto链接发送电子邮箱用法详解

    在html5中 利用标签的mailto可以创建发送邮件到一个或多个电子邮箱的超链接功能 其用法详解如下 标签mailto最常见用法 这个用法是最常见的用法 在大多数情况下 我们都会使用这个方式发送电子邮件 1 发送一个邮箱 书写格式 联系博

  • STM32 开机一直进IDLE空闲中断的解决思路

    串口IDLE空闲中断 常用于串口DMA IDLE中断接收不定长数据 一开始玩DMA 调试程序在一直进入IDLE中断时候 可能是没有软件清零 STM32中文参考手册这么描述的 IDLE 检测到空闲线路 IDLE line detected 检

  • 热更新_ToLua学习示例 06_LuaCoroutine2

    function CoExample WaitForSeconds 1 作者封装的协程等待一秒 print WaitForSeconds end time UnityEngine Time time WaitForFixedUpdate 等

  • cas单点登录系列1.3：自定义登录页

    cas单点登录系列1 3 自定义登录页 cas提供登录页比较大众 我们根据需求进行自定义 所以本节会介绍登录页的一些内容 比较简单 大家可根据情况进行学习 文章目录 cas单点登录系列1 3 自定义登录页 前言 一 登录页组成 二 登录接口

  • java中使用jxls导出excel，excel单元格换行，多sheet页导出

    一 模板 jxls通过模板中的批注语法来渲染数据 所以写好模板已经成功了一大半 我的模板如下 这里我定义了两个sheet页 第一个sheet页就是汇总的 直接取数据遍历 第二个sheet页就是动态sheet页的模板 注意模板作用域的定义一定

  • Python总复习——简答题篇

    简答题篇 1 简述元祖 列表和字典的区别 2 简述局部变量和全部局变量的区别 3 简述闭包满足的三个条件 4 简述导入模块的方法 1 简述元祖 列表和字典的区别 名称 外形 存储结构 访问方式 是否可变类型 列表 中括号括起来的数据 可以存

  • 软件测试工程师技术发展规划 (2022初稿)

    软件测试工程师技术发展规划 2022 2022年3月18日22 19 04 1 不同Level的技术标准 1 1 级别一 测试工程师TE 1 1 1 主要工作内容 1 2 级别二 测试开发工程师 1 2 1 主要工作内容 1 2 2 工作组

  • Java中static关键字详解

    1 1概述 static是静态修饰符 什么叫静态修饰符呢 大家都知道 在程序中任何变量或者代码都是在编译时由系统自动分配内存来存储的 而所谓静态就是指在编译后所分配的内存会一直存在 直到程序退出内存才会释放这个空间 也就是只要程序在运行 那

  • Azure Blob Storage 基本用法上传/下载(Java)

    文章目录 简单概念 Blob Storage Azure Blob Storage的存储结构 Azure Storage Account Container Blob 操作 Maven依赖 创建Container对象 获取Blob列表 下载

  • 图像识别最好的算法,图片相似度识别算法

    现在人脸识别最有效的算法是什么 最好的人脸识别系统在理想情况下比人类识别的表现要好的多 但是一旦环境情况变糟 系统的表现就差强人意了 而计算机科学家们当然是非常想要开发出一种算法 在各种情况下都能够表现优异 现在 中国香港大学的汤晓鸥教授和

  • Three.js3D可视化介绍，以及本地搭建three.js官网

    一 什么是Three js three js官网 https threejs org Three js是一个基于WebGL的JavaScript 3D图形库 它可以轻松地在浏览器中创建3D场景和动画 同时 它支持外部模型和纹理的导入 让开发

热门标签