Drawing lines

最新推荐文章于 2020-02-10 22:49:21 发布

GLJK24

最新推荐文章于 2020-02-10 22:49:21 发布

阅读量421

点赞数

分类专栏： three.js 文章标签： three-js

three.js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

现在让我们来画一条线，而不是wireframe Mesh。首先我们要创建好scene，render，camera（请参考Creating a scene page这一章节）。
以下是我们要用到的代码

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var 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));

var scene = new Three.Scene();

接下来我们该定义material 了。使用 LineBasicMaterial 或者 LineDashedMaterial.

// create a blue LineBasicMaterial
var material = new THREE.LineBasicMaterial({color: 0x0000ff});

定义好material之后，我们需要有顶点的Geometry 或者 BufferGeometry（推荐使用BufferGeometry，因为它的性能比较好。但是在简单，我们在例子中使用Geometry）。

var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(-10, 0, 0));
geometry.vertices.push(new THREE.Vector3(0, 10, 0));
geometry.vertices.push(new THREE.Vector3(10, 0, 0));

需要注意的是，点是在两个连续的顶点之间绘制，而不是第一个和最后一个点之间（线不用关闭）。
现在我们有了绘制两条线的顶点和一个material，我们可以用它来绘制一条线。

var line = new THREE.Line(geometry, material);

现在所有需要做的就是调用render显示在scene。

scene.add(line);
renderer.render(scene, camera);

你现在应该可以看到由一个两条蓝线组成的向上指向的箭头。

完整代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My first three.js app</title>
  <script src="./js/three.js"></script>
  <style>
    body { margin: 0;}
    canvas { width: 100%;height: 100%; }
  </style>
</head>
<body>
  <script>
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    var 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));

    var scene = new THREE.Scene();

    // create a blue LineBasicMaterial
    var material = new THREE.LineBasicMaterial({color: 0x0000ff});

    var geometry = new THREE.Geometry();
    geometry.vertices.push(new THREE.Vector3(-10, 0, 0));
    geometry.vertices.push(new THREE.Vector3(0, 10, 0));
    geometry.vertices.push(new THREE.Vector3(10, 0, 0));
    var line = new THREE.Line(geometry, material);

    scene.add(line);
    renderer.render(scene, camera);
  </script>
</body>
</html>