index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script src="js/three.min.js"></script>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            /*background-color: blue;*/
        }
    </style>
</head>
<body>
<canvas></canvas>
</body>
<script src="js/chapter2.1.js"></script>
</html>

chapter2.1.js

1、步骤概述：初始化渲染器 > 初始化相机 > 初始化场景 > 建立几何图形并添加到场景中 > 渲染

function threeStart() {
    initThree();
    initCamera();
    initScene();
    initObject();
    renderer.clear();
    renderer.render(scene, camera);
}
threeStart();

2、初始化渲染器

var canvas = document.querySelector("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var renderer;
function initThree() {
    renderer = new THREE.WebGLRenderer({
        canvas : canvas,
        antialias : true
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0xffffff, 1);
}

3、初始化相机

var camera;
function initCamera() {
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.x = 0;
    camera.position.y = 0;
    camera.position.z = 1000;
    camera.up.x = 0;
    camera.up.y = 1;
    camera.up.z = 0;
    camera.lookAt(0, 0, 0);
}

4、初始化场景

var scene;
function initScene () {
    scene = new THREE.Scene();
}

5、生成几何图行并添加到场景中

var line;
function initObject() {
    //定义两个顶点
    var p1 = new THREE.Vector3(-100, -100, 0);
    var p2 = new THREE.Vector3(100, 100, 0);

    var geometry = new THREE.Geometry();
    var material = new THREE.LineBasicMaterial({vertexColors:THREE.VertexColors });
    geometry.vertices.push(p1);
    geometry.vertices.push(p2);

    var color1 = new THREE.Color( 0x444444 ), color2 = new THREE.Color( 0xFF0000 );
    geometry.colors.push(color1, color2);
    line = new THREE.Line(geometry, material, THREE.LineSegments);
    scene.add(line);
}

执行效果：

因为实例化材质的时候，用了vertexColors:THREE.VertexColors参数，因此直线的颜色是根据顶点的颜色渐变的。

6、直线进阶：网格线

var canvas = document.body.querySelector("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var renderer;

function initThree() {
    renderer = new THREE.WebGLRenderer({
        canvas: canvas,
        antialias: true
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0xFFF000, 1.0);
}

var camera;

function initCamera() {
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100000);
    camera.position.x = 0;
    camera.position.y = 0;
    camera.position.z = 1000;
    camera.up.x = 0;
    camera.up.y = 1;
    camera.up.z = 0;
    camera.lookAt(0, 0, 0);
}

var scene;

function initScene() {
    scene = new THREE.Scene();
}

var light;
function initLight() {
    light = new THREE.DirectionalLight(0xFF0000, 1.0, 0);
    light.position.set(10, 10, 20);
    scene.add(light);
}

var cube;

function initObject() {
    var geometry = new THREE.Geometry();
    geometry.vertices.push(new THREE.Vector3(-500, 0, 0));
    geometry.vertices.push(new THREE.Vector3(500, 0, 0));

    for (var i = 0; i <= 20; i++) {
        var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({color: 0x000000, opacity: 0.2}));
        line.position.y = (i * 50) - 500;
        scene.add(line);

        var line2 = new THREE.Line(geometry, new THREE.LineBasicMaterial({color: 0x000000, opacity: 0.2}));
        line2.position.x = (i * 50) - 500;
        line2.rotation.z = 90 * Math.PI / 180;
        scene.add(line2);
    }
}

function threeStart() {
    initThree();
    initCamera();
    initScene();
    initLight();
    initObject();
    renderer.clear();
    renderer.render(scene, camera);
}
threeStart();

three.js学习：三维空间下的直线的更多相关文章

  1. Three.js 学习笔记(1)--坐标体系和旋转

    前言 JavaScript 3D library The aim of the project is to create an easy to use, lightweight, 3D library ...

  2. 【温故知新】——BABYLON.js学习之路·前辈经验（二）

    前言:在上一篇随笔BABYLON.js学习之路·前辈经验(一)中回顾了组内同事们长时间在Babylon开发实践中的总结出的学习之路和经验,这一篇主要对开发中常见的一些功能点做一个梳理,这里只作为温故知 ...

  3. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  4. 【Knockout.js 学习体验之旅】（3）模板绑定

    本文是[Knockout.js 学习体验之旅]系列文章的第3篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...

  5. 【Knockout.js 学习体验之旅】（2）花式捆绑

    本文是[Knockout.js 学习体验之旅]系列文章的第2篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...

  6. 【Knockout.js 学习体验之旅】（1）ko初体验

    前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...

  7. Android学习——windows下搭建NDK_r9环境

    1. NDK(Native Development Kit) 1.1 NDK简介 Android NDK是一套允许开发人员使用本地代码(如C/C++)进行Android APP功能开发的工具,通过这个 ...

  8. Vue.js学习笔记（2）vue-router

    vue中vue-router的使用:

  9. 【入门必备】最佳的 Node.js 学习教程和资料书籍

    Web 开发人员对 Node.js 的关注日益增多,更多的公司和开发者开始尝试使用 Node.js 来实现一些对实时性要求高,I/O密集型的业务.这篇文章中,我们整理了一批优秀的资源,你可以得到所有你 ...

随机推荐

  1. MySQL 中，\g和\G的作用

    MySQL 中,\g和\G的作用: \g 的作用是 go (\g) Send command to mysql server. \G 的作用是将查询到的结果,每行显示一个字段和字段值,方便查看 ego ...

  2. babel-loader和webpack UglifyJS一起使用时console的问题

    一起使用babel-loader和webpack UglifyJS时,babel会优先处理一遍代码,编译后的代码才进入webpack进行打包和优化操作. 出处:https://www.tangshua ...

  3. STM32的SPI2操作Flash

    关于STM32F107的SPI标志 SPI_I2S_FLAG_BSY和SPI_I2S_FLAG_TXE的疑问  http://www.openedv.com/posts/list/23579.htm ...

  4. java-普通类文件@Autowired自动注入为null

    @Autowired注解在非Controller中注入为null 1.配置文件(类文件所在的包) <context:component-scan base-package="net.n ...

  5. hanlp源码解析之中文分词算法详解

    词图 词图指的是句子中所有词可能构成的图.如果一个词A的下一个词可能是B的话,那么A和B之间具有一条路径E(A,B).一个词可能有多个后续,同时也可能有多个前驱,它们构成的图我称作词图. 需要稀疏2维 ...

  6. Vivado约束文件（XDC）的探究(1)

    Vivado约束文件(XDC)的探究(1) 工程建好之后会出现xdc文件: 注意:active 和 target 生成的约束文件如下:

  7. 阅读<All Digital VCXO Replacement for Gigabit Transceiver Applications>笔记（2）---XAPP589

    阅读<All Digital VCXO Replacement for Gigabit Transceiver Applications>笔记(2)---XAPP589 1. 2. 3. ...

  8. [转CSDN多篇文章]WEB 3D SVG CAD 矢量 几种实现方案

    WEB 3D SVG CAD 矢量 几种实现方案 原创 2014年10月24日 08:34:11 标签: WEB3D / CADSVG / 矢量 2665 一.全部自己开发,从底层开始 VML+SVG ...

  9. Python3.6+Scrapy爬取知名技术文章网站

    爬取分析 伯乐在线已经提供了所有文章的接口,还有下一页的接口,所有我们可以直接爬取一页,再翻页爬. 环境搭建 Windows下安装Python: http://www.cnblogs.com/0bug ...

  10. 【jdk】使用wget下载jdk8

    因为在oracle官网下载jdk需要 如果直接在linux中使用 wget命令下载,实际下载是一个html文件,所以需要通过一下命令 wget --no-check-certificate --no- ...