【three.js】搭建环境
一、安装Node.js和npm
- 下载与安装：
访问Node.js官方网站（nodejs.org），根据你的操作系统下载并安装最新稳定版（LTS版本）的Node.js。安装过程中，npm（Node包管理器）会随Node.js一起安装。
二、初始化项目
- 创建项目文件夹：
在你的文件系统中创建一个新的文件夹，用于存放你的Three.js项目。
- 打开命令行：
打开命令行界面（例如Windows的cmd、PowerShell，macOS的Terminal，或Linux的终端），并导航到你刚刚创建的项目文件夹。
- 初始化项目：
在命令行中运行npm init -y（或npm init并按提示填写信息）来初始化npm项目，这将生成一个package.json文件，用于管理项目的依赖和配置。
三、安装Three.js
- 通过npm安装：
在命令行中运行npm install three命令来安装Three.js库及其依赖。
四、配置项目结构
- 创建src文件夹：
在项目文件夹中创建一个名为src的文件夹，用于存放源代码文件。
- 创建HTML和JS文件：
在src文件夹中创建一个名为index.html的文件，作为项目的入口文件。
在src文件夹中创建一个名为main.js的文件，用于编写Three.js的脚本代码。
- 配置HTML文件：
在index.html文件中，添加基本的HTML结构，并引入main.js文件。例如：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Three.js Project</title>
</head>
<body><script type="module" src="./main.js"></script>
</body>
</html>- 编写Three.js代码：
在
main.js文件中，编写Three.js的初始化代码，包括创建场景、相机、渲染器，以及添加3D对象等。例如：
import * as THREE from 'three';// 创建场景
const scene = new THREE.Scene();// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);// 创建一个立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);// 渲染循环
function animate() {requestAnimationFrame(animate);cube.rotation.x += 0.01;cube.rotation.y += 0.01;renderer.render(scene, camera);
}
animate();五、启动开发服务器
- 安装开发服务器（可选）：
你可以使用Vite、Parcel、Webpack等现代前端构建工具来启动开发服务器，这些工具提供了热重载、代码拆分、优化等功能。
例如，使用Vite，你可以运行npm init vite@latest来初始化Vite项目，然后按照提示操作。
- 使用简单HTTP服务器（可选）：
如果你不想使用复杂的构建工具，也可以使用简单的HTTP服务器，如http-server。
在命令行中运行npm install -g http-server来全局安装http-server。
然后，在项目文件夹中运行http-server -o来启动服务器并打开浏览器。
六、查看效果
- 打开浏览器：
根据启动的开发服务器或HTTP服务器的地址，打开浏览器并访问相应的URL。
应该能看到一个旋转的绿色立方体，这是Three.js在网页中渲染的3D效果。
通过以上步骤，就可以在本地成功搭建一个Three.js的开发环境，并开始创建和展示3D图形了。
相关文章：
【three.js】搭建环境
一、安装Node.js和npm 下载与安装： 访问Node.js官方网站（nodejs.org），根据你的操作系统下载并安装最新稳定版（LTS版本）的Node.js。安装过程中，npm（Node包管理器）会随No…...
【MySQL 保姆级教学】用户管理和数据库权限（16）
数据库账户管理是指对数据库用户进行创建、修改和删除等操作，以控制用户对数据库的访问权限。通过账户管理，可以设置用户名、密码、主机地址等信息，确保数据库的安全性和可控性。例如，使用 CREATE USER 创建用户，ALTER…...
信息科技伦理与道德1：绪论
1 问题描述 1.1 信息科技的进步给人类生活带来的是什么呢？ 功能？智能？陪伴？乐趣？幸福？ 基于GPT-3的对话Demo DeepFake 深伪技术：通过神经网络技术进行大样本学习，将个人的声音、面…...
HTTP2/3强势来袭
目录 摘要HTTP1/1.1概述HTTP/1.0 vs HTTP/1.1HTTP/1.0中的问题HTTP/1.1的管道化机制为什么HTTP/1.0导致“卡住”什么是队头阻塞 HTTP2兼容 HTTP/1.1头部压缩静态表编码动态表编码伪标头字段 二进制帧并发传输Stream ID的存储位置如何理解Steam，Message，F…...
2025考研江南大学复试科目控制综合（初试807自动控制原理）
2025年全国硕士研究生招生考试江南大学考点 一年年的考研如期而至，我也变成了研二了，作为2次考研经历的学长，总是情不自禁地回想起自己的考研经历，我也会经常从那段经历中汲取力量。我能理解大多数考生考完后的的迷茫无助&…...
Java SpringBoot使用Apache POI导入导出Excel文件
点击下载《Java SpringBoot使用Apache POI导入导出Excel文件(源代码)》 1. Apache POI 简介 Apache POI 是一个强大的 Java 库，用于处理 Microsoft Office 文档，包括 Excel 文件（.xls 和 .xlsx）。在 Java Spring Boot 项目中&am…...
Web安全扫盲
1、建立网络思维模型的必要 1 . 我们只有知道了通信原理， 才能够清楚的知道数据的交换过程。 2 . 我们只有知道了网络架构， 才能够清楚的、准确的寻找漏洞。 2、局域网的简单通信 局域网的简单通信（数据链路层） 一般局域网都通…...
8. C++ 面向对象之特性一（封装）
面向对象主要包括三大类：封装，继承，多态 1.类和对象 c认为，万物皆为对象，对象上有其属性和行为 人可以作为对象，属性有姓名、年龄、身高、体重...，行为有走、跑、跳、吃饭、唱歌... 车也可以作…...
软件工程期末复习（一）
题目复习 单选题 软件产品的核心特性是什么？ A. 物质性 B. 逻辑性 C. 可复制性 D. 消耗性 正确答案：B 单选题 在软件开发过程中，哪个环节最接近于传统制造业中的“生产”过程？ A. 需求分析 B. 编码 C. 测试 D. 研制（…...
什么是Kafka的重平衡机制？
Kafka 的重平衛机制是指在消费者组中新增或删除消费者时，Kafka 集群会重新分配主题分区给各个消费者，以保证每个消费者消费的分区数量尽可能均衡。 重平衡机制的目的是实现消费者的负载均衡和高可用性，以确保每个消费者都能够按照预期的方式…...
基于Python读取ZIP和TAR格式压缩包教程
在数据处理和文件管理中，压缩包（如ZIP、TAR等格式）的使用非常普遍。Python提供了多种库来读取和处理这些压缩包。本文将介绍如何使用Python的内置库和第三方库来读取ZIP和TAR格式的压缩包。 1、读取ZIP文件 Python的zipfile模块提供了处理Z…...
麒麟服务器安装kafka--亲测
我这安装的是单机版本的： 下载地址：Index of /kafka/3.9.0 我下载的是：https://dlcdn.apache.org/zookeeper/zookeeper-3.9.3/apache-zookeeper-3.9.3-bin.tar.gz https://dlcdn.apache.org/kafka/3.9.0/kafka_2.12-3.9.0.tgz 一、下载并上…...
 高层(1))
