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

three.js(一)

news 2025/12/13 11:40:09

文章目录

three.js环境搭建
- 正文
- 补充
示例
==效果==
知识点补充1:一个标准的html
知识点补充2:原生的前端框架和Vue框架的区别
- 原生的前端框架
- Vue框架
- - 声明式编程和响应式编程

three.js环境搭建

正文

搭建 Three.js 的环境通常包括以下几个步骤：

1.创建项目目录：创建一个新的项目目录，用于存放你的 Three.js 代码和相关文件。

mkdir my-threejs-project
cd my-threejs-project

2.初始化项目：使用 npm init 初始化项目，生成 package.json 文件。

npm init -y

3.安装 Three.js：使用 npm 安装 Three.js。

npm install three

这将会安装 Three.js 库，并在 node_modules 目录下创建相应的文件。

4.创建 HTML 文件：在项目目录中创建一个 HTML 文件，用于加载 Three.js 库和展示你的 Three.js 场景。

index.html:

请看`示例`部分

5.运行项目：使用任意的本地服务器工具（比如 http-server 或 live-server）在浏览器中运行你的项目。如果你使用了 http-server，可以通过以下步骤安装并运行：

npm install -g http-server
http-server   (在有index.html的目录下执行 , eg: cd /path/to/your/project  &&   http-server)

打开浏览器访问 http://localhost:8080 （或其他端口，具体取决于你的本地服务器设置），你应该能够看到 Three.js 场景。

这样，你就成功搭建了一个简单的 Three.js 环境.

补充

上述步骤似乎未能成功安装

在这里插入图片描述

你最好是到这个three目录下执行一下npm install

然后,有报错,说咱们的node版本太低了

Unsupported engine {
npm WARN EBADENGINE   package: 'minipass@7.0.4',
npm WARN EBADENGINE   required: { node: '>=16 || 14 >=14.17' },
npm WARN EBADENGINE   current: { node: 'v12.22.9', npm: '8.5.1' }
npm WARN EBADENGINE }

示例

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>Three.js 交互示例</title><style>body {margin: 0;}canvas {display: block;}</style>
</head><body><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script><script>// 设置场景、相机和渲染器const scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);const renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 监听窗口大小变化事件window.addEventListener('resize', function () {var width = window.innerWidth;var height = window.innerHeight;// 更新渲染器大小renderer.setSize(width, height);// 更新相机的宽高比camera.aspect = width / height;// 更新相机的投影矩阵camera.updateProjectionMatrix();});// 创建一个立方体const geometry = new THREE.BoxGeometry();const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });const cube = new THREE.Mesh(geometry, material);scene.add(cube);camera.position.z = 5;// 鼠标交互let isDragging = false;let previousMousePosition = {x: 0,y: 0};function onDocumentMouseDown(event) {isDragging = true;}function onDocumentMouseMove(event) {if (isDragging) {var deltaMove = {x: event.clientX - previousMousePosition.x,y: event.clientY - previousMousePosition.y};const deltaRotationQuaternion = new THREE.Quaternion().setFromEuler(new THREE.Euler(toRadians(deltaMove.y * 1),toRadians(deltaMove.x * 1),0,'XYZ'));cube.quaternion.multiplyQuaternions(deltaRotationQuaternion, cube.quaternion);}previousMousePosition = {x: event.clientX,y: event.clientY};}function onDocumentMouseUp(event) {isDragging = false;}// 将鼠标事件监听器添加到渲染器的DOM元素renderer.domElement.addEventListener('mousedown', onDocumentMouseDown, false);renderer.domElement.addEventListener('mousemove', onDocumentMouseMove, false);renderer.domElement.addEventListener('mouseup', onDocumentMouseUp, false);// 动画循环渲染function animate() {requestAnimationFrame(animate);// 如果没有鼠标交互，立方体会自动旋转if (!isDragging) {cube.rotation.x += 0.01;cube.rotation.y += 0.01;}renderer.render(scene, camera);}animate(); // 开始动画循环// 辅助函数：将角度转换为弧度function toRadians(angle) {return angle * (Math.PI / 180);}</script>
</body></html>

这个例子展示了使用Three.js创建一个基本的3D交互场景的几个关键元素：

场景 (Scene): const scene = new THREE.Scene(); 创建了一个新的场景，这是所有物体和光源的容器。
相机 (Camera): const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); 创建了一个透视相机，它决定了哪些内容会被渲染到屏幕上。
渲染器 (Renderer): const renderer = new THREE.WebGLRenderer(); 创建了一个WebGL渲染器，它能够将场景和相机渲染到一个<canvas>元素上。
几何体 (Geometry): const geometry = new THREE.BoxGeometry(); 定义了一个立方体的形状。
材质 (Material): const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); 创建了一个材质，定义了立方体的颜色。
网格 (Mesh): const cube = new THREE.Mesh(geometry, material); 网格是几何体和材质的组合，可以被添加到场景中。
动画 (Animation): function animate() {...} 定义了一个动画循环，用于在没有鼠标交互时自动旋转立方体。
交互 (Interaction): 通过监听鼠标事件（mousedown, mousemove, mouseup），允许用户拖动来旋转立方体。
辅助函数 (Utility Function): function toRadians(angle) {...} 将角度转换为弧度，用于旋转计算。

