create account

How to use three.js create lines and triangle | 如何使用three.js创建直线并且将它们连接成三角形 by azcax

View this thread on: hive.blog |  peakd.com |  ecency.com
utopian-io · @azcax · (edited)
$0.03
How to use three.js create lines and triangle | 如何使用three.js创建直线并且将它们连接成三角形
#### Summary:

In this tutorial I will introduce how to create scene, camera and renderer, and 3 lines connected to a spinning triangle.

#### Result
![图片.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1517196597/vzo0ozezb6fqscsnsej6.png)


#### What Will I Learn?

- html, css and javascript code structure
- how to set canvas with css
- how to rerfer to three.js library
- how to create a Perspective Camera
- how to create scene
- how to create lines and connected to triangle
- how to create Material
- how to add lines in scene
- how to create renderer
- how to create animation

#### Requirements

- source code editor, for example: vim, notepad++ etc.
- A browser that support webgl, for example: Google Chrome 9+, Firefox 4+, Opera 15+, Safari 5.1+, Internet Explorer 11 and Microsoft Edge etc.

#### Difficulty

- Intermediate

#### Tutorial Contents

- step 1: html, css and javascript code structure
```
<html>
	<head>
		<title>Three js Cube</title>
		<style>
			body { margin: 0; }
			canvas { width: 100%; height: 100% }
		</style>
		<script src="http://threejs.org/build/three.min.js"></script>
	</head>
	<body>
        <script>
        // three js code
        </script>
    </body>
</html>
```
- step 2: how to set canvas with css

```
canvas { width: 100%; height: 100% }
```

- step 3: how to rerfer to three.js library

```
<script src="../js/three.min.js"></script>
```

- step 4: how to create a Perspective Camera

```
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 500);
camera.position.set(0, 0, 100);
camera.lookAt(new THREE.Vector3(0, 0, 0));
```

- step 5: how to create scene

```
scene = new THREE.Scene();
```

- step 6: how to create lines and connected to triangle

```
material = new THREE.LineBasicMaterial({ color: 0xff00ff });
geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(-10, 0, 0));
geometry.vertices.push(new THREE.Vector3(0, 10, 0));
line = new THREE.Line(geometry, material);
scene.add(line);
		
material1 = new THREE.LineBasicMaterial({ color: 0x0000ff });
geometry1 = new THREE.Geometry();
geometry1.vertices.push(new THREE.Vector3(0, 10, 0));
geometry1.vertices.push(new THREE.Vector3(0, 0, 0));
line1 = new THREE.Line(geometry1, material1);
scene.add(line1);
		
material2 = new THREE.LineBasicMaterial({ color: 0x00ff00 });
geometry2 = new THREE.Geometry();
geometry2.vertices.push(new THREE.Vector3(0, 0, 0));
geometry2.vertices.push(new THREE.Vector3(-10, 0, 0));
line2 = new THREE.Line(geometry2, material2);
scene.add(line2);
```

- step 7: how to create Material

```
material = new THREE.LineBasicMaterial({ color: 0xff00ff });
material1 = new THREE.LineBasicMaterial({ color: 0xff00ff });
material2 = new THREE.LineBasicMaterial({ color: 0xff00ff });
```

- step 8: how to add lines in scene

```
scene.add(line);
scene.add(line1);
scene.add(line2);
```

- step 9：how to create renderer

```
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);
```

- step 10: how to create animation

```
requestAnimationFrame( animate );
line.rotation.x += 0.01;
line.rotation.y += 0.02;
line1.rotation.x += 0.01;
line1.rotation.y += 0.02;
line2.rotation.x += 0.01;
line2.rotation.y += 0.02;
renderer.render( scene, camera );
```

