（一）ThreeJS本地环境搭建

已于 2022-11-16 02:42:25 修改
阅读量2.2k 收藏 8
点赞数
分类专栏： webGL 文章标签： javascript
于 2022-11-14 02:13:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/donglaoxie/article/details/127840254
版权
本文详细介绍了如何在本地部署three.js环境，包括从官方GitHub地址下载代码、安装依赖、配置VSCode并启动项目，解决外网访问不稳定的问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

1、本地部署threeJS环境

threeJS API、编辑器、示例代码部署在外网节点，访问不稳定。

2、部署过程

2.1、three开源地址

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

2.2、代码下载

在这里插入图片描述

2.3、依赖安装

在vscode中打开项目，在项目中右键集成终端安装依赖
node环境详见：Node.JS 下载、安装、配制、镜像修改
在这里插入图片描述

2.4、项目启动

在这里插入图片描述
在这里插入图片描述

【three.js】搭建本地静态服务器 查询API文档使用
qq_38196449的博客
03-02 329
因为threejs每月更新的时候，API会有变化，但我们项目的threejs版本是基本上不会变的，所以本地有个对应固定版本的API文档服务器很重要。github链接查看所有版本threejs：https://github.com/mrdoob/three.js/releases。想要运行刚才下载的three.js文件包，vscode需要下载live-server插件。选择你需要的版本three.js文件包下载，然后解压。这样我们就可以随时随地的查看文档喽！的开发环境，这样方便查询。用vscode打开即可。
<Three.js>（第一节）环境搭建
晨曦的博客
07-14 8158
Three.js顾名思义3D的js库。是运行在浏览器的基于webgl的3D引擎。该引擎是github上的一个开源项目，下载地址：https://github.com/mrdoob/three.js/1、搭建一个本地服务器。（本人用的是另外一台mac电脑的自带本地服务器）2、下载three.js库。https://github.com/mrdoob/three.js/准备好前面的操作后，接下来是创建一
《Three.JS零基础入门教程》第一篇：搭建开发环境
GIS前端嘉欣的博客
04-17 497
由于threejs的更新非常快, 这里默认安装会自动安装最新版的three.js, 不同的版本下API和目录结构可能不同。本教程由新中地GIS开发高级讲师李俊杰老师出品，由浅入深，循序渐进，深入浅出的分析 web3D 中的核心概念。Three.js是一个基于JavaScript 的3D图形库，它可以在网页上创建交互式的3D图形和动画效果。threejs的官方从150+版本后打算废弃直接引入的方式, 并在160版本移除。Three.js的官网在国外, 访问速度比较慢, 而我们需要经常参考。
【three.js】简介和本地部署
蜗牛~~
10-08 6279
实现企业网站三维呈现，让企业形象更直观、更立体地展现给客户，打破传统平面展示模式，打造智慧、个性、创新的企业形象。因此我们可以访问b站大佬在国内搭建好的本地three.js官网，大家访问如下链接即可，当然也可以自己搭建，下面有讲解。什么是点、线、面、几何体、材质、物体、场景、相机、渲染器、动画、控制器等基础概念，搞定一个最基础的场景和3d物体的显示。接着3d渲染要真实性，肯定离不开PBR，详细了解什么是PBR，PBR基于物理的光照原理的渲染,。由于访问three.js官网是国外的网站，非常慢。
Three.js 入门实战：安装、基础概念与第一个场景⭐
最新发布
sunbyte带你学
04-09 541
掌握创建 Three.js 场景的基本流程：设置 Scene / Camera / Renderer添加 Mesh / Light / Controls实现响应式和用户交互这也是所有 Three.js 项目的基本框架，掌握它你就迈出第一步啦！
Three.js学习1：threejs简介及文档本地部署
九天翔龙的技术博客
02-01 4120
开一个天坑，Three.js 学习笔记。我觉得未来3D页面一定是一个趋势。
ThreeJS:本地部署官网文档与案例
席木木的博客
05-02 1025
ThreeJS:本地部署官网文档与案例
three.js例子本地部署
garyaofq的博客
02-05 1166
最近下了three.js,想安装到本地，然后浏览。结果一直报错，导入文件不成功。后来检查报错信息发现是因为新的文件中用了“importmap”这个命令，而这个命令好像只有Chrome支持，下载了Chrome后，浏览正常（部分模型后缀需要添加到mime）。 ...
three.js基础环境搭建
静Yu的博客
06-26 4945
three.js官网Three.js是一款基于WebGL的JavaScript 3D库，它使得开发者能够使用JavaScript在Web浏览器中创建和展示高质量的3D图形和互动内容。
threejs-boilerplate：基于Backbone和LoDash的THREE.js开发环境搭建指南
总结起来，threejs-boilerplate是一个为WebGL开发者准备的资源丰富的起点，整合了现代前端开发的最佳实践，如模块化、依赖管理和现代的开发工作流。这样的样板文件不仅简化了初始设置，还提供了一个高效、可扩展的...
three.js环境搭建指南：从零开始创建第一个3D场景
本文将带领读者从零开始，通过搭建three.js环境，创建第一个3D场景，进一步探索这一引人入胜的领域。 ### 为什么选择three.js 在众多3D库中，为何选择使用three.js呢？首先，three.js具有强大的渲染能力，支持...
Three.js——第一篇：部署以及基础代码创建场景、GUI调整样式
m0_73991249的博客
06-25 2258
很多教程一开始要大家自己部署three.js的中文本地部署，我就不弄了，我弄了半天也没弄出来烦了，反正我也不爱看官方文档我就不弄了，直接开干。另外本人学的前端，习惯用vue就以vue的开发框架做基础引入three.js了。
ThreeJS环境搭建
qq_41014870的博客
02-20 1275
ThreeJs是一款基于WebGL封装的在浏览器中运行的 3D 库，你可以用它来创造你所需要的一系列3D场景，如最近比较火的数字孪生、元宇宙可视化等等，如果你想深入学习Three.js，那么就跟着我的文章一起学习就好了。
Three.js本地环境搭建
一起coding，一起嗨。
07-01 2190
前置条件：本地按照node、npm 二、下载代码 三、运行 打开地址 查看文档，选择合适语言 查看案例
搭建threejs测试环境
黑胡子大叔的博客
01-18 700
前言 在做threejs练手项目时，会存在同源策略的问题 倘若你需要从外部文件里载入几何体或是纹理贴图，由于浏览器same origin policy（同源策略）的安全限制，从本地文件系统载入外部文件将会失败，同时抛出安全性异常。 参照threejs的官方文档，给出两种解决方式 在浏览器中改变本地文件的安全策略，这将使你可以通过 搭建本地服务器 官方文档中也做了详细解析，还有开启本地服务器的几个例子；这里采用node的http-server 这里采取第二种解决方式 构建 使用到 npm webpa
ThreeJs-01开发环境搭建
weixin_40291224的博客
11-20 80
写在前面，好久不见各位，之前一段时间因为一些事情有点忙，但从未停止学习的脚步，也屯了很多笔记，会在未来的时间慢慢发出来，从今天开始一起进入WebGis，threeJs目前大前端发展的一个方向开始学习，希望里面可以有帮助到大家的内容，有不足的地方还请指正，一起学习进步！！！ 1.了解Three.js 近年来web得到了快速的发展。随着HTML5的普及，网页的表现能力越来越强大。网页上已经可以做出很...
【three.js】搭建环境
m0_64455070的博客
01-02 1288
three.js搭建环境过程
在Vue中搭建Three.js环境(超详细、保姆级)，创建场景、相机、渲染器《一》
邵群超的博客
03-04 9360
Three.js 是一款基于 WebGL的 JavaScript 3D 库，它封装了 WebGL API，为开发者提供了简单易用的 API 来在 Web 浏览器中展示 3D 图形。Three.js 提供了多种组件、方法和工具，用于创建和处理 3D 图形，使得开发者可以在 Web 浏览器中快速创建 3D 场景和动画，而不需要深入了解 WebGL 的底层实现。简单来说：它就是一个绘制 3D 的 javaScript 轻量级框架；
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值