three.js(一)

文章目录

  • 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交互场景的几个关键元素：

  1. 场景 (Scene): const scene = new THREE.Scene(); 创建了一个新的场景，这是所有物体和光源的容器。

  2. 相机 (Camera): const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); 创建了一个透视相机，它决定了哪些内容会被渲染到屏幕上。

  3. 渲染器 (Renderer): const renderer = new THREE.WebGLRenderer(); 创建了一个WebGL渲染器，它能够将场景和相机渲染到一个<canvas>元素上。

  4. 几何体 (Geometry): const geometry = new THREE.BoxGeometry(); 定义了一个立方体的形状。

  5. 材质 (Material): const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); 创建了一个材质，定义了立方体的颜色。

  6. 网格 (Mesh): const cube = new THREE.Mesh(geometry, material); 网格是几何体和材质的组合，可以被添加到场景中。

  7. 动画 (Animation): function animate() {...} 定义了一个动画循环，用于在没有鼠标交互时自动旋转立方体。

  8. 交互 (Interaction): 通过监听鼠标事件（mousedown, mousemove, mouseup），允许用户拖动来旋转立方体。

  9. 辅助函数 (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语言一样,

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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/242717.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Linux的基本指令和权限的知识

Linux的基本指令和权限的知识

学前的建议&#xff1a;大家不要太关注指令是啥&#xff0c;记不住怎么办&#xff08;没事&#xff0c;想用时去查就好了&#xff09;&#xff0c;这篇文章重点部分是围绕指令的周边知识。毕竟指令是“死肌肉”&#xff0c;而一些关于Linux和操作系统的理论知识才是最重要滴&am…
阅读更多...
懒惰的数独——lodash的shuffle方法实现随机打乱的效果

懒惰的数独——lodash的shuffle方法实现随机打乱的效果

1.效果 2.代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title></title><script src"https://cdn.jsdelivr.net/npm/vue2.5.17/dist/vue.js"></script><script src&q…
阅读更多...
Unity_FairyGUI发布导入Unity编辑器资源报错

Unity_FairyGUI发布导入Unity编辑器资源报错

Unity_FairyGUI发布导入Unity编辑器资源报错 报错&#xff1a; FairyGUI: settings for Assets/UI/XMUI/XMSubway_atlas0.png is wrong! Correct values are: (Generate Mip Mapsunchecked) UnityEngine.Debug:LogWarning (object) FairyGUI.UIPackage:LoadAtlas (FairyGUI.P…
阅读更多...
用于 ChatGPT 的 FPGA 加速大型语言模型

用于 ChatGPT 的 FPGA 加速大型语言模型

简介&#xff1a;大型语言模型 近年来&#xff0c;大型语言模型 &#xff08;LLM&#xff09; 彻底改变了自然语言处理领域&#xff0c;使机器能够生成类似人类的文本并进行有意义的对话。这些模型&#xff0c;例如 OpenAI 的 GPT&#xff0c;具有惊人的理解和生成语言的能力。…
阅读更多...
Stable Video Diffusion: Scaling Latent Video Diffusion Models to Large Datasets

Stable Video Diffusion: Scaling Latent Video Diffusion Models to Large Datasets

Stable video diffusion&#xff1a;将潜在视频扩散模型扩展到大型数据集 可以做到&#xff1a;文本-视频的生成、&#xff08;文本-&#xff09;图像-视频的生成、通过图像-视频微调进行多视图合成 摘要 我们提出了Stable video diffusion——一种用于高分辨率、最先进的文…
阅读更多...
re:Invent 云端历程：Swami Sivasubramanian 博士主题演讲-数据共生与开放

re:Invent 云端历程：Swami Sivasubramanian 博士主题演讲-数据共生与开放

re:Invent 云端历程&#xff1a;Swami Sivasubramanian 博士主题演讲-数据共生与开放 亚马逊云科技 re:Invent 大会简介 亚马逊云科技 re:Invent 是亚马逊云科技为全球云计算社区举办的学习大会。是云计算领域的行业风向标&#xff0c;科技界的全球年度重磅盛会。 亚马逊云科…
阅读更多...
Sketch for Mac：实现你的创意绘图梦想的矢量绘图软件

Sketch for Mac：实现你的创意绘图梦想的矢量绘图软件

随着数字时代的到来&#xff0c;矢量绘图软件成为了广告设计、插画创作和UI设计等领域中必不可少的工具。在众多矢量绘图软件中&#xff0c;Sketch for Mac&#xff08;矢量绘图软件&#xff09;以其强大的功能和简洁的界面脱颖而出&#xff0c;成为了众多设计师的首选。 Sket…
阅读更多...
Json数据报文解析-Gson库-JsonObject类-JsonParse类-JsonArray类

Json数据报文解析-Gson库-JsonObject类-JsonParse类-JsonArray类

一、前言 本文我们将介绍如何解析Json数据&#xff0c;主要通过Gson库中的相关类来实现。 二、详细步骤 首先&#xff0c;我们要拿到一个基础的Json数据&#xff0c;这里将以下面的Json数据作为示例&#xff1a; {"code":"1","msg":"ok&q…
阅读更多...
***Cpolar配置外网访问和Dashy

***Cpolar配置外网访问和Dashy

Dashy是一个开源的自托管的导航页配置服务，具有易于使用的可视化编辑器、状态检查、小工具和主题等功能。你可以将自己常用的一些网站聚合起来放在一起，形成自己的导航页。一款功能超强大，颜值爆表的可定制专属导航页工具 结合cpolar内网工具,我们实现无需部署到公网服务器…
阅读更多...
大数据机器学习与深度学习——回归模型评估

大数据机器学习与深度学习——回归模型评估

大数据机器学习与深度学习——回归模型评估 回归模型的性能的评价指标主要有&#xff1a;MAE(平均绝对误差)、MSE(平均平方误差)、RMSE(平方根误差)、R2_score。但是当量纲不同时&#xff0c;RMSE、MAE、MSE难以衡量模型效果好坏&#xff0c;这就需要用到R2_score。 平均绝对…
阅读更多...
redis-学习笔记(Jedis 通用命令)

redis-学习笔记(Jedis 通用命令)

flushAll 清空全部的数据库数据 jedis.flushAll();set & get set 命令 get 命令 运行结果展示 exists 判断该 key 值是否存在 当 redis 中存在该键值对时, 返回 true 如果键值对不存在, 返回 false keys 获取所有的 key 值 参数是模式匹配 *代表匹配任意个字符 _代表匹配一…
阅读更多...
2 接口测试实战演示

2 接口测试实战演示

上一篇&#xff1a;1 接口测试介绍-CSDN博客 拿到开发提供的接口文档后&#xff0c;结合需求文档开始做接口测试用例设计&#xff0c;下面用最常见也最简单的注册功能介绍整个流程。 说明&#xff1a;以演示接口测试流程为主&#xff0c;不对演示功能做详细的测试&#xff0c;…
阅读更多...
Jenkins离线安装部署教程简记

Jenkins离线安装部署教程简记

前言 在上一篇文章基于Gitee实现Jenkins自动化部署SpringBoot项目中&#xff0c;我们了解了如何完成基于Jenkins实现自动化部署。 对于某些公司服务器来说&#xff0c;是不可以连接外网的&#xff0c;所以笔者专门整理了一篇文章总结一下&#xff0c;如何基于内网直接部署Jen…
阅读更多...
TDengine Kafka Connector将 Kafka 中指定 topic 的数据（批量或实时）同步到 TDengine

TDengine Kafka Connector将 Kafka 中指定 topic 的数据（批量或实时）同步到 TDengine

教程放在这里&#xff1a;TDengine Java Connector&#xff0c;官方文档已经写的很清晰了&#xff0c;不再赘述。 这里记录一下踩坑&#xff1a; 1.报错 java.lang.UnsatisfiedLinkError: no taos in java.library.pathat java.lang.ClassLoader.loadLibrary(ClassLoader.j…
阅读更多...
SE考研真题总结（三）

SE考研真题总结（三）

继续更新&#xff0c;今天准备连出两期该系列~ SE考研真题总结&#xff08;二&#xff09;https://blog.csdn.net/jsl123x/article/details/134857052?spm1001.2014.3001.5501 目录 一.简答题 二.代码大题 一.简答题 1.工程和科学的区别 科学是关于事物的基本原理和事实的…
阅读更多...
102基于matlab的PCA+ELM和PCA+PSO-ELM的费用估计

102基于matlab的PCA+ELM和PCA+PSO-ELM的费用估计

基于matlab的PCAELM和PCAPSO-ELM的费用估计&#xff0c;输出输出两者的预测误差并进行比较&#xff0c;输出优化后的迭代曲线。数据可更换自己的&#xff0c;程序已调通&#xff0c;可直接运行。 102matlab PCAPSOELM (xiaohongshu.com)
阅读更多...
第16章 网络io与io多路复用select/pool/epool

第16章 网络io与io多路复用select/pool/epool

第16.1节 写一个服务端代码 服务端代码 #include <stdio.h> #include <errno.h> #include <string.h> #include <unistd.h> #include <sys/socket.h> #include <netinet/in.h>#include <fcntl.h>int main() {//openint sockfd sock…
阅读更多...
大数据技术之Storm的安装与配置

大数据技术之Storm的安装与配置

大数据技术之Storm的安装与配置 这篇文章深入研究了大数据技术中实时计算系统 Apache Storm 的安装与配置过程。首先&#xff0c;文章介绍了 Apache Storm 在大数据处理中的重要性&#xff0c;强调其在实时数据处理领域的关键作用。随后&#xff0c;详细阐述了如何在系统中进行…
阅读更多...
掌握Web、DNS、FTP、DHCP服务器的配置。掌握简单网络方案的规划和设计

掌握Web、DNS、FTP、DHCP服务器的配置。掌握简单网络方案的规划和设计

1、Web服务器配置 2、综合设计 配置完后，所有的终端主机都要能够访问外网服务器，并进行测试。（本题可以自行选题，自行设计，但必须包含路由器、服务器（web、dns、DHCP、）、交换机及防火墙）。 3.做好规划并搭建拓扑图： 4.给PC机与服务器配置好IP，网关 5.给每个交换机…
阅读更多...
【Spring】02 Bean 的命名

【Spring】02 Bean 的命名

文章目录 1. 定义2. 使用优势3. 如何命名4. 注解驱动5. 最佳实践1&#xff09;使用明确的业务名词2&#xff09;避免缩写和首字母缩略词2&#xff09;不要过度使用别名 结语 在 Spring 框架中&#xff0c;Bean 是应用程序中的主要组件&#xff0c;负责承载和管理应用的核心功能…
阅读更多...
最新文章

Copyright @ 2022~2023