Three js Cube

#### 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 ``` Three js Cube ``` - step 2: how to set canvas with css ``` canvas { width: 100%; height: 100% } ``` - step 3: how to rerfer to three.js library ``` ``` - 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： --- ``` Three js Line ``` --- - 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语句，放在``` ``` - 步骤2：怎么设置画布大小 ``` canvas { width: 100%; height: 100% } ``` - 步骤3：怎么引用three.js ``` ``` - 步骤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 ); ``` - 完整代码如下： --- ``` Three js Line ``` --- - 验证：http://azcax.org/threejs/threejs_line.html

Posted on Utopian.io - Rewarding Open Source Contributors

RE: Reflection Hunters Contest~ Round 14