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

开一个天坑,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.mzph.cn/news/660935.shtml

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

相关文章

LaTeX教程(001)-LaTeX文档结构(01)

LaTeX教程(001)- LaTeX \LaTeX LATE​X文档结构(01) 说在前面 这是我本人学习《The LaTeX Companion》第三版的笔记,但并不是翻译。 书籍的第一章对 LaTeX \LaTeX LATE​X及其历史进行了相当长的介绍,这是几乎每一本关于 LaTeX \LaTeX LATE​X的书都会…

如何一键更新幻兽帕鲁服务器?腾讯云轻量应用服务器版

如何在不需要远程登录服务器的情况下,通过一行命令来更新幻兽帕鲁呢? 腾讯云轻量云一键部署幻兽帕鲁服务器教程:https://curl.qcloud.com/pzBO9wN7 首先是幻兽帕鲁Windows服务器版,只需要在腾讯云的轻量应用服务器详情页&#x…

《苍穹外卖》电商实战项目实操笔记系列(P123~P184)【下】

史上最完整的《苍穹外卖》项目实操笔记系列【下篇】,跟视频的每一P对应,全系列10万字,涵盖详细步骤与问题的解决方案。如果你操作到某一步卡壳,参考这篇,相信会带给你极大启发。 上篇:P1~P65《苍穹外卖》项…

C#中使用OpenCvSharp4库读取本地图像并显示

C#中使用OpenCvSharp4库读取本地图像并显示 OpenCvSharp4是基于.NET 的 OpenCV 包装器,OpenCV源代码是采用C和C写的,目前对于C和Python开发者相对来说比较友好,对于Python开发者而言官方提供了opencv-python使用。 首选我们使用Visual Studi…

运动编辑学习笔记

目录 跳舞重建: 深度运动重定向 Motion Preprocessing Tool anim_utils MotionBuilder 跳舞重建: https://github.com/Shimingyi/MotioNet 深度运动重定向 https://github.com/DeepMotionEditing/deep-motion-editin 游锋生/deep-motion-editin…

uni-app app引入天地图

话不多说咸鱼来了 <template><view><div class"mapBox" style"width: 100%; height: 100vh;background: #ddc0c0;" id"mapId" ></div></view> </template> <script module"test" lang"r…

不废话的将ts一篇文章写完

写在前面 网上很多写ts的教程的&#xff0c;但是我觉得写的太繁琐了&#xff0c;这里我直接将基础用法写上&#xff0c;包括编译后的js代码&#xff0c;以便于你们进行对比&#xff0c; 包括一些常见的报错信息&#xff0c;你们可以对比一下报错信息&#xff0c; 我尽量不废话的…

【模型微调】| 各类微调模型总结 P-Tuning,Prefix,P-tuning v2,LoRA

文章目录 1 微调背景1.1 Full fine-tuning 全参数微调&#xff08;FFT&#xff09;1.2 parameter-Efficient-fine-tuning 部分参数微调&#xff08;PEFT&#xff09; 2 提示词调整训练法2.1 P-Tuning2.2 Prefix2.3 P-Tuning v2 3 结构调整训练法3.1 Adapter tuning3.2 LoRA 微调…

PySimpleGUI 综合应用|英语文本朗读以及转换为语音Mp3

PySimpleGUI 综合应用 目录 PySimpleGUI 综合应用 应用界面 完整代码 所需模块 PySimpleGUI pyttsx3 pyaudio rapidfuzz 字典格式 应用界面 完整代码 英语朗读器.pyw import PySimpleGUI as sg import pyttsx3,pyaudio,pyperclip import os,re,datetime,wave,threa…

java基础(面试用)

一、基本语法 1. 注释有哪几种形式&#xff1f; //单行注释&#xff1a;通常用于解释方法内某单行代码的作用。 //int i 0;//多行注释&#xff1a;通常用于解释一段代码的作用。 //int i 0; //int i 0;//文档注释&#xff1a;通常用于生成 Java 开发文档。 /* *int i 0; …

springboot139华强北商城二手手机管理系统

