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

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.hqwc.cn/news/93620.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

动手学深度学习（四）多层感知机

动手学深度学习（四）多层感知机

经过了多层感知机后&#xff0c;相当于将原始的特征转化成了新的特征&#xff0c;或者说提炼出更合适的特征&#xff0c;这就是隐藏层的作用。 from&#xff1a;清晰理解多层感知机和反向传播 - 知乎 一、多层感知机的从零开始实现 import torch from torch import nn from d2…
阅读更多...
网络基础之重中之重

网络基础之重中之重

目录 IP协议 ​编辑 基本概念&#xff1a; 协议头格式&#xff1a; ​编辑 网段划分 DHCP &#xff1a; CIDR&#xff1a; 特殊的IP地址&#xff1a; IP地址的数量限制&#xff1a; 私有IP和公网IP 路由 路由的过程&#xff1a; 数据链路层 认识以太网&#x…
阅读更多...
Java 大厂八股文面试专题-设计模式 工厂方法模式、策略模式、责任链模式

Java 大厂八股文面试专题-设计模式 工厂方法模式、策略模式、责任链模式

面试专题-设计模式 前言 在平时的开发中&#xff0c;涉及到设计模式的有两块内容&#xff0c;第一个是我们平时使用的框架&#xff08;比如spring、mybatis等&#xff09;&#xff0c;第二个是我们自己开发业务使用的设计模式。 面试官一般比较关心的是你在开发过程中&#xff…
阅读更多...
Unity编辑器扩展 | 编辑器扩展基础入门

Unity编辑器扩展 | 编辑器扩展基础入门

前言 Unity编辑器扩展 | 编辑器扩展基础一、基本概念二、核心知识点 简述三、相关API 总结 前言 当谈到游戏开发工具&#xff0c;Unity编辑器是一个备受赞誉的平台。它为开发者提供了一个强大且灵活的环境&#xff0c;使他们能够创建令人惊叹的游戏和交互式体验。然而&#xf…
阅读更多...
最小化安装移动云大云操作系统--BCLinux-for-Euler-22.10-everything-x86_64-230316版

最小化安装移动云大云操作系统--BCLinux-for-Euler-22.10-everything-x86_64-230316版

CentOS 结束技术支持&#xff0c;转为RHEL的前置stream版本后&#xff0c;国内开源Linux服务器OS生态转向了开源龙蜥和开源欧拉两大开源社区&#xff0c;对应衍生出了一系列商用Linux服务器系统。BCLinux-for-Euler-22.10是中国移动基于开源欧拉操作系统22.03社区版本深度定制的…
阅读更多...
uniapp 布局（自定义导航栏加固定高度的主要内容）

uniapp 布局（自定义导航栏加固定高度的主要内容）

不想让整体页面出现滚动条 页面大致分为三部分&#xff0c;导航栏、主题内容、tabbar&#xff0c;不想让整个页面出现滚动条&#xff0c;只想让主要内容滚动。 我这里是直接用了uni.getSystemInfoSync()&#xff0c;整体分为两部分&#xff0c;自定义头部和滚动内容&#xff…
阅读更多...
Mybatis 动态SQL – 使用if,where标签动态生成条件语句

Mybatis 动态SQL – 使用if,where标签动态生成条件语句

前面几篇我们介绍了使用Mybatis进行数据的增删改查&#xff0c;并且也了解了如何在Mybatis中使用JDK的日志系统打印日志&#xff1b;本篇我们继续介绍如何使用Mybatis提供的if,where标签动态生成条件语句。 如果您对数据的增删改查和Mybatis集成JDK日志系统不太了解&#xff0…
阅读更多...
2021年06月 C/C++（六级）真题解析#中国电子学会#全国青少年软件编程等级考试

2021年06月 C/C++（六级）真题解析#中国电子学会#全国青少年软件编程等级考试

第1题&#xff1a;逆波兰表达式 逆波兰表达式是一种把运算符前置的算术表达式&#xff0c;例如普通的表达式2 3的逆波兰表示法为 2 3。逆波兰表达式的优点是运算符之间不必有优先级关系&#xff0c;也不必用括号改变运算次序&#xff0c;例如(2 3) * 4的逆波兰表示法为* 2 3…
阅读更多...
深度解读智能媒体服务的重组和进化

深度解读智能媒体服务的重组和进化

统一“顶设”的智能媒体服务。 邹娟&#xff5c;演讲者 大家好&#xff0c;首先欢迎各位来到LVS的阿里云专场&#xff0c;我是来自阿里云视频云的邹娟。我本次分享的主题为《从规模化到全智能&#xff1a;智能媒体服务的重组与进化》。 本次分享分为以上四部分&#xff0c;一是…
阅读更多...
Ubuntu学习---跟着绍发学linux课程记录（第一部分）

Ubuntu学习---跟着绍发学linux课程记录（第一部分）

文章目录 1、启动、关闭、挂起、恢复&#xff08;电源&#xff09;2、更多虚拟机操作2.1 电源设置2.2 硬件参数设置2.3 状态栏2.4 全屏显示 3、快照与系统恢复4、桌面环境5、文件系统6、用户目录7、创建目录和文件8、命令行&#xff1a;文件列表ls 9、命令行&#xff1a;切换目…
阅读更多...
MLC-LLM 部署RWKV World系列模型实战（3B模型Mac M2解码可达26tokens/s）

MLC-LLM 部署RWKV World系列模型实战（3B模型Mac M2解码可达26tokens/s）

0x0. 前言 我的 ChatRWKV 学习笔记和使用指南 这篇文章是学习RWKV的第一步&#xff0c;然后学习了一下之后决定自己应该做一些什么。所以就在RWKV社区看到了这个将RWKV World系列模型通过MLC-LLM部署在各种硬件平台的需求&#xff0c;然后我就开始了解MLC-LLM的编译部署流程和…
阅读更多...
python web GUI框架-NiceGUI 教程（二）

python web GUI框架-NiceGUI 教程（二）

python web GUI框架-NiceGUI 教程&#xff08;二&#xff09; streamlit可以在一些简单的场景下仍然推荐使用&#xff0c;但是streamlit实在不灵活&#xff0c;受限于它的核心机制&#xff0c;NiceGUI是一个灵活的web框架&#xff0c;可以做web网站也可以打包成独立的exe。 基…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023