three.js(一)：认识three.js并创建第一个3D应用

news2025/1/15 12:55:19

three.js 概述

1-three.js 是什么？

  • three.js是用JavaScript编写的WebGL第三方库;
  • three.js 提供了非常多的3D显示和编辑功能;
  • 具体而言，three.js 是一款运行在浏览器中的 3D 引擎，可以用three.js 创建各种三维场景，并对其进行编辑;
  • 在three.js 的官网上看到许多精彩的演示和文档
    • three.js 官网：https://threejs.org/
    • github：https://github.com/mrdoob/three.js

2-three 的优缺点

优点：

  • 对WebGL 进行了深度封装，可以提高常见项目的开发速度。
  • 入门简单，精通较难，需图形学基础。
  • 具备较好的生态环境，文档详细，持续更新，在国内的使用者很多，就业需求也很大。

缺点：

  • 在Node.js 中引用困难。在 Node.js v12 中， three.js 的核心库可使用 require(‘three’) 来作为 CommonJS module 进行导入。然而，大多数在 examples/jsm 中的示例组件并不能够这样。
  • 个别功能封装过紧，限制了其灵活性。

3-three 适合做什么

  • three.js 适合三维项目的开发和展示，比如VR、AR、三维产品展示、三维家居设计……
  • three.js 也可以做游戏开发，只是相较于Babylon，缺少了物理引擎。

创建第一个3D应用-旋转的立方体

1.建立一个HTML文件，引入three

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>立方体</title>
		<style>
			body { margin: 0; }
		</style>
	</head>
	<body>
		<script src="https://unpkg.com/three/build/three.js"></script>
		<script>
			// Our Javascript will go here.
		</script>
	</body>
</html>

2.创建一个场景

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 );
  • 建立了场景、相机和渲染器，对于其中参数的意思，可以去官网查阅文档。

3.创建立方体

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshNormalMaterial();
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;

4.在连续渲染方法里旋转立方体

animate()
function animate() {
  requestAnimationFrame( animate );
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render( scene, camera );
};
  • 现在已经成功完成了第一个Three.js应用程序
    在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

事务的总结

事务的总结

数据库事务 数据库事务是一个被视为单一的工作单元的操作序列。这些操作应该要么完整地执行&#xff0c;要么完全不执行。事务管理是一个重要组成部分&#xff0c;RDBMS 面向企业应用程序&#xff0c;以确保数据完整性和一致性。事务的概念可以描述为具有以下四个关键属性描述…
阅读更多...
C语言基础知识理论版（很详细）

C语言基础知识理论版（很详细）

文章目录 前述一、数据1.1 数据类型1.2 数据第一种数据&#xff1a;常量第二种数据&#xff1a;变量第三种数据&#xff1a;表达式1、算术运算符及算术表达式2、赋值运算符及赋值表达式3、自增、自减运算符4、逗号运算符及其表达式&#xff08;‘顺序求值’表达式&#xff09;5…
阅读更多...
AOP到底是啥

AOP到底是啥

AOP到底是啥 前言面向切面编程到底是啥意思那么要怎么实现面向切面编程呢&#xff1f;成果 前言 回忆起来&#xff0c;第一次听到这三字母是博主在上大二的时候&#xff0c;那时候看的一脸懵逼&#xff0c;现在马上研二了才想起来回顾下。 只记得当时面向对象编程还没整明白&…
阅读更多...
深入理解协同过滤算法及其实现

深入理解协同过滤算法及其实现

导语 个性化推荐系统在现代数字时代扮演着重要的角色&#xff0c;协助用户发现他们可能感兴趣的信息、产品或媒体内容。协同过滤是个性化推荐系统中最流行和有效的算法之一。 目录 协同过滤算法的原理 基于用户的协同过滤&#xff08;User-Based Collaborative Filtering&am…
阅读更多...
ubuntu tensorrt 安装

ubuntu tensorrt 安装

官网&#xff0c;非常详细&#xff0c;比大部分博客写的都好&#xff0c;强烈推荐 具体的点进链接
阅读更多...
Vue2项目练手——通用后台管理项目第五节

Vue2项目练手——通用后台管理项目第五节

Vue2项目练手——通用后台管理项目 首页组件布局面包屑&tag面包屑使用组件使用vuex存储面包屑数据src/store/tab.jssrc/components/CommonAside.vuesrc/components/CommonHeader.vue tag使用组件文件目录CommonTag.vueMain.vuetabs.js 用户管理页新增功能使用的组件页面布局…
阅读更多...
计算机图形学线性代数相关概念

计算机图形学线性代数相关概念

Transformation&#xff08;2D-Model&#xff09; Scale(缩放) [ x ′ y ′ ] [ s 0 0 s ] [ x y ] (等比例缩放) \left[ \begin{matrix} x \\ y \end{matrix} \right] \left[ \begin{matrix} s & 0 \\ 0 & s \end{matrix} \right] \left[ \begin{matrix} x \\ y \en…
阅读更多...
74天从构想到“首开式”，长沙建设全球研发中心城市跑出“加速度”

74天从构想到“首开式”，长沙建设全球研发中心城市跑出“加速度”

文 | 智能相对论 作者 | 胡静婕 为引鲲鹏入湘&#xff0c;长沙曾做到1天完成工商注册&#xff0c;10天完成土地审批流转&#xff0c;从项目筹建到一期厂房交付仅耗时120天。 “长沙速度”&#xff0c;让华为都感到惊讶&#xff0c;华为技术有限公司徐直军就曾表示&#xff1…
阅读更多...
使用远程桌面软件改善工作与生活的平衡

