Three.js入门

最新推荐文章于 2024-05-16 09:43:08 发布

刀瑞

最新推荐文章于 2024-05-16 09:43:08 发布

阅读量558

点赞数

分类专栏： Three.js 文章标签： webgl 3d

Three.js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

什么是three.js？

它封装了WebGL的复杂底层代码，为在浏览器中的3D呈现提供了简明的数据接口。用原生的WebGL需要写数百行的JS和shader代码才能完成的事情用three.js只需一小部分代码就可以做到。

事先准备

将下面的HTML代码保存为.html文件，并且将three.min.js放到js/directory目录下，用chrome打开。

<html>
	<head>
		<title>My first Three.js app</title>
		<style>canvas { width: 100%; height: 100% }</style>
	</head>
	<body>
		<script src="js/three.min.js"></script>
		<script>
			// Our Javascript will go here.
		</script>
	</body>
</html>

我们接下来的代码都会写到空的<script>标签里面。

创建场景

我们需要一个场景，一个摄像机和一个渲染器以便用摄像机来渲染场景。

<pre name="code" class="javascript">var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

Three.js里面提供了不同种类的摄像机，我们在这里使用PerspectiveCamera。第一个参数是视野大小，第二个是宽高比，余下的两个参数分别是近裁切面和远裁切面，更近或更远的部分不会被渲染。

接下来是渲染器，也就是奇迹发生的地方~！除了我们在这里使用的WebGLRenderer渲染器，three.js还提供了其他渲染器，通常用来针对旧的或者不支持WebGL的浏览器的应急办法。

在创建了一个渲染器实例之后，我们还需要设置渲染部分的大小。在本例中，使用浏览器窗口的宽高作为参考，对性能优先的游戏设计，可以使用window.innerWidth/2 和 window.innerHeight/2。比起window.innerWidth和window.innerHeight，并不是渲染场景变成了浏览器一半的大小，而是采用了一半的分辨率，效果会更加模糊。

最后，我们将渲染器元素添加到HTML的DOM结构里面。渲染器使用的是<canvas>元素以在浏览器中呈现场景。

下面我们来给场景中加一个立方体。

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;

为了创建立方体，我们需要一个BoxGeometry对象，它包含了立方体所有的顶点和面。

除了几何形状，我们还需要材质来为立方体着色。Three.js提供了很多材质，我们在这里使用MeshBasicMaterial，它包含一些不同的变量。为了简单，我们在这里只用颜色值这一个变量，0x00ff00是绿色。在这里颜色值的使用同CSS和Photoshop中是一样的。

接下来我们需要一个Mesh对象，Mesh对象可以贴上材质然后放入场景中。

默认情况下，当我们调用scene.add()时，我们加入场景中的物体会被放到(0,0,0)坐标点。这会使得摄像机和物体重叠，所以我们最后把摄像机的位置外移一点。

渲染场景

以上的代码并不能在浏览器中显示什么，因为我们还没有进行渲染。我们需要调用一个渲染循环来完成场景的渲染。

function render() {
	requestAnimationFrame(render);
	renderer.render(scene, camera);
}
render();

这个循环使得渲染器每秒绘制场景60次。当用户点击别的浏览器页面时，requestAnimationFrame函数可以暂停渲染，节省进程占用。

让立方体动起来

让我们为这个绿色的立方体加上旋转吧~！

将下面的代码加入循环里，每帧运行一次，形成了良好的动画效果。一般来说，你想要运行或改变的任何事情都必须在渲染循环里实现。

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

完成

接下来是完整的代码，运行一下，加深你的理解吧~！

<html>
	<head>
		<title>My first Three.js app</title>
		<style>canvas { width: 100%; height: 100% }</style>
	</head>
	<body>
		<script src="js/three.min.js"></script>
		<script>
			var scene = new THREE.Scene();
			var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

			var 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 render = function () {
				requestAnimationFrame(render);

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

				renderer.render(scene, camera);
			};

			render();
		</script>
	</body>
</html>

刀瑞

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Three.js入门

什么是three.js？它封装了WebGL的复杂底层代码，为在浏览器中的3D呈现提供了简明的数据接口。用原生的WebGL需要写数百行的JS和shader代码才能完成的事情用three.js只需一小部分代码就可以做到。事先准备将下面的HTML代码保存为.html文件，并且将three.min.js放到js/directory目录下，用chrome打开。我们接下来的代码都会写到空
复制链接

扫一扫