当前位置： 首页 > article >正文

【ThreeJS Basics 1-3】Hello ThreeJS，实现第一个场景

article 2026/4/28 1:33:12

文章目录

  • 环境
  • 创建一个项目
  • 安装依赖
  • 基础 Web 页面
  • 概念解释
  • 编写代码
  • 运行项目

环境

我的环境是 node version 22

创建一个项目

首先，新建一个空的文件夹，然后 npm init -y , 此时会快速生成好默认的 package.json

安装依赖

在新建的项目下用 npm 安装依赖

  • npm install vite
  • npm install three

基础 Web 页面

在项目下新建 index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>First Three.js Project</title>
</head>
<body><canvas class="webgl"></canvas><script type="module" src="./script.js"></script>
</body>
</html>

概念解释

想要使用 ThreeJS 实现一些场景，以下的对象是必要的

  • A scene that will contain objects
  • Some objects
  • A camera
  • A renderer

大概的思路是

  1. 新建场景
  2. 新建一个立方体，把他加入场景
  3. 新建一个照相机，加入场景
  4. 创建渲染器，配置渲染尺寸，说明渲染那个场景，以及用那个摄像头渲染

以下就是在脚本中如何定义并使用这四种对象

编写代码

新建 script.js

import * as THREE from 'three'// Canvas
const canvas = document.querySelector('canvas.webgl')// Scene
const scene = new THREE.Scene()/*** Object*/
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 })
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)/*** Sizes*/
const sizes = {width: 800,height: 600
}/*** Camera*/
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height)
camera.position.z = 3
scene.add(camera)/*** Renderer*/
const renderer = new THREE.WebGLRenderer({canvas: canvas
})
renderer.setSize(sizes.width, sizes.height)
renderer.render(scene, camera)

运行项目

通过 npm run dev 跑起来看一看

在这里插入图片描述
也许你会觉得它并不像个空间上的物体，这是因为，我们的照相机跟物体是水平的

所有的元素，添加到场景时候，位置坐标都是 ( 0，0，0 )

我们修改一下材质 wireframe

const material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true })

你就会得到如下的画面

在这里插入图片描述

相关文章：

【ThreeJS Basics 1-3】Hello ThreeJS，实现第一个场景

文章目录 环境创建一个项目安装依赖基础 Web 页面概念解释编写代码运行项目 环境 我的环境是 node version 22 创建一个项目 首先&#xff0c;新建一个空的文件夹&#xff0c;然后 npm init -y , 此时会快速生成好默认的 package.json 安装依赖 在新建的项目下用 npm 安装依…...

编程日记 2026/4/11 21:23:08

银行国际结算

银行国结项目&#xff0c;即国际结算项目&#xff0c;是银行业务中的重要组成部分&#xff0c;它涉及跨国界的货币收付和资金转移。 一、银行国结项目的定义 银行国结项目是指银行为国际贸易、投资等活动提供的国际结算服务&#xff0c;包括各种国际支付和资金清算业务。这些…...

编程日记 2026/4/24 21:38:12

Go语言构建微服务：从入门到实战

引言 在云原生时代&#xff0c;微服务架构已成为构建复杂分布式系统的首选方案。Go语言凭借其卓越的并发支持、简洁的语法和高效的运行时&#xff0c;成为微服务开发的利器。本文将深入探讨如何用Go构建健壮的微服务系统&#xff0c;并通过完整案例演示关键实现细节。 一、微…...

编程日记 2026/4/21 20:20:20

深入理解动态代理

为什么需要动态代理 对于代码的增强逻辑我们是清楚具体实现的，一种方式是增强逻辑作为委托类，被其他业务类调用， 这样会有很多重复代码，而且，当需要根据动态参数来决定增强逻辑时，重复代码会更多，逻辑会更不清晰 二，也是动态代理产生的原始需求，解决类爆照问题， 所以…...

编程日记 2026/4/23 14:13:50

私有属性和方法（python）

一、私有属性&#xff08;属性名前面加两个短下划线&#xff09; &#xff08;一&#xff09;私有属性与公有属性区别 公有属性&#xff1a;在类里面和外面均可以访问和修改 私有属性&#xff1a;需要用set方法才能修改&#xff0c;get方法才能访问 &#xff08;二&#xf…...

编程日记 2025/7/2 20:19:24

Cherry Studio之DeepSeek联网/本地，建属于自己的AI助理！

上一篇文章&#xff0c;讲了DeepSeek-R1部署到本地的方法。这一篇文章&#xff0c;我们让DeepSeek再一次升级&#xff0c;通过图形化界面来交互&#xff0c;从而变成我们的AI助理&#xff0c;让DeepSeek R1发挥最大实力&#xff01; 首选需要借助硅基流动的API接口&#xff0c…...

编程日记 2026/4/11 23:01:34

TcpClientTest

ClientTest&#xff1a; using System; using System.Net.Sockets; using System.Text;class TcpClientTest {static void Main(string[] args){try{// 创建一个TcpClient实例并连接到服务器 TcpClient client new TcpClient("1vg5062570.51mypc.cn", 43319);//1v…...

