ThreeJS 学习笔记——简介

本文详细介绍了Three.js,一个基于WebGL的3D渲染库,适用于前端开发。它提供了多种渲染器,包括Canvas2D、SVG、CSS3D和WebGL,并附带了大量的示例代码和详细的文档,适合初学者快速上手。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、前言

Three.js (github) 是一个纯 JavaScript 实现的 3D 渲染库,其在前端 3D 渲染的地位不言而喻,看其在 github 上的 start 4.6 k,fork 1.7 k 这个量级便知道了。准确来说 ThreeJs 是一个基于 WebGL 的封装,而 WebGL 就是前端界的 OpenGL。

二、Github 首页解读

1.简介

该项目的目的是创建一个易于使用,轻量级的3D库。该库提供Canvas 2D,SVG,CSS3D和WebGL渲染器。 Examples: 真的是史上见过最全的例程,良心良心啊,不过没有文档说明,也没有注释。捂脸.jpg Document: 文档也是非常的齐全了,同样是良心作品。 其他链接有兴趣的可以自己去探求一下。

2.使用

首先在自己的页面中安装或者以模块的方式进行导入,再或者自己可以进行源码编译并导入。

<script src="js/three.min.js"></script>
复制代码

下面是github首页给的一个小例子,有兴趣的可以拿来运行一下,改改里面的参数,感受一下 3D 的世界。

var camera, scene, renderer;
var geometry, material, mesh;

init();
animate();

function init() {
        // 创建一个相机
	camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
	camera.position.z = 1;
       // 创建场景
	scene = new THREE.Scene();
       // 创建一个3D Box 几何体
	geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
	material = new THREE.MeshNormalMaterial();
        // 创建 mesh 并添加到场景中
	mesh = new THREE.Mesh( geometry, material );
	scene.add( mesh );
        // 创建一个 WebGLRenderer 并加入到上下文中
	renderer = new THREE.WebGLRenderer( { antialias: true } );
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );

}

function animate() {

	requestAnimationFrame( animate );

	mesh.rotation.x += 0.01;
	mesh.rotation.y += 0.02;

	renderer.render( scene, camera );

}
复制代码

不想自己敲代码的,也可以看看 github 中提供的 jsfiddle 中绘制出来的效果。

除了 GitHub 首页,其还提供了一个官网 threejs.org/,官网提供了 document 入口,源码下载地址或者直接下载,同时也有许多非常炫丽的产品展示。尤其亮瞎我钛金眼的法拉第FF,真是吃了好大一个鲸 —— ff 91 vr

三、源码基本结构

1.本地调试源码

(1) npm install 安装依赖
(2) npm run dev 在本地起一个服务

成功后,如下会在本机开启一个 8080 端口,然后你就可以愉快的在本机体验所有的 demo 效果了。

控制台输出

[HTTP] Starting up http-server, serving ./
[HTTP] Available on:
[HTTP]   http://127.0.0.1:8080
[HTTP]   http://192.168.31.175:8080
[HTTP] Hit CTRL-C to stop the server

复制代码

2.基本结构

浏览器输出上面的 http 地址,如 http://127.0.0.1:8080,注意必须要用 http/https 协议,否则例程里面的模型是不能下载的,即,不支持 ftp。

然后再来看一下 src 里面都有哪一些模块

模块名说明
animation动画模块
audio音频
cameras3D 相机
extras其他
geometrics基础几何对象
helpers帮助类
lights光源
loaders3D 模型加载器
materials材质
textures纹理
objects用于加入到场景中的对象
renderersWebGL渲染,glsl 定义
scenes场景
core属性,几何,3D对象,光线跟踪等
math向量,矩阵等
cda备考学习学习笔记——基础知识篇(二)主要涉及了计算机科学与技术领域的基本概念和知识。 首先,它介绍了计算机网络的基础知识。网络是将多台计算机通过通信链路连接起来,使它们能够相互通信和共享资源的系统。笔记中详细介绍了网络的组成、拓扑结构和通信协议等重要内容。 其次,笔记还解释了计算机系统的基本组成。计算机系统由硬件和软件两部分组成,其中硬件包括中央处理器、存储器、输入输出设备等,而软件则分为系统软件和应用软件。笔记详细介绍了各种硬件和软件的功能和作用。 此外,笔记还对数据库管理系统进行了介绍。数据库管理系统是一种用于管理和组织数据的软件系统,它能够实现数据的存储、检索和更新等操作。笔记中详细介绍了数据库的概念、结构和操作等内容。 最后,笔记还包括了算法和数据结构的基础知识。算法是解决问题的一系列步骤和规则,而数据结构则是组织和存储数据的方式。笔记中介绍了常用的算法和数据结构,如排序算法、树和图等。 总之,通过学习CDA备考学习笔记中的基础知识篇(二),我们能够更好地理解计算机网络、计算机系统、数据库管理系统以及算法和数据结构等相关概念和知识。这些基础知识对于我们深入研究计算机科学与技术领域是非常重要的,也为我们日后的学习和工作奠定了坚实的基础。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值