5G NTN(七) 高层(1)
说明：本专题主要基于3GPP协议38.821 目录 1. Idle态移动性增强 1.1 TA问题 1.1.1 TA的大小 1.1.2 针对NTN LEO的移动TA，场景C2和D2 1.1.3 针对NTN LEO的固定TA，场景C2和D2 1.1.3.1 方法1：当UE位置信息无法获取的时候 1.1.…...
git：指令集
以下是对这些 Git 新特性和命令的更详细解读和实际用例分析，帮助更好地理解它们的作用及适用场景： 1. git switch 和 git restore 背景： 传统上，git checkout 是一个多功能命令，用于切换分支、检出文件、创建分支等&…...
【Vue学习】Vue 组件实例的生命周期（四个阶段，八个钩子）
一、为什么要理解生命周期？ 理解生命周期就像是知道了一部电影的剧情走向，能让你在适当的时机做出反应。Vue 生命周期的钩子让你可以在不同的阶段插入你的逻辑，像是提前准备、后期清理或者在数据更新时做点事情。这种“精确控制”的能力会让你…...
第27周：文献阅读及机器学习
目录 摘要 Abstract 一、文献阅读 发现问题 研究方法 CNN-LSTM DT SVR 创新点 案例分析 数据准备 模型性能 预测模型的实现 仿真实验及分析 二、LSTM 1、基本结构 2、具体步骤 3、举例说明 4、原理理解 总结 摘要 本周阅读文献《Short-term water qua…...
Tailwind CSS 实战：动画效果设计与实现
在现代网页设计中,动画效果就像是一位优秀的舞者,通过流畅的动作为用户带来愉悦的视觉体验。记得在一个产品展示网站项目中,我们通过添加精心设计的动画效果,让用户的平均停留时间提升了 35%。今天,我想和大家分享如何使用 Tailwind CSS 打造优雅的动画效果。 设计理念 设计动…...
在K8S中，Pod请求另一个Pod偶尔出现超时或延迟，如何排查？
在Kubernetes中，当Pod请求另一个Pod时偶尔出现超时或延迟，可能是由于多种原因造成的。以下是一些建立的排查步骤： 1. 检查网络配置和插件： 确认你的kubernetes集群使用了合适的网络插件（如Calico、Flannel等…...
C# 设计模式（结构型模式）：外观模式
C# 设计模式（结构型模式）：外观模式 (Facade Pattern) 在复杂系统中，往往会涉及到多个子系统、模块和类。这些子系统的接口和功能可能会让使用者感到困惑和复杂。在这种情况下，我们可以使用外观模式（Facade…...
)
LLM - 使用 LLaMA-Factory 部署大模型 HTTP 多模态服务 教程 (4)
欢迎关注我的CSDN：https://spike.blog.csdn.net/ 本文地址：https://spike.blog.csdn.net/article/details/144881432 大模型的 HTTP 服务，通过网络接口，提供 AI 模型功能的服务，允许通过发送 HTTP 请求，交互大模型，通常基于云计算架构，无需在本地部署复杂的模型和硬件，…...
MCGS学习记录
软件包 用户窗口 主窗口 元件：工具箱->输入框上面 数据对象 在工作台的实时数据库可以新增数据对象 理解为中间变量，控件改变其值，控件监测其值做出变化 基本属性 设定变量名和初始值 指针化？ 变化时自动保存初始值&#x…...
Swift Protocols（协议）、Extensions（扩展）、Error Handling（错误处理）、Generics（泛型）
最近在学习 Swift，总结相关知识 1. Protocols（协议） 1.1 协议的定义和实现 协议（protocol） 是一种定义方法和属性的蓝图，任何类、结构体或枚举都可以遵循协议。遵循协议后，需要实现协议中定义…...
axios和fetch的实现原理以及区别，与XMLHttpRequest的关系，并结合react封装统一请求示例
Axios 和 Fetch 对比及统一请求封装 1. Axios 基础用法 1.1 安装和引入 // 安装 npm install axios// 引入 import axios from axios;1.2 基本请求方法 // GET 请求 axios.get(/api/users).then(response > console.log(response.data)).catch(error > console.error…...
2024年阅读书单
《高效能人士的7个习惯》 史蒂芬.柯维 精进 《高效能人士的7个习惯》在读了一遍之后，记住非常深刻的就是积极主动和以终为始。 《软件架构》 Simon Brown 架构、技术 《软件架构》这本书比较抽象，若是工作时间比较少的人来读，可能觉得作者没写…...
Eclipse 内容辅助
Eclipse的内容辅助（Content Assist）功能是一项核心特性，它通过提供代码提示和自动完成建议来提高开发效率。这个功能能够在用户编写代码时自动显示可能的代码补全选项，如变量名、方法名、类名和关键字等。它还能根据用户的输入和上…...
【数学建模笔记】评价模型-基于熵权法的TOPSIS模型
视频课地址：https://www.bilibili.com/video/BV1eRyVYUEhg 本系列文章和课程一样，只使用Python实现，好久没玩数学建模了 国赛中不能再用TOPSIS，可以做辅助算法。 1. 算法原理 熵权TOPSIS方法是一种结合熵权法和TOPSIS的决策分析…...
小程序发版后，强制更新为最新版本
为什么要强制更新为最新版本？ 在小程序的开发和运营过程中，强制用户更新到最新版本是一项重要的策略，能够有效提升用户体验并保障系统的稳定性与安全性。以下是一些主要原因： 1. 功能兼容 新功能或服务通常需要最新版本的支持&…...
数据分析思维（七）：分析方法——群组分析方法
数据分析并非只是简单的数据分析工具三板斧——Excel、SQL、Python，更重要的是数据分析思维。没有数据分析思维和业务知识，就算拿到一堆数据，也不知道如何下手。 推荐书本《数据分析思维——分析方法和业务知识》，本文内容就是提取…...
)
SAP 01-初识AMDP(ABAP-Managed Database Procedure)
1. 什么是AMDP(ABAP-Managed Database Procedure) 1.）AMDP - ABAP管理数据库程序，是一种程序，我们可以使用SQLSCRIPT在AMDP内部编写代码，SQLSCRIPT是一种与SQL脚本相同的数据库语言，这种语言易于理解和编码。 将AM…...
.net core 线程锁，互斥锁，自旋锁，混合锁
线程锁、互斥锁、自旋锁和混合锁是多线程编程中的重要概念，它们用于控制对共享资源的访问，避免数据竞争和不一致性。每种锁有其特定的适用场景和特点。我们来逐一解释它们，并进行比较。 1. 线程锁（Thread Lock） 线程…...
大数据系列之：深入理解学习使用腾讯COS和COS Ranger权限体系解决方案，从hdfs同步数据到cos
大数据系列之：深入理解学习使用腾讯COS和COS Ranger权限体系解决方案，从hdfs同步数据到cos 对象存储COS对象存储基本概念COS Ranger权限体系解决方案部署组件COS Ranger Plugin部署COS-Ranger-Service部署COS Ranger Client部署 COSN 从hdfs同步数据到co…...
Uniapp Android 本地离线打包（详细流程）
一、简介 App 离线 SDK 暂时不支持 Kotlin，未来不清楚。 uniapp 提供了 云打包 与 本地打包 两种方案，云打包 需要排队且还有次数限制，本地打包 则就没有这些限制，而且会 本地打包 对开发 原生插件 有很大的帮助。 细节&#x…...
（IMX6ULL为例）)
单片机常用外设开发流程(1)（IMX6ULL为例）
1.通过GPIO引脚控制led灯和key按钮 （1）设置多路复用的引脚（SW_MUX_CTL）也可以说是选择让引脚以哪种工作模式工作 （2）设置电器属性（SW_PAD_CTL）上拉、等等... (3)设置GPIO的方向&am…...
机器学习 学习知识点
机器学习 学习知识点 什么是消融实验（Ablation experiment）？num_step与batch_size的区别python glob.glob()函数认识python的条件判断之is not、is not None、is Nonetqdm介绍及常用方法softmax 激活函数。type_as(tesnor)Python OpenCV cv2.…...
深入了解PINN：物理信息神经网络（Physics-Informed Neural Networks）
1. 什么是PINN（物理信息神经网络）？ 物理信息神经网络（PINN，Physics-Informed Neural Networks）是一类通过结合神经网络和物理方程的深度学习方法。其主要特点是将物理系统的约束条件（如偏微分方…...
人工智能知识分享第八天-机器学习_泰坦尼克生存预估线性回归和决策树回归对比案例
泰坦尼克生存预估案例 import pandas as pd from sklearn.model_selection import train_test_split from sklearn.tree import DecisionTreeClassifier from sklearn.metrics import classification_report import matplotlib.pyplot as plt from sklearn.tree import plot_t…...
封装/前线修饰符/Idea项目结构/package/impore
目录 1. 封装的情景引入 2. 封装的体现 3. 权限修饰符 4. Idea 项目结构 5. package 关键字 6. import 关键字 7. 练习 程序设计：高内聚，低耦合； 高内聚：将类的内部操作“隐藏”起来，不需要外界干涉；…...
python中的装饰器
装饰器（Decorator）是 Python 中的一种语法糖，它允许你修改或增强函数或类的行为。下面详细解释： 基本概念 装饰器本质上是一个函数，它接受一个函数作为参数，并返回一个新的函数： def my_decor…...
HTMLElement、customElements及元素拓展
文章目录 HTMLElement 与 customElementscustomElements.define() 方法说明HTML 元素方法拓展 HTMLElement 与 customElements HTMLElement 概述 HTMLElement是一个接口，它表示所有HTML元素。几乎所有的HTML标签（如<div>、<p>、<a>等…...
字玩FontPlayer开发笔记3 性能优化 大量canvas渲染卡顿问题
字玩FontPlayer开发笔记3 性能优化 大量canvas渲染卡顿问题 字玩FontPlayer是笔者开源的一款字体设计工具，使用Vue3 ElementUI开发，源代码： github: https://github.com/HiToysMaker/fontplayer gitee: https://gitee.com/toysmaker/fontpl…...
 函数详解与应用示例)
