Summary:
In this tutorial I will introduce how to create scene, camera and renderer, and 3 lines connected to a spinning triangle.
Result
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>
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>
Posted on Utopian.io - Rewarding Open Source Contributors