- full source code：
---
```
<html>
	<head>
		<title>Three js Line</title>
		<style>
			body { margin: 0; }
			canvas { width: 100%; height: 100% }
		</style>
		<script src="../js/three.min.js"></script>
	</head>
	<body>
<script>
	var camera, scene, renderer;
	var geometry, geometry1, geometry2, material, material1, material2, line, line1, line2;

	init();
	animate();

	function init()
	{
		camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 500);
		camera.position.set(0, 0, 100);
		camera.lookAt(new THREE.Vector3(0, 0, 0));
		scene = new THREE.Scene();

		renderer = new THREE.WebGLRenderer();
		renderer.setSize(window.innerWidth, window.innerHeight);
		document.body.appendChild(renderer.domElement);
		renderer.render(scene, camera);
		
		material = new THREE.LineBasicMaterial({ color: 0xff00ff });
		geometry = new THREE.Geometry();
		geometry.vertices.push(new THREE.Vector3(-10, 0, 0));
		geometry.vertices.push(new THREE.Vector3(0, 10, 0));
		line = new THREE.Line(geometry, material);
		scene.add(line);
		
		material1 = new THREE.LineBasicMaterial({ color: 0x0000ff });
		geometry1 = new THREE.Geometry();
		geometry1.vertices.push(new THREE.Vector3(0, 10, 0));
		geometry1.vertices.push(new THREE.Vector3(0, 0, 0));
		line1 = new THREE.Line(geometry1, material1);
		scene.add(line1);
		
		material2 = new THREE.LineBasicMaterial({ color: 0x00ff00 });
		geometry2 = new THREE.Geometry();
		geometry2.vertices.push(new THREE.Vector3(0, 0, 0));
		geometry2.vertices.push(new THREE.Vector3(-10, 0, 0));
		line2 = new THREE.Line(geometry2, material2);
		scene.add(line2);
	}

	function animate()
	{
		requestAnimationFrame( animate );
		line.rotation.x += 0.01;
		line.rotation.y += 0.02;
		line1.rotation.x += 0.01;
		line1.rotation.y += 0.02;
		line2.rotation.x += 0.01;
		line2.rotation.y += 0.02;
		renderer.render( scene, camera );
	}
</script>
</body>
</html>
```

---
- verify:  http://azcax.org/threejs/threejs_line.html

---
# The chinese version

#### 可以学到什么?

- html,css javascript代码整体结构
- 怎么设置画布大小
- 怎么引用three.js
- 怎么创建透视投影的相机
- 怎么创建场景
- 怎么创建直线并且将它们连接成三角形
- 怎么创建材质
- 怎么将直线添加到场景中
- 怎么创建渲染器
- 怎么创建动画

#### 需要的准备条件

- 代码编辑器，比如vim，notepad++等
- 支持webgl的浏览器，比如Google Chrome 9+, Firefox 4+, Opera 15+, Safari 5.1+, Internet Explorer 11 and Microsoft Edge等

#### 难易程度

- 中等

#### 教程内容
- 步骤1：html,css javascript代码整体结构，用于创建3D场景的代码是javascript语句，放在```<script>```里面。下面将详细讲解关键代码。
```
<html>
	<head>
		<title>Three js Cube</title>
		<style>
			body { margin: 0; }
			canvas { width: 100%; height: 100% }
		</style>
		<script src="http://threejs.org/build/three.min.js"></script>
	</head>
	<body>
	<script>
		// three js code
	</script>
	</body>
</html>
```

- 步骤2：怎么设置画布大小

```
canvas { width: 100%; height: 100% }
```

- 步骤3：怎么引用three.js

```
<script src="../js/three.min.js"></script>
```

- 步骤4：怎么创建透视投影的相机

```
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 500);
camera.position.set(0, 0, 100);
camera.lookAt(new THREE.Vector3(0, 0, 0));
```

- 步骤5：怎么创建场景

```
scene = new THREE.Scene();
```

- 步骤6：怎么创建直线并且将它们连接成三角形

```
material = new THREE.LineBasicMaterial({ color: 0xff00ff });
geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(-10, 0, 0));
geometry.vertices.push(new THREE.Vector3(0, 10, 0));
line = new THREE.Line(geometry, material);
scene.add(line);
		
material1 = new THREE.LineBasicMaterial({ color: 0x0000ff });
geometry1 = new THREE.Geometry();
geometry1.vertices.push(new THREE.Vector3(0, 10, 0));
geometry1.vertices.push(new THREE.Vector3(0, 0, 0));
line1 = new THREE.Line(geometry1, material1);
scene.add(line1);
		
material2 = new THREE.LineBasicMaterial({ color: 0x00ff00 });
geometry2 = new THREE.Geometry();
geometry2.vertices.push(new THREE.Vector3(0, 0, 0));
geometry2.vertices.push(new THREE.Vector3(-10, 0, 0));
line2 = new THREE.Line(geometry2, material2);
scene.add(line2);
```

- 步骤7：怎么创建材质

```
material = new THREE.LineBasicMaterial({ color: 0xff00ff });
material1 = new THREE.LineBasicMaterial({ color: 0xff00ff });
material2 = new THREE.LineBasicMaterial({ color: 0xff00ff });
```

- 步骤8：怎么将直线添加到场景中

```
scene.add(line);
scene.add(line1);
scene.add(line2);
```

- 步骤9：怎么创建渲染器

```
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);
```

- 步骤10：怎么创建动画

```
requestAnimationFrame( animate );
line.rotation.x += 0.01;
line.rotation.y += 0.02;
line1.rotation.x += 0.01;
line1.rotation.y += 0.02;
line2.rotation.x += 0.01;
line2.rotation.y += 0.02;
renderer.render( scene, camera );
```