编程日记 2026/2/17 12:50:58

IGBT的两级关断

IGBT&#xff08;绝缘栅双极型晶体管&#xff09;的两级关断&#xff08;Two-stage turn-off&#xff09;是一种优化关断过程的方法&#xff0c;主要用于减少关断时的电压过冲和dv/dt&#xff08;电压变化率&#xff09;过高的问题&#xff0c;特别是在大功率应用中&#xff08…...

编程日记 2026/4/26 21:02:44

【STM32】ADC

本次实现的是ADC实现数字信号与模拟信号的转化&#xff0c;数字信号时不连续的&#xff0c;模拟信号是连续的。 1.ADC转化的原理 模拟-数字转换技术使用的是逐次逼近法&#xff0c;使用二分比较的方法来确定电压值 当单片机对应的参考电压为3.3v时&#xff0c;0~ 3.3v(模拟信号…...

编程日记 2026/4/11 23:56:23

从MyBatis-Plus看Spring Boot自动配置原理

一、问题引入&#xff1a;神秘的配置生效之谜 当我们使用MyBatis-Plus时&#xff0c;只需在pom.xml中添加依赖&#xff1a; <dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3…...

编程日记 2026/2/27 5:28:49

0基础租个硬件玩deepseek,蓝耘元生代智算云|本地部署DeepSeek R1模型

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享一篇文章&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f495; 目录 0基础…...

编程日记 2026/4/25 22:58:47

雪花算法应用

什么是雪花算法&#xff1f; 雪花算法是由 Twitter 开源的分布式 ID 生成算法&#xff0c;用于生成 64 位的长整型唯一 ID。其结构如下&#xff1a; - 1 位符号位&#xff1a;始终为 0 - 41 位时间戳&#xff1a;精确到毫秒 - 10 位工作机器 ID&#xff1a;包含 5 位数据中心 …...

编程日记 2026/3/25 1:34:28

Chapter3：结构化程序设计

参考书籍&#xff1a;《C#边做边学》&#xff1b; 3.结构化程序设计 3.1 结构化程序设计的3种基本结构 顺序结构&#xff1a;先执行 A {\rm A} A语句&#xff0c;再执行 B {\rm B} B语句&#xff0c;两者是顺序执行的关系&#xff1b; 选择结构&#xff1a;根据所定选择条件为…...

编程日记 2026/4/25 16:40:08

白话文实战Nacos（保姆级教程）

前言 上一篇博客 我们创建好了微服务项目，本篇博客来体验一下Nacos作为注册中心和配置中心的功能。 注册中心 如果我们启动了一个Nacos注册中心，那么微服务比如订单服务，启动后就可以连上注册中心把自己注册上去，这过程就是服务注册。每个微服务，比如商品服务都应该注册…...

编程日记 2026/4/11 23:11:59

c语言函数学习

C语言函数学习笔记&#xff1a;从入门到实践 一、什么是函数&#xff1f; 函数是C语言中用于封装特定功能的代码块&#xff0c;是模块化编程的核心。通过函数可以实现&#xff1a; 代码复用&#xff1a;避免重复编写相同逻辑 逻辑清晰&#xff1a;将复杂程序分解为多个小模块…...

编程日记 2025/5/25 4:24:32

linux利用nfs服务器，实现数据和windows环境拷贝

1. 在Linux上设置NFS服务器 1.1 安装NFS服务器软件 首先&#xff0c;你需要在Linux服务器上安装NFS服务器软件。假设你使用的是基于Debian的系统&#xff08;如Ubuntu&#xff09;&#xff0c;可以按照以下步骤操作&#xff1a; sudo apt update sudo apt install nfs-kerne…...

编程日记 2026/3/28 6:54:36

智能理解 PPT 内容，快速生成讲解视频

当我们想根据一版 PPT 制作出相对应的解锁视频时&#xff0c;从撰写解锁词&#xff0c;录制音频到剪辑视频&#xff0c;每一个环节都需要投入大量的时间和精力&#xff0c;本方案将依托于阿里云函数计算 FC 和百炼模型服务&#xff0c;实现从 PPT 到视频的全自动转换&#xff0…...

编程日记 2026/4/26 11:35:44

FFmpeg + OpenGL ES 美颜相机教程大纲

做OpenGL和FFmpeg也有很长一段时间了&#xff0c;最近打算结合FFmpegOpenGL ES做一期视频教程&#xff0c;下面是完整视频教程大纲。最终的项目实战效果是实现一款美颜相机。教程分为理论讲解和实战开发两部分&#xff0c;适合有一定编程基础的开发者。课程计划是免费发布在B站…...

编程日记 2025/10/12 23:33:25

IEC61850标准下的数据和数据模型服务的详细介绍

