How to use three.js build 3D scene,camera and a spinning cube | 如何使用three.js创建3D场景，相机以及一个旋转的方块 by azcax

View this thread on: hive.blog | peakd.com | ecency.com

utopian-io · @azcax · Jan 27 '18 (edited)

$23.79

How to use three.js build 3D scene,camera and a spinning cube | 如何使用three.js创建3D场景，相机以及一个旋转的方块

#### Summary:

The goal of this tutorial is to give a brief introduction to three.js. I will start by setting up a scene, camera and renderer, so that I can render the scene with camera and a spinning cube.

#### Result
![图片.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516862179/did1hjv0vehag0h1pktj.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 3D object
- how to create Material
- how to add 3D object 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>
```
html整体结构，创建3D场景的代码是js语句，所以关键代码是放在<script>里面。下面将详细讲解关键代码。

- step 2: how to set canvas with css

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

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

```
<script src="http://threejs.org/build/three.min.js"></script>
```

- step 4: how to create a Perspective Camera

```
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
camera.position.z = 1;
```

- step 5: how to create scene

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

- step 6: how to create 3D object

```
geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
```

- step 7: how to create Material

```
material = new THREE.MeshNormalMaterial();
mesh = new THREE.Mesh( geometry, material );
```

- step 8: how to add 3D object in scene

```
scene.add( mesh );
```

- step 9：how to create renderer

```
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
```

- step 10: how to create animation

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

- full source code：
---
```
<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>
	var camera, scene, renderer;
	var geometry, material, mesh;

	init();
	animate();

	function init()
	{
		camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
		camera.position.z = 1;
		scene = new THREE.Scene();
		geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
		material = new THREE.MeshNormalMaterial();
		mesh = new THREE.Mesh( geometry, material );
		scene.add( mesh );
		renderer = new THREE.WebGLRenderer( { antialias: true } );
		renderer.setSize( window.innerWidth, window.innerHeight );
		document.body.appendChild( renderer.domElement );
	}
	function animate()
	{
		requestAnimationFrame( animate );
		mesh.rotation.x += 0.01;
		mesh.rotation.y += 0.02;
		renderer.render( scene, camera );
	}
</script>
</body>
</html>
```

---
- verify：

copy&paste above full source code to editor，save it to HTML file，then load it into the browser that supports webgl. Enjoy!

---
# Below is the chinese version

#### 可以学到什么?

- html,css javascript代码整体结构
- 怎么设置画布大小
- 怎么引用three.js
- 怎么创建透视投影的相机
- 怎么创建场景
- 怎么场景3D几何体
- 怎么创建材质
- 怎么将3D几何体添加到场景中
- 怎么创建渲染器
- 怎么创建动画

#### 需要的准备条件

- 代码编辑器，比如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="http://threejs.org/build/three.min.js"></script>
```

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

```
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
camera.position.z = 1;
```

- 步骤5：怎么创建场景

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

- 步骤6：怎么场景3D几何体

```
geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
```

- 步骤7：怎么创建材质

```
material = new THREE.MeshNormalMaterial();
mesh = new THREE.Mesh( geometry, material );
```

- 步骤8：怎么将3D几何体添加到场景中

```
scene.add( mesh );
```

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

```
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
```

- 步骤10：怎么创建动画

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

- 完整代码如下：
---
```
<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>
	var camera, scene, renderer;
	var geometry, material, mesh;

	init();
	animate();

	function init()
	{
		camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
		camera.position.z = 1;
		scene = new THREE.Scene();
		geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
		material = new THREE.MeshNormalMaterial();
		mesh = new THREE.Mesh( geometry, material );
		scene.add( mesh );
		renderer = new THREE.WebGLRenderer( { antialias: true } );
		renderer.setSize( window.innerWidth, window.innerHeight );
		document.body.appendChild( renderer.domElement );
	}
	function animate()
	{
		requestAnimationFrame( animate );
		mesh.rotation.x += 0.01;
		mesh.rotation.y += 0.02;
		renderer.render( scene, camera );
	}
</script>
</body>
</html>
```

---
- 验证：
将上面完整的代码复制粘贴到编辑器中，保存为扩展名为html的文件，然后在支持webgl的浏览器中打开即可以看到旋转的方块。

👍 utopian-io, alanzheng, azcax, honge.yang, xiaodong, zhengxiaodong, steemlua, hao.zheng, xmlyan-luoli, dailystat, resteemd, marriyaarhi

properties (23)vote details (12)

voter	rshares	pct
marriyaarhi	50,409,982	100%
alanzheng	2,431,975,017	100%
azcax	615,696,472	100%
utopian-io	3,059,078,401,464	1.7%
xiaodong	246,042,605	100%
zhengxiaodong	246,031,846	100%
steemlua	245,909,250	100%
hao.zheng	122,901,037	100%
xmlyan-luoli	122,866,019	100%
honge.yang	614,472,505	100%
dailystat	122,814,982	100%
resteemd	122,814,875	100%

@jubi · Jan 25 '18 (edited)

$0.80

I noticed that your format is almost the same as me, even a certain content is the same.
I hope to contribute together in utopian, but do not want to be plagiarized. Otherwise I can only appeal through discord.
 我注意到你文章格式几乎和我一模一样，甚至部分内容直接没有修改。我希望我们可以一起在utopian 贡献内容，而不是抄袭别人。否则我会通过discord向mod们申诉。

👍 jubi

`author`	jubi
`permlink`	re-azcax-three-js-3d-or-how-to-use-three-js-build-3d-scene-camera-and-a-spinning-cube-20180125t082712249z
`category`	utopian-io
`json_metadata`	{"tags":["utopian-io"],"community":"utopian","app":"steemit/0.1"}
`created`	2018-01-25 08:29:30
`last_update`	2018-01-25 10:44:21
`depth`	1
`children`	5
`last_payout`	2018-02-01 08:29:30
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.607 HBD
`curator_payout_value`	0.197 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	295
`author_reputation`	82,406,494,254,467
`root_title`	"How to use three.js build 3D scene,camera and a spinning cube \| 如何使用three.js创建3D场景，相机以及一个旋转的方块"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	32,143,117
`net_rshares`	84,673,266,602
`author_curate_reward`	""

properties (23)vote details (1)

voter	weight	wgt%	rshares	pct	time
jubi	0 B		84,673,266,602	100%

@azcax · Jan 25 '18

@jubi, 谢谢阅读！
我们写的内容都完全不一样，怎么就算是抄袭您的了？
Utopian给出的样例格式都一样，如果我们都按照样例格式写的话，那都算互相抄袭吗？

properties (22)

`author`	azcax
`permlink`	re-jubi-re-azcax-three-js-3d-or-how-to-use-three-js-build-3d-scene-camera-and-a-spinning-cube-20180125t100218814z
`category`	utopian-io
`json_metadata`	{"tags":["utopian-io"],"users":["jubi"],"app":"steemit/0.1"}
`created`	2018-01-25 10:02:24
`last_update`	2018-01-25 10:02:24
`depth`	2
`children`	4
`last_payout`	2018-02-01 10:02:24
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	80
`author_reputation`	97,519,363,597
`root_title`	"How to use three.js build 3D scene,camera and a spinning cube \| 如何使用three.js创建3D场景，相机以及一个旋转的方块"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	32,160,508
`net_rshares`	0

@jubi · Jan 25 '18 (edited)

$0.81

且不谈格式，在教程里面 包括cn这块 就只有我 使用要点 这个词，同样也只有我 第一个要点就是代码结构。当然 我并不是说，我用了别人不能用。
但是，请你解释下这句话是怎么回事？
>html结构，创建3D场景的代码是js语句，所以关键代码是放在< script>里面。下面将详细讲解关键代码。

你只是在我原话的基础上加了 3D场景这几个字！

难道说，我们两人 合拍到连标点符号都一致？？

同样在写js库的也大有人在，为什么别人都能够做到完全和别人不一样。
而你几乎除了具体实现效果不同，包括排版，布局。甚至总结性语句都和我一致。我很难理解这点。
我并不是否定您的内容，但是有没有借鉴别人，你比我清楚。我仍然希望大家一起在utopian好好地贡献。我不希望有人打破这个该有规则。因为有可能会有若干小号做着和你一样的事。
这篇文章mod也并没有审核现在，我希望你能够修改出自己的风格，起码不应该存在和我一模一样的语句，这句话可不在官方模板里面。
为此，我愿意删除我所有的回复。

👍 jubi

`author`	jubi
`permlink`	re-azcax-re-jubi-re-azcax-three-js-3d-or-how-to-use-three-js-build-3d-scene-camera-and-a-spinning-cube-20180125t102252727z
`category`	utopian-io
`json_metadata`	{"tags":["utopian-io"],"app":"steemit/0.1"}
`created`	2018-01-25 10:25:30
`last_update`	2018-01-25 10:35:45
`depth`	3
`children`	3
`last_payout`	2018-02-01 10:25:30
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.609 HBD
`curator_payout_value`	0.199 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	438
`author_reputation`	82,406,494,254,467
`root_title`	"How to use three.js build 3D scene,camera and a spinning cube \| 如何使用three.js创建3D场景，相机以及一个旋转的方块"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	32,164,832
`net_rshares`	86,465,293,409
`author_curate_reward`	""

properties (23)vote details (1)

voter	weight	wgt%	rshares	pct	time
jubi	0 B		86,465,293,409	100%

3 replies

@sametceylan · Jan 27 '18

Thank you for the contribution. It has been approved.

You can contact us on [Discord](https://discord.gg/uTyJkNm).
**[[utopian-moderator]](https://utopian.io/moderators)**

properties (22)

`author`	sametceylan
`permlink`	re-azcax-three-js-3d-or-how-to-use-three-js-build-3d-scene-camera-and-a-spinning-cube-20180127t000500032z
`category`	utopian-io
`json_metadata`	{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
`created`	2018-01-27 00:02:18
`last_update`	2018-01-27 00:02:18
`depth`	1
`children`	0
`last_payout`	2018-02-03 00:02:18
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	172
`author_reputation`	13,315,067,546,486
`root_title`	"How to use three.js build 3D scene,camera and a spinning cube \| 如何使用three.js创建3D场景，相机以及一个旋转的方块"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	32,598,049
`net_rshares`	0

@utopian-io · Jan 27 '18

### Hey @azcax I am @utopian-io. I have just upvoted you!
#### Achievements
- You have less than 500 followers. Just gave you a gift to help you succeed!
- Seems like you contribute quite often. AMAZING!
#### Suggestions
- Contribute more often to get higher and higher rewards. I wish to see you often!
- Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck!
#### Get Noticed!
- Did you know project owners can manually vote with their own voting power or by voting power delegated to their projects? Ask the project owner to review your contributions!
#### Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. <a href="https://discord.gg/zTrEMqB">Participate on Discord</a>. Lets GROW TOGETHER!
- <a href="https://v2.steemconnect.com/sign/account-witness-vote?witness=utopian-io&approve=1">Vote for my Witness With SteemConnect</a>
- <a href="https://v2.steemconnect.com/sign/account-witness-proxy?proxy=utopian-io&approve=1">Proxy vote to Utopian Witness with SteemConnect</a>
- Or vote/proxy on <a href="https://steemit.com/~witnesses">Steemit Witnesses</a>

[![mooncryption-utopian-witness-gif](https://steemitimages.com/DQmYPUuQRptAqNBCQRwQjKWAqWU3zJkL3RXVUtEKVury8up/mooncryption-s-utopian-io-witness-gif.gif)](https://steemit.com/~witnesses)

**Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x**

properties (22)