这个例子涵盖了Three.js中创建基本3D场景和交互的核心概念

在这里插入图片描述
图片看不清,可以点这里

效果

查看效果:

http://ip地址:端口号/index.html

你需要在index.html的同级目录下执行nohup http-server &

知识点补充1:一个标准的html

一个标准的html是什么样的?(集成了html,js,css于一个文件.)

<!DOCTYPE html>
<html>
<head><title>我的网页</title><style>body {background-color: #f0f0f0;font-family: Arial, sans-serif;}h1 {color: #333;}#demo {color: blue;font-size: 20px;}</style>
</head>
<body><h1>欢迎来到我的网页</h1><p id="demo">这是一个段落。</p ><script>document.getElementById("demo").innerHTML = "Hello, CSS and JavaScript!";</script>
</body>
</html>

在这个例子中，<style> 标签包含了 CSS 代码，
它定义了网页的背景颜色、字体和其他样式属性。(通常位于<head>部分).JavaScript 代码会被放在 <script> 标签内，
这些 <script> 标签可以位于 HTML 文件的 <head> 部分或 <body> 部分。
这样做可以确保在加载页面时，JavaScript 代码能够被正确执行。

知识点补充2:原生的前端框架和Vue框架的区别

以前用过Vue,但是一直没搞懂具体的区别,现在再看一下:

原生的前端框架

<!DOCTYPE html>
<html>
<head><title>计数器示例</title><style>#counter {font-size: 24px;margin: 20px;}</style>
</head>
<body><div id="counter">0</div><button onclick="increment()">增加</button><script>var count = 0;function increment() {count++;document.getElementById('counter').innerText = count;}</script>
</body>
</html>

该例子实现了一个简单的计数器，用户点击按钮时数字会增加。JavaScript用于处理点击事件和更新DOM。

Vue框架

<!DOCTYPE html>
<html>
<head><title>Vue 计数器示例</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body><div id="app"><div>{{ count }}</div><button @click="count++">增加</button></div><script>new Vue({el: '#app',data: {count: 0}});</script>
</body>
</html>

在这个Vue的例子中，使用了Vue实例来管理数据和事件处理。{{ count }}是一个模板表达式，它会自动更新显示计数器的值。@click是一个指令，它告诉Vue在按钮被点击时执行count++操作。Vue会自动处理依赖追踪和DOM更新，使得代码更简洁和高效。

声明式编程和响应式编程

其实和c语言一样,

声明式编程关注"做什么"而不是"怎么做".

响应式编程,你可以暂时简单的理解为声明式编程的实现.

three.js(一)

文章目录 three.js环境搭建正文补充示例效果知识点补充1:一个标准的html知识点补充2:原生的前端框架和Vue框架的区别原生的前端框架Vue框架声明式编程和响应式编程 three.js环境搭建正文搭建 Three.js 的环境通常包括以下几个步骤： 1.创建项目目录&#xff1a…...

编程日记 2023/12/17 18:48:07

Python基础入门：语法与数据类型

Python基础入门：语法与数据类型一、引言 Python是一种简单易学、功能强大的编程语言，广泛应用于数据分析、机器学习、Web开发等领域。本文将介绍Python的基础语法和数据类型，帮助初学者快速入门。二、Python基础语法缩进 Python中的缩…...

编程日记 2023/12/17 18:46:05

@Scheduled任务调度/定时任务-非分布式

1、功能概述任务调度就是在规定的时间内执行的任务或者按照固定的频率执行的任务。是非常常见的功能之一。常见的有JDK原生的Timer, ScheduledThreadPoolExecutor以及springboot提供的Schduled。分布式调度框架如QuartZ、Elasticjob、XXL-JOB、SchedulerX、PowerJob等。本文…...

编程日记 2023/12/17 18:45:04

【ARM Trace32(劳特巴赫) 使用介绍 14 -- Go.direct 介绍】

请阅读【Trace32 ARM 专栏导读】文章目录 Trace32 Go.directGo配合程序断点使用Go 配合读写断点使用Go 快速回到上一层函数 System.Mode Go Trace32 Go.direct TRACE32调试过程中，会经常对芯片/内核进行控制，比如全速运行、暂停、单步等等。这篇文章先…...

编程日记 2023/12/17 18:43:03

第二十章： Spring Boot 集成RabbitMQ（四）

第二十章： Spring Boot 集成RabbitMQ（四）前言本章知识点：死信队列的定义、场景、作用以及原理、TTL方法的使用以及演示代码示例。 Springboot 版本 2.3.2.RELEASE ，RabbitMQ 3.9.11，Erlang 24.2死信队列定义：什么是死信队列？在RabbitMQ中，并没有提供真正意义…...

编程日记 2023/12/17 18:40:00

防止反编译，保护你的SpringBoot项目

ClassFinal-maven-plugin插件是一个用于加密Java字节码的工具，它能够保护你的Spring Boot项目中的源代码和配置文件不被非法获取或篡改。下面是如何使用这个插件来加密test.jar包的详细步骤： 安装并设置Maven： 首先确保你已经在你的开发环境中…...

编程日记 2023/12/17 18:38:59

OpenCV开发：MacOS源码编译opencv，生成支持java、python、c++各版本依赖库

OpenCV（Open Source Computer Vision Library）是一个开源的计算机视觉和机器学习软件库。它为开发者提供了丰富的工具和函数，用于处理图像和视频数据，以及执行各种计算机视觉任务。以下是 OpenCV 的一些主要特点和功能&#xff…...

编程日记 2023/12/17 18:37:58

【数据库设计和SQL基础语法】--查询数据--分组查询

一、分组查询概述 1.1 什么是分组查询分组查询是一种 SQL 查询技术，通过使用 GROUP BY 子句，将具有相同值的数据行分组在一起，然后对每个组应用聚合函数（如 COUNT、SUM、AVG等）。这允许在数据集中执行汇总和统计操作…...

编程日记 2023/12/17 18:35:56

使用对象处理流ObjectOutputStream读写文件

注意事项: 1.创建的对象必须实现序列化接口,如果属性也是类，那么对应的类也要序列化 2.读写文件路径问题 3.演示一个例子 （1）操作的实体类FileModel，实体类中有Map,HashMap这些自带的本身就实现了序列化。 public class File…...

编程日记 2023/12/17 18:34:55

【高级网络程序设计】Block1总结

这一个Block分为四个部分，第一部分是Introduction to Threads and Concurrency ，第二部分是Interruptting and Terminating a Thread，第三部分是Keep Threads safety：the volatile variable and locks，第四部分是Beyon…...

编程日记 2023/12/17 18:32:52

linux下查看进程资源ulimit

ulimit介绍与使用 ulimit命令用于查看和修改进程的资源限制。下面是ulimit命令的使用方法： 查看当前资源限制： ulimit -a 这将显示当前进程的所有资源限制，包括软限制和硬限制。查看或设置单个资源限制： ulimit -<option> …...

编程日记 2023/12/17 18:31:52

C++ I/O操作---输入输出

本文主要介绍C I/O操作中的输入输出流。目录 1 输入输出 2 输入输出流分类 3 C中的输入输出流 4 iostream 5 std::ofstream 6 std::fstream 7 std::getline 1 输入输出 C的输入输出是数据在不同设备之间的传输，即在硬盘、内存和外设之间的传输。数据如水流…...

编程日记 2023/12/17 18:29:50

会 C# 应该怎么学习 C++？

会 C# 应该怎么学习 C？ 在开始前我有一些资料，是我根据自己从业十年经验，熬夜搞了几个通宵，精心整理了一份「C的资料从专业入门到高级教程工具包」，点个关注，全部无偿共享给大家！！&a…...

编程日记 2023/12/17 18:24:45

CentOS 7 部署frp穿透内网

本文将介绍如何在CentOS 7.9上部署frp，并通过示例展示如何配置和测试内网穿透。文章目录 （1）引言（2）准备工作（4）frps服务器端配置（5）frpc客户端配置（6&#…...

编程日记 2023/12/17 18:23:44

高效网络爬虫：代理IP的应用与实践

💂 个人网站:【海拥】【神级代码资源网站】【办公神器】🤟 基于Web端打造的：👉轻量化工具创作平台🤟 代理 IP 推荐：👉品易 HTTP 代理 IP 💅 想寻找共同学习交流的小伙伴&#xff0c…...

编程日记 2023/12/17 18:21:42

java设计模式-工厂方法模式

1.工厂方法(FactoryMethod)模式的定义定义一个创建产品对象的工厂接口，将产品对象的实际创建工作推迟到具体子工厂类当中。这满足创建型模式中所要求的“创建与使用相分离”的特点。 2.工厂方法模式的主要优缺点优点： 用户只需要知道具体工厂的名称…...

编程日记 2023/12/17 18:20:41

Python实验项目9 ：网络爬虫与自动化

实验 1：爬取网页中的数据。要求：使用 urllib 库和 requests 库分别爬取 http://www.sohu.com 首页的前 360 个字节的数据。 # 要求：使用 urllib 库和 requests 库分别爬取 http://www.sohu.com 首页的前 360 个字节的数据。 import urllib.r…...

编程日记 2023/12/17 18:19:40

实验三:指令调度和延迟分支

一、实验目的加深对指令调度技术的理解。加深对延迟分支技术的理解。熟练掌握用指令调度技术来解决流水线中的数据冲突的方法。进一步理解指令调度技术对CPU性能的改进。进一步理解延迟分支技术对CPU性能的改进。二、实验内容和步骤首先要掌握MIPSsim模拟器的使用方法。见…...

编程日记 2023/12/17 18:16:37

【Oracle】PL/SQL语法、存储过程，触发器

一、Oracle数据类型 Orcle数据类型说明类比MySQL数据类型字符型CHAR固定长度的字符类型CHAR字符型VARCHAR2可变长度的字符类型VARCHAR字符型LONG大文本类型，最大2G数值型NUMBER数值类型，整数小数都可以，number(5)表示长度5的整数&#xff0c…...

编程日记 2023/12/17 18:15:37

2020年第九届数学建模国际赛小美赛C题亚马逊野火解题全过程文档及程序

2020年第九届数学建模国际赛小美赛 C题亚马逊野火原题再现： 野火是指发生在乡村或荒野地区的可燃植被中的任何不受控制的火灾。这样的环境过程对人类生活有着重大的影响。因此，对这一现象进行建模，特别是对其空间发生和扩展进行建模&…...

编程日记 2023/12/17 18:13:35

龙虎榜——20250610

上证指数放量收阴线，个股多数下跌，盘中受消息影响大幅波动。深证指数放量收阴线形成顶分型，指数短线有调整的需求，大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技代表标的：御银股份、雄帝科技驱动…...

编程新知 2025/12/13 6:01:30

Python爬虫实战：研究feedparser库相关技术

1. 引言 1.1 研究背景与意义在当今信息爆炸的时代，互联网上存在着海量的信息资源。RSS（Really Simple Syndication）作为一种标准化的信息聚合技术，被广泛用于网站内容的发布和订阅。通过 RSS，用户可以方便地获取网站更新的内容，而无需频繁访问各个网站。然而，互联网…...

编程新知 2025/8/18 9:54:31

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统基于LangGraph的PPT自动生成系统，可以将Markdown文档自动转换为PPT演示文稿。功能特点 Markdown解析：自动解析Markdown文档结构PPT模板分析：分析PPT模板的布局和风格智能布局决策：匹配内容与合适的PPT布局自动…...

编程新知 2025/12/9 2:35:46

Python爬虫（二）：爬虫完整流程

爬虫完整流程详解（7大核心步骤实战技巧） 一、爬虫完整工作流程以下是爬虫开发的完整流程，我将结合具体技术点和实战经验展开说明： 1. 目标分析与前期准备网站技术分析： 使用浏览器开发者工具（F12&…...

编程新知 2025/10/19 5:48:51

CRMEB 框架中 PHP 上传扩展开发：涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展扩展入口文件文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

编程新知 2025/11/12 7:08:59

ios苹果系统，js 滑动屏幕、锚定无效

现象：window.addEventListener监听touch无效，划不动屏幕，但是代码逻辑都有执行到。 scrollIntoView也无效。原因：这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作，从而会影响…...

编程新知 2025/12/4 2:37:03

聊一聊接口测试的意义有哪些？

目录一、隔离性 & 早期测试二、保障系统集成质量三、验证业务逻辑的核心层四、提升测试效率与覆盖度五、系统稳定性的守护者六、驱动团队协作与契约管理七、性能与扩展性的前置评估八、持续交付的核心支撑接口测试的意义可以从四个维度展开，首…...

编程新知 2025/10/14 6:46:13

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中，常常会遇到跨域请求接口的情况。为了解决这个问题，Vite 和 Webpack 都提供了 proxy 代理功能，用于将本地开发请求转发到后端服务器。什么是代理（proxy）？代理是在开发过程中，前端项目通过开发服务器，将指定的请求“转发”到真实的后端服务器，从而绕…...

编程新知 2025/10/27 20:33:34

短视频矩阵系统文案创作功能开发实践，定制化开发

在短视频行业迅猛发展的当下，企业和个人创作者为了扩大影响力、提升传播效果，纷纷采用短视频矩阵运营策略，同时管理多个平台、多个账号的内容发布。然而，频繁的文案创作需求让运营者疲于应对，如何高效产出高质量文案成…...

编程新知 2025/12/13 7:32:33

QT3D学习笔记——圆台、圆锥

类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体（对象或容器）QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质（定义颜色、反光等）QFirstPersonC…...

编程新知 2025/9/22 1:53:57