Three.js学习1:threejs简介及文档本地部署

news2024/11/27 10:39:18

开一个天坑,Three.js

我觉得未来3D页面一定是一个趋势。

-----------------------------华丽的分割线-------------------------

github:https://github.com/mrdoob/three.js/

官网:Three.js – JavaScript 3D Library

Threejs官网中文文档链接:three.js docs

Threejs 中文网(电子书课件):www.webgl3d.cn

Three.js 是一个开源的 JavaScript 3D 图形库,用于在 Web 浏览器中创建和渲染各种 3D 场景、动画和效果。它是基于 WebGL 技术的封装,简化了使用 WebGL 的复杂性,使开发者可以更轻松地创建交互式的 3D 网页应用

一、Three.js 文件包目录介绍

从官网下载 three.js-master 压缩包,解压后目录如下:

如果能很好的利用 three.js-master 文件下的资源,对于 Threejs 学习和 Web3D 项目的开发会极大的帮助。

  • build:目录下各个代码模块打包后的结果。

    three.module.js:开发的时候 .html 文件中要引入的 threejs 引擎库,和引入 jquery一样,可以辅助浏览器调试

    three.module.min.js:three.js 压缩后的结构文件。体积更小,可以部署项目的时候在.html中引入。

  • docs:Three.js API文档文件

    index.html:打开该文件可以实现离线查看threejs API文档

  • editor:Three.js的可视化编辑器,可以编辑3D场景

    index.html:打开应用程序

  • docs:Three.js API 文档文件

    index.html:打开该文件可以实现离线查看 threejs API 文档

  • examples:里面有大量的threejs案例,平时可以通过代码编辑全局查找某个API、方法或属性来定位到一个案例。

  • src:Three.js引擎的各个模块,可以通过阅读源码深度理解threejs引擎。

  • utils:一些辅助工具

    \utils\exporters\blender:blender导出threejs文件的插件。

二、部署本地 Three.js 文档

我们在学习、开发 Three.js 项目的过程中,会不停的翻阅 Three.js 文档。

但是,官网打开很慢,怎么办?我就需要在本地部署 Three.js 文档,便于查阅。

1. 下载 three.js-master 压缩包

  1. 从官网下载 three.js-master 压缩包,并解压。

  2. 把文件夹添加到 VSCode ,作为项目目录。

特别提醒:目录不能有中文。

此步骤略

2. 利用 VSCode 安装依赖

前提需要安装 Node 环境,此处略。

1. 在目录上右键,选择“在集成终端中打开”。

2. 在终端里输入 npm i,安装依赖。安装需要时间,请耐心等待。

3. 启动 Three.js 文档

使用 npm start 命令,启动 Three.js 文档。

启动后,ctrl+点击 链接地址,可以打开文档页面。

打开成功的截图。

点击 docs 文件夹,就可以打开 Three.js 文档。还可以修改文档为中文:

点击 editor 文件夹,可以打开 3D 编辑器。

点击 examples 文件夹,可以查看 Three.js 的官方示例。

4. 修改文档端口

可以在 package.json 文件的以下代码处,修改端口号,避免跟项目端口冲突。默认是 8080 端口。

"scripts": {
  ...
    "dev": "concurrently --names \"ROLLUP,HTTP\" -c \"bgBlue.bold,bgGreen.bold\" \"rollup -c utils/build/rollup.config.js -w -m inline\" \"servez -p 8080\"",
   ...
}

5. 在 IIS 配置 Three.js 文档

如果觉得每次查阅 Three.js 文档,都要打开 VS code 启动 Node 服务嫌麻烦。可以利用 windows 系统的 IIS (Internet Information Services,互联网信息服务)来作为 Three.js 本地服务器。

(1)启用 IIS

1. 进入 windows 系统的控制面板,选择“程序”。

2. 

2. 选择“启用或关闭 Windows 功能”,把 IIS(Internet Information Services) 前面的勾选上,点击“确定”,等待系统安装 IIS。

3. 在“此电脑”右击,选择“管理”。可以在“计算机管理”面板中,在“服务和应用程序”里看到 IIS 的选项。

(2)配置 Three.js 文档网站

在“网站”上右击,选择"添加网站"。

可以参考我的配置添加网站信息。

这里 IP 地址建议选择:全部未分配。因为,默认就是 http://127.0.0.1 访问,也可以用 http://localhost 访问。