PyTorch 中 coalesce() 函数详解与应用示例
PyTorch 中 coalesce() 函数详解与应用示例 coalesce： 美 [ˌkoʊəˈlɛs] 合并；凝聚；联结，注意发音 引言 在 PyTorch 中，稀疏张量（Sparse Tensor）是一种高效存储和操作稀疏数据的方式。稀疏…...
计算机网络（第8版）第3章课后习题--透明传输
【3-11】 试分别讨论以下各种情况在什么条件下是透明传输，在什么条件下不是透明传 输。(提示：请弄清什么是“透明传输”,然后考虑能否满足其条件。) (1)普通的电话通信。 (2)互联网提供的电子邮件服务。 解 答 ： 透明传输是指在数据传输…...
JavaScript 日期格式
在 JavaScript 中，日期格式可以通过 Date 对象进行操作和格式化。下面是一些常见的 JavaScript 日期格式及其示例： 1. ISO 8601 格式 ISO 8601 是一种标准的日期和时间表示方法，格式为 YYYY-MM-DDTHH:mm:ss.sssZ，例如： let date = new Date(); console.log(date.toISOS…...
云打印之拼多多打印组件交互协议
拼多多打印组件交互协议相关介绍如下： 1、打印组件下载地址 http://meta.pinduoduo.com/api/one/app/v1/lateststable?appIdcom.xunmeng.pddprint&platformwindows&subTypemain 2、socket连接端口 如果是http的话，端口是5000 socket new …...
Oracle数据库如何找到 Top Hard Parsing SQL 语句？
有一个数据库应用程序存在过多的解析问题，因此需要找到产生大量硬解析的主要语句。 什么是硬解析 Oracle数据库中的硬解析（Hard Parse）是指在执行SQL语句时，数据库需要重新解析该SQL语句，并创建新的执行计划的过程。这…...
浅谈棋牌游戏开发流程二：后端技术选型与基础环境搭建
一、前言：客户端只是台前，后端才是幕后“指挥中心” 在上一篇“客户端技术”中，我们聊到玩家看到的一切动作、动画、界面逻辑，都靠客户端去渲染和交互。但若没有后端的支撑，玩家点了“出牌”可能就像一拳打在空气里—…...
使用qiankun搭建微前端应用及踩坑
线上演示地址：React App 源码地址：https://github.com/Jiang-K-J/micro-app?tabreadme-ov-file （帮忙点个小星星） 主应用：react 18 子应用：vite vue3 子应用：react 18 安装 主应用 $ y…...
Windows 环境配置 HTTPS 服务实战
一、 环境准备 win10以上操作系统安装 Certbot申请阿里云\腾讯云域名安装 nginx 1.3以上版本 二、Certbot 安装及 SSL 证书生成 Certbot 是一个免费、开源工具，用于自动化在Web服务器上获取和更新SSL/TLS证书。它可以通过Let’s Encrypt服务获取免费的SSL/TLS证书…...
小程序租赁系统开发的优势与应用前景分析
内容概要 小程序租赁系统是一种新兴的数字化解决方案，旨在为用户提供更加便捷与高效的租赁服务。它通常包括一系列功能，如在线浏览、即时预定、支付功能以及用户反馈机制。这些系统在使用上极为友好，让用户能够轻松选择所需的商品或服务&…...
Redis（基础篇 + 实践篇 ）
01 | 基本架构：一个键值数据库包含什么？ Redis 作为一个内存数据存储系统，它的架构设计非常简洁，但功能非常强大。理解其核心架构对高效使用 Redis 至关重要。 客户端与服务器架构： 客户端通过 TCP 协议连接到 Redis …...