<!DOCTYPE html>

<html>

<head>

    <meta charset=utf-8>

    <title>My first three.js app</title>

    <style>

        body {

            margin: 0;

        }

        canvas {

            width: 100%;

            height: 100%

        }

    </style>

</head>

<body>

<script src="../static/three.js-master/build/three.js"></script>

<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( 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

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

geometry.vertices.push(new THREE.Vector3( 0, 10, 0) );

var line = new THREE.Line( geometry, material );  // 根据材料创建线条

scene.add( line );  // 将线条添加到场景内

renderer.render( scene, camera );  // 渲染器将场景和摄像机及线条渲染出来

</script>

</body>

</html>

附带three.js代码，点击下载

three.js之创建一条直线的更多相关文章

  1. Progress.js – 为页面上的任意对象创建进度条效果

    Progress.js 是一个 JavaScript 和 CSS3 的库,它帮助开发人员为网页上的每个对象创建和管理进度条效果.你可以设计自己的模板,进度条或者干脆定制. 您可以使用 Progress ...

  2. 使用GDI绘制一条直线

    这个是绘制一条直线的代码 private void Form1_Load(object sender, EventArgs e)        {            //一根笔 颜色  一张纸  ...

  3. JS画几何图形之一【直线】

    JS画图的想法经过大脑的时候,觉得有点意思,所以就实践了一番.JS画图为系列文章,本是讲点.线和面 先看样例:http://www.zhaojz.com.cn/demo/draw5.html 一.点 ...

  4. js cookie创建读取删除函数封装

    js cookie创建读取删除函数封装 一.总结 都是为了方便操作,这样弄了很方便 1.创建cookie的函数封装的作用:方便设置过期时间expire,方便设置键和值 2.查询cookie的数据封装的 ...

  5. 2018-7-31-C#-判断两条直线距离

    title author date CreateTime categories C# 判断两条直线距离 lindexi 2018-07-31 14:38:13 +0800 2018-05-08 10: ...

  6. 求空间内两条直线的最近距离以及最近点的坐标(C++)

    关键词:空间几何 用途:总有地方会用到吧 文章类型:C++函数展示 @Author:VShawn(singlex@foxmail.com) @Date:2016-11-19 @Lab: CvLab20 ...

  7. Bounce.js – 快速创建漂亮的 CSS3 动画效果

    Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...

  8. HTML <hr /> 标签 在页面中创建一条水平线

    一,定义和用法 <hr /> 标签在 HTML 页面中创建一条水平线. 水平分隔线(horizontal rule)可以在视觉上将文档分隔成各个部分. 二,HTML 与 XHTML 之间的 ...

  9. JS函数创建的具体过程

    JS函数创建的过程: 1.新建Object对象F,类型设置为Function 2.设置F.__proto__ = Function.prototype 3.设置F.constructor = Func ...

随机推荐

  1. Java泛型(8)：自限定&参数协变

    自限定 自限定将强制泛型当做自己的边界参数来使用.自限定所做的,就是要求在继承关系中,像下面这样使用这个类: class A extends SelfBounded<A> {} 它的意义是 ...

  2. Linux 操作系统常用命令

    常用命令详解 ls 常用选项: -a:列出所有文件,包括以.为开头的隐藏文件. -d ; 列出目录本身,并不包含目录里的内容. -h:和-l一起使用,文件大小容易阅读.文件的实际大小 ls -d/ro ...

  3. mysql对字段的操作

    增: alter table 表名 add 字段名+数据类型, add 字段名+数据类型; alter table 表名 add primary key 字段: "添加主键" 删: ...

  4. 【计算机视觉】背景建模之PBAS

    本文是根据M. Hofmann等人在2012年的IEEE Workshop on Change Detection上发表的"Background Segmentation with Feed ...

  5. 【计算机视觉】UCLA开源图像检测器

    UCLA (加州大学洛杉矶分校)发布了一个强大的图像检测软件的源码 ,该软件可以非常高速的检测每个图像的细节,例如可用于检测指纹和虹膜,或者用于自动驾驶.通过识别物体的边界进行提取.首先确定一个物体的 ...

  6. Rectangle

    题目描述 在 x 轴上有相互挨着的矩形, 这些矩形有一个边紧贴着 x 轴,现在给出每个矩形的长宽, 所有的矩形看作整体当作一个画布, 则可以在这个画布上画出的最大的矩形的面积是多少.(画出的矩形长和高 ...

  7. Opencv 简单视频播放器

    // C++ header and namespace #include <iostream> #include <string> #include <cstdlib&g ...

  8. PYTHON 100days学习笔记002：语言元素-数字变量与运算符

    参考文章: Python 变量类型 Python 运算符 Day02 - 语言元素 1. 指令和程序 计算机的硬件系统通常由五大部件构成,包括:运算器.控制器.存储器.输入设备和输出设备.其中,运算器 ...

  9. airflow的web任务管理

    ariflow里绿的代表都跑完了:红的表示有问题:点红的图标进去: 点tree view 红色表示那一天失败: 点进去看可以看log: 点clear则是重跑任务:

  10. [Comet OJ - Contest #7 D][52D 2417]机器学习题_斜率优化dp

    机器学习题 题目大意: 数据范围: 题解: 学长说是决策单调性? 直接斜率优化就好了嘛 首先发现的是,$A$和$B$的值必定是某两个$x$值. 那么我们就把,$y$的正负分成两个序列,$val1_i$ ...