如果设置了 IP,就只能用 IP 访问了。

(3)配置目录浏览

不过,此时在浏览器输入 http://127.0.0.1:9000,还是无法访问 Three.js 文档。

这是因为,Three.js 文档目录里没有默认要访问的页面文件(也就是没有 index.html,default.html 之类的文件),里面只是目录。

所以,要启用目录浏览

在 IIS 里,选择 ThreejsDOC 网站,在右边面板里,选择“目录浏览”。

在目录浏览里,选择“启用”即可。

在浏览器地址栏输入:一定要带上端口号

http://127.0.0.1:9000/
或者:
http://localhost:9000

就可以访问 Three.js 文档了。而且,IIS 默认设置网站是启动的。因此,下次再翻阅文档,就可以不用设置 IIS ,直接在浏览器地址栏输入以上网址就行。

 

可以把运行的页面,在浏览器收藏起来,这样,直接点就可以打开了。 非常Nice~!

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

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

相关文章

自学Java的第十八天

一,每日收获 1.数组拷贝 2.数组反转 3.数组添加/扩容 二,新名词与小技巧 三,今天学习中所遇到的困难 一,每日收获 1.数组拷贝 编写代码 实现数组拷贝 将 int[] arr1 {10,20,30}; 拷贝到 arr2 数组 , 要求数据空间是独…

LVGL部件4

一.列表部件 1.知识概览 2.函数接口 1.lv_list_add_btn lv_list_add_btn 是 LittlevGL(LVGL)图形库中的一个函数,用于向列表(list)对象中添加一个按钮(button)。 函数原型为:lv_ob…

DRV8301 踩坑记,Status1 D10 老是 Fault

波形如上: 看第一个时钟出来的数据(Status1 读完自动清除?),因此数据是:0x20 输入结构体解析: 可以看到,FETHA_OC了也就是A桥上管过流了; 检查一下硬件看看&#xff1…

【git】git update-index --assume-unchanged(不改动.gitignore实现忽略文件)

文章目录 原因分析:添加忽略文件(取消跟踪)的命令:取消忽略文件(恢复跟踪)的命令:查看已经添加了忽略文件(取消跟踪)的命令: 原因分析: 已经维护的项目,文件已经被追踪,gitignore文件不方便修…

天梯算法Day1整理

Nanami and Arithmetic Sequence 题面 思路 炸鱼题 只有n1的时候&#xff0c;只有一个等差数列&#xff1b; 其余时候&#xff0c;都是都有无数个等差数列。 代码 #include <iostream> using namespace std;int main() {int t, n;cin >> t;while (t--) {cin…

如何使用淘宝客?

1.定义&#xff1a;是一种按成交计费的推广工具&#xff0c;由淘宝客帮助商家推广商品&#xff0c;买家通过推广链接进入完成交易后&#xff0c;商家按照设置佣金支付给淘宝客费用。 2.优势&#xff1a; &#xff08;1&#xff09;展示、点击全免费。 &#xff08;2&#xf…

防御保护---防火墙双机热备直路部署(上下三层接口)

防御保护---防火墙双机热备直路部署&#xff08;上下三层接口&#xff09; 一、根据网段划分配置IP地址和安全区域二、配置动态路由OSPF三、配置双机热备四、测试&#xff1a;4.1 测试一&#xff1a;查看状态和路由器路由表&#xff08;双机热备&#xff09;前后对比4.2 测试二…

Ant-design-vue(v4.1.1) 创建并初始化前端项目

前提&#xff1a; 先安装 node.js (安装node.js后&#xff0c;在安装目录下的node-modles下会有一个 npm) 直接官网下载&#xff0c;直接点击安装&#xff0c;不勾选tools&#xff0c;选非c盘&#xff08;之后会用npm来下载东西&#xff09; 验证安装是否成功 cmd : node -v …

【Vue3 + Vite】Vite搭建 项目解构 Vue快速学习 第一期

文章目录 Vue3介绍Vue3通过Vite实现工程化&#xff1a;一、Vite创建Vue3工程化项目1.1 ViteVue3项目的创建、启动、停止1.2 ViteVue3项目的目录结构 二、ViteVue3 项目组件(SFC入门)2.1 什么是VUE的组件 ?2.2 什么是.vue文件 ?2.3 工程化vue项目如何组织这些组件? 三、ViteV…

