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

in utopian-io •  7 years ago  (edited)

Summary:

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

Result

图片.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>

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

utopian-io development tutorial webgl javascript
7 years ago by

Downvoting a post can decrease pending rewards and make it less visible. Common reasons:

  • Disagreement on rewards
  • Fraud or plagiarism
  • Hate speech or trolling
  • Miscategorized content or spam

Submit
$0.03
  • Past Payouts $0.03
  • - Author $0.03
  • - Curators $0.00
11 votes
1
Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  
  • Trending
    • [-]
      ·  7 years ago 

    Your contribution cannot be approved because it does not follow the Utopian Rules.

    • No charts or shapes tutorials are acceptable.
    • They add no value to the community.
      You can contact us on Discord.
      [utopian-moderator]

    Downvoting a post can decrease pending rewards and make it less visible. Common reasons:

    • Disagreement on rewards
    • Fraud or plagiarism
    • Hate speech or trolling
    • Miscategorized content or spam

    Submit
    $0.00