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向量,矩阵等
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值