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. Chrome 66 禁止声音自动播放

    声音无法自动播放一直在IOS/Android上面都是一个惯例, 桌面端的 Safari在2017年的11版本中也宣布禁止带有声音的多媒体自动播放, 紧接着2018年4月份Chrome发布的66版本也正 ...

  2. 错误：php70w-common conflicts with php-common-5.3.3-49.el6.i686

    记录一下  由于之前系统自带的php5.3.3没有卸载干净: 在执行phpize时报错说需要php-devel 然后yum -y install php-delel ; 然后就报错 错误:php70w ...

  3. PHP实现IP访问限制及提交次数的方法详解

    一.原理 提交次数是肯定要往数据库里写次数这个数据的,比如用户登陆,当用户出错时就忘数据库写入出错次数1,并且出错时间,再出错写2,当满比如5次时提示不允许再登陆,请明天再试,然后用DateDiff计 ...

  4. Typescript学习总结之类

    1. 类的定义和使用 class Student { name; say() { console.log(this.name + " saying"); } } var s1 = ...

  5. .NET设计模式 第二部分 创建型模式(3)—建造者模式（Builder Pattern）

    建造者模式(Builder Pattern) ——.NET设计模式系列之四 Terrylee,2005年12月17日 概述 在软件系统中,有时候面临着“一个复杂对象”的创建工作,其通常由各个部分的子对 ...

  6. [转载] C# DllImport用法和路径问题

    DllImport是System.Runtime.InteropServices命名空间下的一个属性类,其功能是提供从非托管DLL导出的函数的必要调用信息. DllImport属性应用于方法,要求最少 ...

  7. Weka训练模型的存取

    因为WEKA中所有分类器都实现了Serializable,所以只需要用java的ObjectOutputStream就可以实现了. /** * 存储model * * @param model * 训 ...

  8. WebGL和ThreeJs学习6--射线法确定3D空间中所选物体

    一.在 threejs 中如何确定下图3D空间中鼠标点击位置的 object 对象? 二.射线法确定步骤及代码 //Three.js提供一个射线类Raycaster来拾取场景里面的物体.更方便的使用鼠 ...

  9. 死磕!Windows下Apache+PHP+phpmyadmin的配置

    环境配置真的很烦很费时间,稍不小心就会出错,这是一个鸡肋体力劳动,耐心和忍耐少不了.这个资料已经非常详细了,其中变量和路径不是百分百吻合但是意思已经很清楚了.剩下的就是耐心的执行和琢磨了. 一.  A ...

  10. 黄聪：AngularJS中的$resource使用与Restful资源交互（转）

    原文:http://blog.csdn.net/he90227/article/details/50525836 1.AngularJS中的 $resource 这个服务可以创建一个资源对象,我们可以 ...