Three.js一学就会系列：01 第一个3D网站

文章目录

前言
一、Three.js是什么？
- 官网
- 官网示例效果尝鲜
二、使用步骤
效果
总结

前言

最近开始入坑前端3D建站，跟大家一起慢慢深入three.js做网站3D

一、Three.js是什么？

官网

https://threejs.org/

three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。

官网示例效果尝鲜

请添加图片描述

二、使用步骤

1.引入three.js库

在线库

<script src="https://threejs.org/build/three.js">script>
1

离线可以去官网https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene
下载复制到项目所在的目录下
在这里插入图片描述

<script src="./three.js">script>
1

2.使用方法

创建一个场景

const scene = new THREE.Scene();
1

创建一个透视摄像机

const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 5;
1
2

参数：视野角度（FOV）、长宽比（aspect ratio）、近截面（near）和远截面（far）
camera.position.z：透视摄像机位置

将渲染器添加到页面上

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
1
2
3

创建一个立方体

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
1
2
3
4

BoxGeometry：立方体，参数为所有顶点和面
MeshBasicMaterial：材质，将应用到对象上，color设置了对象的颜色
Mesh：网格，几何体和几何体材质，作用
scene.add：添加到场景上

渲染场景

function animate() {
	requestAnimationFrame( animate );
	renderer.render( scene, camera );
}
animate();
1
2
3
4
5

requestAnimationFrame有很多的优点。最重要的一点或许就是当用户切换到其它的标签页时，它会暂停，因此不会浪费用户宝贵的处理器资源，也不会损耗电池的使用寿命。

立方体动起来

function animate() {
	requestAnimationFrame( animate );
	// 旋转方向，及大小
	cube.rotation.x += 0.01;
	cube.rotation.y += 0.01;

	renderer.render( scene, camera );
};

animate();
1
2
3
4
5
6
7
8
9
10

完整代码（实例）

<html>
	<head>
		<meta charset="utf-8">
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
		</style>
	</head>
	<body>
		<script src="./three.js"></script>
		<!-- <script src="https://threejs.org/build/three.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 );
			// 创建一个立方体
			const geometry = new THREE.BoxGeometry( 1, 1, 1 );
			const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
			const cube = new THREE.Mesh( geometry, material );
			scene.add( cube );

			camera.position.z = 5;

			function animate() {
				requestAnimationFrame( animate );

				cube.rotation.x += 0.01;
				cube.rotation.y += 0.01;

				renderer.render( scene, camera );
			};

			animate();
		</script>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

效果

在这里插入图片描述

总结

以上就是今天要讲的内容，本文仅仅简单介绍了three.js的使用，而three.js提供了非常多的3D显示功能，后续文章，我将带大家慢慢深入了解。

如果觉得有用欢迎点赞关注
有问题私信我！！~~

相关阅读:
Navicat连接mysql8.0：提示无法加载身份验证插件“caching_sha2_password”
day03 mybatis
1154.一年中的第几天
计算机毕业设计（附源码）python中草药管理系统
下一代龙蜥操作系统 Anolis OS 23 公测版正式发布｜2022云栖龙蜥实录
【历史上的今天】8 月 2 日：字节跳动收购 Musical.ly；PlayStation 之父诞生；早期的女性计算机先驱
IOI 2022 简要题解
Open3D 二维凸包计算
Android 应用流量监控实践
Openssl数据安全传输平台011：秘钥协商客户端

原文地址：https://blog.csdn.net/u012551928/article/details/128205373