<!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. iptable规则的执行顺序

    众所周知,iptable的中包含了各种各样的table和规则链条.这篇博文对规则链的执行顺序做一个简单的介绍. Chain OUTPUT (policy ACCEPT)target prot opt ...

  2. kubernetes/dashboard Creating sample user

    Creating sample user In this guide, we will find out how to create a new user using Service Account ...

  3. PHP学习（5）——字符串操作与POSIX正则

    一.字符串操作 1.字符串的格式化 1.1 干掉空格 trim()函数可以除去字符串开始位置和结束位置的空格,并将结果字符串返回. ltrim()函数可以除去字符串开始位置的空格. rtrim()函数 ...

  4. P1494 小Z的袜子 【普通莫队】

    我的第二道莫队题,对莫队又有了自己的看法. 在第一题的基础上之上,觉得莫队有个很关键的地方在于 莫队所维护的值是什么,怎么推出维护的公式来. 这道题就是这样,一开始还没自己推出公式来,也有几个坑点. ...

  5. 德州扑克AK打法攻略

    AK是所有德扑网游中最受争议的底牌,也是一副令人又爱又恨的底牌.<德州扑克培训大师>根据国内德州扑克网游特性,为大家制作了第一套AK打法攻略,希望所有玩家从今天开始能正确认识AK,发挥AK ...

  6. [转帖]SOCKS5代理与HTTP代理

    SOCKS5代理与HTTP代理 https://blog.csdn.net/watson2017/article/details/79897693 [1]什么是SOCKS5协议. SOCKS是一种网络 ...

  7. gitlab不能启动了

    gitlab意外停止后不能启动,执行gitlab-ctl start 提示全部启动失败. GitLab won’t start – runsv not running. Gitlab didn’t s ...

  8. 正则re模块--入门

    本文来源:https://www.cnblogs.com/dyfblog/p/5880728.html 对字符串操作 1.应用: 当我们爬取的东西在js文件中,比如我爬今日头条美女的图片时,它的图片u ...

  9. Vue--理解非prop特性

    所谓非 prop 特性,就是指它可以直接传入组件,而不需要定义相应的 prop. 尽管为组件定义明确的 prop 是推荐的传参方式,组件的作者却并不总能预见到组件被使用的场景.所以,组件可以接收任意传 ...

  10. 今天遇到了不能创建mysql函数

    今天用navicat 不能创建函数,查询了 MySQL函数不能创建,是未开启功能: mysql> show variables like '%func%'; +----------------- ...