目录 一、摘要 二、概述 三、详细介绍 1、读服务器目录(GetServerDirectory) 2、读逻辑设备目录(GetLogicalDeviceDirectory) 3、读逻辑节点目录(GetLogicalNodeDirectory) 4、读全部数据值(GetAllDataValues) 5、读数据值(GetDataValues) 6、设置数据值(SetDataValues…...

编程日记 2026/4/26 21:18:42

【3.Git与Github的历史和区别】

目录 Git的历史和Github的区别本质和功能 Git的历史和Github的区别 Git是由Linux内核的创造者Linus Torvalds于2005年创建的。当时&#xff0c;Linux内核开源项目使用BitKeeper作为版本控制系统&#xff0c;但2005年BitKeeper的商业公司终止了与Linux社区的合作&#xff0c;收…...

编程日记 2026/2/17 17:10:07

前端页面添加水印

前端页面添加水印 主要功能说明&#xff1a; 这是一个用于添加页面水印的工具函数水印会以半透明的形式显示在页面上&#xff0c;并且会重复平铺水印文字会有-15度的倾斜角度水印会覆盖整个页面&#xff0c;但不会影响页面的正常交互每次调用函数时会先删除已存在的水印&…...

编程日记 2025/11/5 22:17:57

Left side cannot be assigned to

Delphi XE E2064 Left side cannot be assigned to 错误解决方法-CSDN博客 Delphi XE E2064 Left side cannot be assigned to 错误解决方法 1. 起源 此问题源于[秋风人事档案管理系统]用Delphi XE重编译中所发现。 快十年了&#xff0c;当初Delphi 7所编写项目&#xff0c…...

编程日记 2025/11/18 14:37:47

R语言LCMM多维度潜在类别模型流行病学研究：LCA、MM方法分析纵向数据

全文代码数据&#xff1a;https://tecdat.cn/?p39710 在数据分析领域&#xff0c;当我们面对一组数据时&#xff0c;通常会有已知的分组情况&#xff0c;比如不同的治疗组、性别组或种族组等&#xff08;点击文末“阅读原文”获取完整代码数据&#xff09;。 然而&#xff0c;…...

编程日记 2026/4/26 0:41:34

伺服使能的含义解析

前言&#xff1a; 大家好&#xff0c;我是上位机马工&#xff0c;硕士毕业4年年入40万&#xff0c;目前在一家自动化公司担任软件经理&#xff0c;从事C#上位机软件开发8年以上&#xff01;我们在开发C#的运动控制程序的时候&#xff0c;一个必要的步骤就是对伺服上使能&#…...

编程日记 2026/4/20 9:53:25

ModuleJS 与 CommonJS 混用的两种解决方案

目录 方案一 方案二 统一使用 ModuleJS 统一使用CommonJS 方案一 使用构建工具&#xff0c;webpack、vite等系列构建工具。这些构建工具底层则会将两种不同的系统模块语言转为同一种语言&#xff0c;然后代码也能正常执行。 方案二 如果你可以修改文件的文件后缀&#xf…...

编程日记 2026/4/22 10:15:07

5. 【.NET 8 实战--孢子记账--从单体到微服务--转向微服务】--微服务基础工具与技术--Nacos

一、什么是Nacos Nacos 是阿里巴巴开源的一款云原生应用基础设施&#xff0c;它旨在简化微服务架构中服务治理和配置管理的复杂性。通过 Nacos&#xff0c;服务在启动时可以自动注册&#xff0c;而其他服务则可以通过名称来查找并访问这些注册好的实例。同时&#xff0c;Nacos…...

编程日记 2026/4/11 23:08:53

VUE项目中实现权限控制，菜单权限，按钮权限，接口权限，路由权限，操作权限，数据权限实现

VUE项目中实现权限控制&#xff0c;菜单权限&#xff0c;按钮权限&#xff0c;接口权限&#xff0c;路由权限&#xff0c;操作权限&#xff0c;数据权限实现 权限系统分类&#xff08;RBAC&#xff09;引言菜单权限按钮权限接口权限路由权限 菜单权限方案方案一&#xff1a;菜单…...

编程日记 2026/4/13 9:21:07

网站的记住我功能与用户登录持久化

1.先决条件&#xff1a;拿到了后端发的凭证并做了持久化储存 2.在1的基础上&#xff0c;加上一个记住我功能&#xff0c;记住我的体现暂时定为&#xff1a; a.不勾选记住我&#xff1a;在浏览器的对话窗不关闭的情况下&#xff0c;凭证是存在有效的&#xff0c;但关闭了对话框…...

编程日记 2026/1/4 11:27:30

SQL自学，mysql从入门到精通 --- 第 15天，数据导入、导出

数据的导入、导出 -- 查看当前设置的目录路径&#xff0c;限制从数据库服务器读取和写入文件的操作只能在指定的目录中进行,在安全性和文件操作限制方面具有重要意义。rootmysqldb 14:19: [(none)]> SHOW VARIABLES LIKE "secure_file_priv"; -----------------…...

编程日记 2026/2/23 0:47:19

android skia渲染介绍

Android AOSP 的渲染系统主要使用 Skia 图形库。Skia 是一个开源的 2D 图形库&#xff0c;它被广泛应用于 Android 的图形渲染中&#xff0c;负责绘制 UI 元素、文本、图像以及其他 2D 图形内容。 以下是 Android AOSP 中 Skia 的作用和它在渲染系统中的位置&#xff1a; 1. 什…...

编程日记 2025/11/5 21:27:11