使用远程桌面软件改善工作与生活的平衡

在当今高度互联的世界中&#xff0c;我们的工作和个人生活之间的界限变得越来越模糊。在本文中&#xff0c;我们将探讨像 Splashtop 这样的远程桌面工具如何成为实现和谐工作与生活平衡不可或缺的一部分。 在当今的背景下理解工作与生活的平衡 工作与生活的平衡不仅仅是一个时…
阅读更多...
C++、C#、JAVA 、 DELPHI、VB各个程序的优缺点你知道吗？

C++、C#、JAVA 、 DELPHI、VB各个程序的优缺点你知道吗？

每种编程语言都有自己的优势和缺点&#xff0c;以下是对C、C#、Java、Delphi和VB的一些常见评价&#xff1a;C:优势&#xff1a;高性能、灵活性和可移植性强&#xff0c;适合对性能要求高的应用&#xff0c;可以进行系统级编程和嵌入式开发。缺点&#xff1a;语法复杂&#xff…
阅读更多...
DRM全解析 —— CREATE_DUMB（3）

DRM全解析 —— CREATE_DUMB（3）

接前一篇文章&#xff1a;DRM全解析 —— CREATE_DUMB&#xff08;2&#xff09; 本文参考以下博文&#xff1a; DRM驱动&#xff08;三&#xff09;之CREATE_DUMB 特此致谢&#xff01; 上一回讲解了drm_mode_create_dumb函数的前半部分&#xff0c;本回讲解余下的部分。 为…
阅读更多...
函数的递归调用

函数的递归调用

1、什么是函数的递归调用&#xff1f; 其实说白了就是在函数的内部再调用函数自己本身 function fun(){fun() } 2、用递归解决问题的条件 &#xff08;1&#xff09;一个问题是可以分解成子问题&#xff0c;子问题的解决办法与最原始的问题解决方法相同 &#xff08;2&…
阅读更多...
【V4L2】V4L2框架简述

【V4L2】V4L2框架简述

系列文章目录 【V4L2】V4L2框架简述 【V4L2】V4L2框架之驱动结构体 【V4L2】V4L2子设备 文章目录 系列文章目录V4L2框架简介V4L2框架蓝图蓝图解构层级解构 导读&#xff1a;V4L2 是专门为 linux 设备设计的一套视频框架&#xff0c;其主体框架在 linux 内核&#xff0c;可以理…
阅读更多...
Nacos 开源版的使用测评

Nacos 开源版的使用测评

文章目录 一、Nacos的使用二、Nacos和Eureka在性能、功能、控制台体验、上下游生态和社区体验的对比&#xff1a;三、记使使用Nacos中容易犯的错误四、对Nacos开源提出的一些需求 一、Nacos的使用 这里配置mysql的连接方式&#xff0c;spring.datasource.platformmysql是老版本…
阅读更多...
Python与STM32串口通讯

Python与STM32串口通讯

最近&#xff0c;苦于STM32与上位机Python的串口通讯&#xff0c;实在完成不了通讯&#xff0c;不知道到底是什么原因&#xff0c;STM32与上位机的串口调试软件是可以成功完成数据传输的&#xff0c;但用Python就不知道为啥不能完成通信&#xff0c;网上关于这方面的东西也不能…
阅读更多...
Python Opencv实践 - 霍夫圆检测（Hough Circles）

Python Opencv实践 - 霍夫圆检测（Hough Circles）

import cv2 as cv import numpy as np import matplotlib.pyplot as pltimg cv.imread("../SampleImages/steelpipes.jpg") print(img.shape) plt.imshow(img[:,:,::-1])#转为二值图 gray cv.cvtColor(img, cv.COLOR_BGR2GRAY) plt.imshow(gray, cmap plt.cm.gray…
阅读更多...
iPhone 15预售：获取关键信息

iPhone 15预售：获取关键信息

既然苹果公司将于9月12日正式举办iPhone 15发布会，我们了解所有新机型只是时间问题。如果你是苹果的狂热粉丝，或者只是一个早期用户，那么活动结束后，你会想把所有的注意力都集中在iPhone 15的预购上——这样你就可以保证自己在发布日会有一款机型。 有很多理由对今年的iPh…
阅读更多...
myspl使用指南

myspl使用指南

mysql数据库 使用命令行工具连接数据库 mysql -h -u 用户名 -p -u表示后面是用户名-p表示后面是密码-h表示后面是主机名&#xff0c;登录当前设备可省略。 如我们要登录本机用户名为root&#xff0c;密码为123456的账户&#xff1a; mysql -u root -p按回车&#xff0c;然后…
阅读更多...
时序预测 | MATLAB实现TCN-BiGRU时间卷积双向门控循环单元时间序列预测

时序预测 | MATLAB实现TCN-BiGRU时间卷积双向门控循环单元时间序列预测

时序预测 | MATLAB实现TCN-BiGRU时间卷积双向门控循环单元时间序列预测 目录 时序预测 | MATLAB实现TCN-BiGRU时间卷积双向门控循环单元时间序列预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 1.MATLAB实现TCN-BiGRU时间卷积双向门控循环单元时间序列预测&a…
阅读更多...
“MyBatis中的关联关系配置与多表查询“

“MyBatis中的关联关系配置与多表查询“

目录 引言一、一对多关系配置二、一对一关系配置三、多对多关系配置总结 引言 在数据库应用开发中&#xff0c;经常会遇到需要查询多个表之间的关联关系的情况。MyBatis是一个流行的Java持久层框架&#xff0c;它提供了灵活的配置方式来处理多表查询中的一对多、一对一和多对多…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023