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

3년 전

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

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!
STEEMKR.COM IS SPONSORED BY
ADVERTISEMENT
Sort Order:  trending

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]