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. LOJ 2553 「CTSC2018」暴力写挂——边分治+虚树

    题目:https://loj.ac/problem/2553 第一棵树上的贡献就是链并,转化成 ( dep[ x ] + dep[ y ] + dis( x, y ) ) / 2 ,就可以在第一棵树上 ...

  2. 一个简单的PHP短信群发

    function bulksms(){ ignore_user_abort();//关掉浏览器,PHP脚本也可以继续执行. set_time_limit(0);// 通过set_time_limit( ...

  3. Requests+正则表达式爬取猫眼电影

    目标 提取出猫眼电影TOP100的电影名称.时间.评分.图片等信息,提取站点的URL为http://maoyan.com/board/4,提取的结果以文本的形式保存下来. 准备工作 请安装好reque ...

  4. 利用VMware虚拟机安装CentOS7

    CentOS7镜像下载:http://isoredirect.centos.org/centos/7/isos/x86_64/CentOS-7-x86_64-DVD-1804.iso VMware虚拟 ...

  5. java.lang.IllegalArgumentException: URLDecoder: Illegal hex characters in escape (%) pattern - For input string: " 0"

    value = URLDecoder.decode(request.getParameter(paraName), "UTF-8"); 前端用了 encodeURI 来编码参数,后 ...

  6. webGL之three.js入门3--材料篇

    这几天在看李鹏程翻译的[美]Jos Dirksen的<Three.js开发指南>,看到第八章了,现在来总结一下threejs中材料的相关知识.顺带也看完了上海交大的张雯莉出的<thr ...

  7. Azure ARM (22) 使用Azure PowerShell创建Azure RM VM

    <Windows Azure Platform 系列文章目录> 在Azure China获得VM Image,可以执行下面的脚本. Get-AzureRmVMImagePublisher ...

  8. 黄聪：ffmpeg参数说明（转载）

    ffmpeg.exe -i F:\闪客之家\闪客之歌.mp3 -ab 56 -ar 22050 -b 500 -r 15 -s 320x240 f:\11.flv ffmpeg -i F:\01.wm ...

  9. 黄聪：实用WordPress SQL查询方法

    为所有文章和页面添加自定义字段 这段代码可以为WordPress数据库内所有文章和页面添加一个自定义字段. 你需要做的就是把代码中的‘UniversalCutomField‘替换成你需要的文字,然后把 ...

  10. 用Matlab进行部分分式展开

    [r p k]=residue[num,den] 例如H(s)=(2s3+5s2+3s+6)/(s3+6s2+11s+6) num=[2 5 3 6]; den=[1 6 11 6]; [r p k] ...