Skip to content

T
three.js

Ablesons / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

切换分支/标签
查找文件 普通视图历史永久链接Permalink
FirstSteps.rst 3.0 KB
Newer Older
I
added 'first steps' tutorial and rubrics for all files in api folder  
ivankuzev 已提交
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 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 
First Steps
====================

Three.js scenes are very easy to setup and only require a few lines of code to initialize. Scenes are constructed using a few different types of objects: cameras, lights, and meshes.

The first step in rendering a three.js scene is creating the WebGL renderer object. The following code creates an HTML canvas object 800x400 pixels, adds it to the document's body, and initializes a three.js scene.

::

	var renderer = new THREE.WebGLRenderer();
	renderer.setSize( 800, 640 );
	document.body.appendChild( renderer.domElement );
	
	var scene = new THREE.Scene();

The second step is to define a camera which the renderer object will use in rendering.

::

	var camera = new THREE.Camera(
		35,			// Field of view
		800 / 640,	// Aspect ratio
		.1,			// Near
		10000		// Far
	);
	camera.position.set( -15, 10, 15 );

The first parameter passed determines how wide the field of view is. The second parameter is the aspect ratio which is calculated by dividing the viewing area's width by its height. The third and fourth parameters specify cut-off points for objects in the camera's view. If an object's distance from the camera does not fall in the range between NEAR and FAR then that object is not rendered. The last line sets the camera's XYZ coordinates to -15, 10, and 15 respectively.

Step three creates a white cube that is 5 units wide, tall and deep, adds the Lambert material, and adds it to the scene.

::

	var cube = new THREE.Mesh(
		new THREE.CubeGeometry( 5, 5, 5 ),
		new THREE.MeshLambertMaterial( { color: 0xFF0000 } )
	);
	scene.addChild( cube );

For the last step in setting up a scene we create a yellow light source and add it to the scene.

::

	var light = new THREE.PointLight( 0xFFFF00 );
	light.position.set( 10, 0, 10 );
	scene.addLight( light );

Finally we render the scene which displays our scene through the camera's eye.

::

	renderer.render(scene, camera);

Everything together in a working example with a minimal HTML template:

::
	
	<!DOCTYPE html>
	
	<html>
	
	<head>
		<title>Getting Started with Three.js</title>
		
		<script type="text/javascript" src="Three.js"></script>
		<script type="text/javascript">
		window.onload = function() {
			
				var renderer = new THREE.WebGLRenderer();
				renderer.setSize( 800, 400 );
				document.body.appendChild( renderer.domElement );
				
				var scene = new THREE.Scene();
				
				var camera = new THREE.Camera(
					35,		// Field of view
					800 / 400,	// Aspect ratio
					.1,		// Near
					10000		// Far
				);
				camera.position.set( -15, 10, 15 );
				
				var cube = new THREE.Mesh(
					new THREE.CubeGeometry( 5, 5, 5 ),
					new THREE.MeshLambertMaterial( { color: 0xFF0000 } )
				);
				scene.addChild( cube );
				
				var light = new THREE.PointLight( 0xFFFF00 );
				light.position.set( 10, 0, 10 );
				scene.addLight( light );
				
				renderer.render(scene, camera);
				
		};
		</script>
	</head>
	
	<body></body>
	
	</html>

That's how simple and easy three.js makes WebGL. Only 20 lines of Javascript to initialize and render a scene.