网站首页 > 技术文章正文

JS，WebGL第三方库Three.js，三大基本对象:场景、相机和渲染器

nanyue 2024-09-21 20:04:02 技术文章 7 ℃

Three.js

WebGL（Web Graphics Library）

一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。

可以在浏览器上显示3D效果的技术，或者说是在浏览器中实现三维效果的一套规范。

Three.js（3D）

3D绘图JS引擎，是JavaScript编写的WebGL第三方库，提供了非常多的3D显示功能。Three.js可以创建各种三维场景，包括了摄影机、光影、材质等各种对象。

three.js地址：three.js官网：https://threejs.org/，github各个版本：https://github.com/mrdoob/three.js/tags

build（基础）目录：包含两个文件，three.js 和three.min.js ，这是three.js最终被引用的文件。一个已经压缩，一个没有压缩的js文件。

docs（文档）目录：帮助文档，里面是各个函数的api，可惜并没有详细的解释。

editor（编辑器）目录：一个类似3D-max的简单编辑程序，能创建一些三维物体。

examples（例子）目录：一些很有趣的例子demo，就是没有文档介绍。

三大基本对象及入门案例

Three.js三大基本对象

创建WebGL程序本是一种面向过程的编程，但在Three.js中要使用面向对象的方式来构建程序。要渲染物体到网页中，需要3个组件，也就是3个基本对象：场景（scene）、相机（camera）和渲染器（renderer）。

场景（scene），在Threejs中，场景就只有一种，用THREE.Scene来表示，要构件一个场景也很简单，只要new一个对象好；相机（camera），决定了场景中哪个角度的景色会显示出来，相机就像人的眼睛一样，能站在不同位置，抬头或者低头都能够看到不同的景色，最常用的主要是两种：透视相机PerspectiveCamera和正投影相机OrthographicCamera；渲染器（renderer），Three.js中的渲染器也有多种，主要用的是WebGLRenderer渲染器。

引入：<script src="js/three.min.js" type="text/javascript"></script>

<!DOCTYPE html>
<html>
	<head>
		<meta charset=utf-8>
		<title>My first Three.js app</title>
		<style>
			body { margin: 0; }
			canvas { width: 100%; height: 100% }
		</style>
	</head>
	<body>
		<script src="js/three.js"></script>
		<script>
			// 接下来的Javascript代码写在这里面
		</script>
	</body>
</html>

Three.js入门案例

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>My first three.js app</title>
	<style>
		body {
			margin: 0;
		}
	</style>
</head>

<body>
	<script src="js/three.min.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);

		// 
		var geometry = new THREE.BoxGeometry(1, 1, 1);
		var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
		var cube = new THREE.Mesh(geometry, material);
		scene.add(cube);

		// 透视摄像机
		camera.position.z = 5;

		// 渲染场景
		var animate = function () {
			requestAnimationFrame(animate);
			cube.rotation.x += 0.01;
			cube.rotation.y += 0.01;
			renderer.render(scene, camera);
		};
		animate();

	</script>
</body>

</html>

效果

Three.js其他资料

参考：http://www.yanhuangxueyuan.com/Three.js/

上一篇： css面试题6: 如何理解margin重叠问题
下一篇：登顶GitHub趋势榜，标星1.8k:200行JS代码让画面人物瞬间消失

网站首页 > 技术文章 正文

JS，WebGL第三方库Three.js，三大基本对象:场景、相机和渲染器

Three.js

三大基本对象及入门案例

猜你喜欢

网站首页 > 技术文章正文