简介 【毕设源码推荐 javaweb 项目】基于springbootvue 的 适用于计算机类毕业设计&#xff0c;课程设计参考与学习用途。仅供学习参考&#xff0c; 不得用于商业或者非法用途&#xff0c;否则&#xff0c;一切后果请用户自负。 看运行截图看 第五章 第四章 获取资料方式 **项…

静态时序分析:时序弧以及其时序敏感(单调性)

相关阅读 静态时序分析https://blog.csdn.net/weixin_45791458/category_12567571.html?spm1001.2014.3001.5482 在静态时序分析中&#xff0c;不管是组合逻辑单元&#xff08;如与门、或门、与非门等&#xff09;还是时序逻辑&#xff08;D触发器等&#xff09;在时序建模时…

如何提高工业数据采集的效率和准确性-天拓四方

随着工业4.0和智能制造的兴起&#xff0c;工业数据采集的重要性日益凸显。通过数据采集&#xff0c;企业能够实时监控生产过程&#xff0c;优化资源配置&#xff0c;提高生产效率。在实时监控、生产优化、质量控制等方面&#xff0c;有效的数据采集系统能够为企业提供宝贵的洞察…

幻兽帕鲁服务器多少钱一台?腾讯云新版报价

腾讯云幻兽帕鲁服务器4核16G、8核32G和16核64G配置可选&#xff0c;4核16G14M带宽66元一个月、277元3个月&#xff0c;8核32G22M配置115元1个月、345元3个月&#xff0c;16核64G35M配置580元年1个月、1740元3个月、6960元一年&#xff0c;腾讯云百科txybk.com分享腾讯云幻兽帕鲁…

MongoDB安装以及卸载,通过Navicat 15 for MongoDB连接MongoDB

查询id&#xff1a; docker ps [rootlocalhost ~]# docker stop c7a8c4ac9346 c7a8c4ac9346 [rootlocalhost ~]# docker rm c7a8c4ac9346 c7a8c4ac9346 [rootlocalhost ~]# docker rmi mongo sudo docker pull mongo:4.4 sudo docker images 卸载旧的 sudo docker stop mong…

线上品牌展厅有哪些优点,如何打造线上品牌展厅

引言&#xff1a; 在当今数字化时代&#xff0c;品牌展示的方式也在不断演变&#xff0c;线上品牌展厅作为一种新型的展示方式&#xff0c;正逐渐成为品牌宣传的新宠。但是为什么需要线上品牌展厅&#xff0c;线上品牌展厅有哪些优势呢&#xff1f; 一&#xff0e;为什么需要线…

各品牌主板快速启动热键对照表及CMOS进入方法

各品牌主板快速启动热键对照表 主板品牌 启动按键 笔记本品牌 启动按键 主机品牌 启动按键 华硕主板 F8 联想笔记本 F12 联想台式机 F12 技嘉主板 F12 宏碁笔记本 F12 惠普台式机 F12 微星主板 F11 华硕笔记本 ESC 宏碁台式机 F12 梅捷主板 F9 惠普笔…

elementui 开始结束时间可以选择同一天不同时间段

先在main.js中导入 import moment from moment <el-row><el-col :span"12"><el-form-item label"考试开始时间" prop"startTime"><el-date-picker v-model"shiJuanXinXiForm.startTime" style"width: 100…

异步解耦之RabbitMQ(二)__RabbitMQ架构及交换机

异步解耦之RabbitMQ(一) RabbitMQ架构 RabbitMQ是一个基于AMQP&#xff08;Advanced Message Queuing Protocol&#xff09;协议的消息代理中间件&#xff0c;它通过交换机和队列实现消息的路由和分发。以下是RabbitMQ的架构图&#xff1a; Producer&#xff08;生产者&#…

孪生卷积神经网络(Siamese Convolutional Neural Network)的设计思路

孪生卷积神经网络&#xff08;Siamese Convolutional Neural Network&#xff09;是一种特殊类型的卷积神经网络&#xff0c;主要用于处理需要成对比较的数据&#xff0c;例如判断两个输入是否相似。 以下是孪生卷积神经网络的基本结构&#xff1a; 输入层&#xff1a;这一层…