- 完整代码如下：
---
```
<html>
	<head>
		<title>Three js Line</title>
		<style>
			body { margin: 0; }
			canvas { width: 100%; height: 100% }
		</style>
		<script src="../js/three.min.js"></script>
	</head>
	<body>
<script>
	var camera, scene, renderer;
	var geometry, geometry1, geometry2, material, material1, material2, line, line1, line2;

	init();
	animate();

	function init()
	{
		camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 500);
		camera.position.set(0, 0, 100);
		camera.lookAt(new THREE.Vector3(0, 0, 0));
		scene = new THREE.Scene();

		renderer = new THREE.WebGLRenderer();
		renderer.setSize(window.innerWidth, window.innerHeight);
		document.body.appendChild(renderer.domElement);
		renderer.render(scene, camera);
		
		material = new THREE.LineBasicMaterial({ color: 0xff00ff });
		geometry = new THREE.Geometry();
		geometry.vertices.push(new THREE.Vector3(-10, 0, 0));
		geometry.vertices.push(new THREE.Vector3(0, 10, 0));
		line = new THREE.Line(geometry, material);
		scene.add(line);
		
		material1 = new THREE.LineBasicMaterial({ color: 0x0000ff });
		geometry1 = new THREE.Geometry();
		geometry1.vertices.push(new THREE.Vector3(0, 10, 0));
		geometry1.vertices.push(new THREE.Vector3(0, 0, 0));
		line1 = new THREE.Line(geometry1, material1);
		scene.add(line1);
		
		material2 = new THREE.LineBasicMaterial({ color: 0x00ff00 });
		geometry2 = new THREE.Geometry();
		geometry2.vertices.push(new THREE.Vector3(0, 0, 0));
		geometry2.vertices.push(new THREE.Vector3(-10, 0, 0));
		line2 = new THREE.Line(geometry2, material2);
		scene.add(line2);
	}

	function animate()
	{
		requestAnimationFrame( animate );
		line.rotation.x += 0.01;
		line.rotation.y += 0.02;
		line1.rotation.x += 0.01;
		line1.rotation.y += 0.02;
		line2.rotation.x += 0.01;
		line2.rotation.y += 0.02;
		renderer.render( scene, camera );
	}
</script>
</body>
</html>
```

---
- 验证：http://azcax.org/threejs/threejs_line.html

<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@azcax/how-to-use-three-js-create-lines-and-triangle-or-three-js">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>
👍  , , , , , , , , , ,
properties (23)
authorazcax
permlinkhow-to-use-three-js-create-lines-and-triangle-or-three-js
categoryutopian-io
json_metadata{"community":"utopian","app":"utopian/1.0.0","format":"markdown","repository":{"id":576201,"name":"three.js","full_name":"mrdoob/three.js","html_url":"https://github.com/mrdoob/three.js","fork":false,"owner":{"login":"mrdoob"}},"pullRequests":[],"platform":"github","type":"tutorials","tags":["utopian-io","development","tutorial","webgl","javascript"],"links":["https://res.cloudinary.com/hpiynhbhq/image/upload/v1517196597/vzo0ozezb6fqscsnsej6.png"],"image":["https://res.cloudinary.com/hpiynhbhq/image/upload/v1517196597/vzo0ozezb6fqscsnsej6.png"],"moderator":{"account":"manishmike10","time":"2018-01-30T10:54:43.037Z","flagged":true,"reviewed":false,"pending":false}}
created2018-01-29 04:16:09
last_update2018-01-30 10:54:42
depth0
children1
last_payout2018-02-05 04:16:09
cashout_time1969-12-31 23:59:59
total_payout_value0.034 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length10,162
author_reputation97,519,363,597
root_title"How to use three.js create lines and triangle | 如何使用three.js创建直线并且将它们连接成三角形"
beneficiaries
0.
accountutopian.pay
weight2,500
max_accepted_payout1,000,000.000 HBD
percent_hbd0
post_id33,182,078
net_rshares6,100,572,705
author_curate_reward""
vote details (11)
@manishmike10 · 
Your contribution cannot be approved because it does not follow the [Utopian Rules](https://utopian.io/rules).
* No charts or shapes tutorials are acceptable. 
* They add no value to the community.
You can contact us on [Discord](https://discord.gg/uTyJkNm).
**[[utopian-moderator]](https://utopian.io/moderators)**
properties (22)
authormanishmike10
permlinkre-azcax-how-to-use-three-js-create-lines-and-triangle-or-three-js-20180130t105531195z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
created2018-01-30 10:55:33
last_update2018-01-30 10:55:33
depth1
children0
last_payout2018-02-06 10:55:33
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length315
author_reputation20,399,732,899,016
root_title"How to use three.js create lines and triangle | 如何使用three.js创建直线并且将它们连接成三角形"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id33,540,991
net_rshares0
Help/Feedback