易优CMS采集插件使用教程

本易优CMS采集教程说明如何使用易优CMS采集插件&#xff0c;批量获取互联网上的文章数据&#xff0c;并自动更新到易优cms&#xff08;eyoucms&#xff09;网站&#xff0c;快速丰富网站的内容。 目录 1. 下载并安装易优CMS采集插件 2. 对接网页文章采集工具 3. 采集数据发…

12nm工艺,2.5GHz频率,低功耗Cortex-A72处理器培训

“ 12nm工艺&#xff0c;2.5GHz频率&#xff0c;低功耗Cortex-A72处理器培训” 本项目是真实项目实战培训&#xff0c;低功耗UPF设计&#xff0c;后端参数如下&#xff1a; 工艺&#xff1a;12nm 频率&#xff1a;2.5GHz 资源&#xff1a;2000_0000 instances 为了满足更多…

Git系列---标签管理

&#x1f4d9; 作者简介 &#xff1a;RO-BERRY &#x1f4d7; 学习方向&#xff1a;致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 &#x1f4d2; 日后方向 : 偏向于CPP开发以及大数据方向&#xff0c;欢迎各位关注&#xff0c;谢谢各位的支持 目录 1.理解标签2.创建标签…

Python之数据可视化(地图)

目录 一 基础地图应用 二 全国疫情图 一 数据准备 二 数据处理 二 湖北省疫情图 一 数据准备 二 数据处理 一 基础地图应用 导入map地图对象 from pyecharts.charts import Map map Map() 写入数据 data [("北京市",100),("上海市"…

【代码随想录】LC 349. 两个数组的交集

文章目录 前言一、题目1、原题链接2、题目描述 二、解题报告1、思路分析2、时间复杂度3、代码详解 前言 本专栏文章为《代码随想录》书籍的刷题题解以及读书笔记&#xff0c;如有侵权&#xff0c;立即删除。 一、题目 1、原题链接 349. 两个数组的交集 2、题目描述 二、解题报…

使用Spring AOP做接口权限校验和日志记录

文章目录 一、AOP 介绍1.1 AOP 应用场景1.2 AOP 中的注解 二、权限校验2.1 定义权限注解2.2 定义切面类2.3 权限验证服务2.4 织入切点2.5 测试 三、日志记录3.1 日志切面类3.2 异常统一处理 四、AOP 底层原理4.1 todo 一、AOP 介绍 AOP&#xff1a; 翻译为面向切面编程&#x…

“/“应用程序中的服务器错误.

<div id"m_category" class" round2"><h3>管理中心</h3><div class"con"> <p><a href"categorymanager.aspx">类别管理</a></p> /*我是这段代码出现问题*/ <p><a …

深入理解Java中的ForkJoin框架原理

在现代多核处理器的时代&#xff0c;有效地利用并行计算可以极大地提高程序的性能。Java中的ForkJoin框架是Java 7引入的一个并行计算框架&#xff0c;它提供了一种简单而高效的方式来利用多核处理器。在本文中&#xff0c;我们将深入探讨ForkJoin框架的原理和工作方式。 一、什…

MySQL进阶45讲【7】行锁

1 前言 在上一篇文章中&#xff0c;介绍了MySQL的全局锁和表级锁&#xff0c;今天我们就来讲讲MySQL的行锁。 MySQL的行锁是在引擎层由各个引擎自己实现的。但并不是所有的引擎都支持行锁&#xff0c;比如MyISAM引擎就不支持行锁。不支持行锁意味着并发控制只能使用表锁&…

vue2父组件向子组件传值时,子组件同时接收多个数据类型,控制台报警的问题

最近项目遇到一个问题,就是我的父组件向子组件(公共组件)传值时,子组件同时接收多个数据类型,控制台报警的问题,如下图,子组件明明写了可同时接收字符串,整型和布尔值,但控制台依旧报警: 仔细检查父组件,发现父组件是这样写的: <common-tabletooltip :content=…

数据可视化工具选择指南:六款主流工具的综合评测

随着大数据时代的来临&#xff0c;数据可视化已成为各行业不可或缺的工具。本文将为您介绍市面上六款主流数据可视化工具&#xff0c;包括山海鲸可视化、Echarts、D3.js、Tableau、Power BI和Funnel.io&#xff0c;帮助您更好地了解并选择适合您的工具。 山海鲸可视化 山海鲸…