<!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. cmake编译排除文件夹

    在CMakeLists.txt中,要对某些子文件夹全部进行编译则使用 add_subdirectory(examples) 那如果在examples文件夹中建立了某个目录如examples/venv, ...

  2. httpd配置Rewrite 301 302

    在系统做一些大的.比较耗时的发布的时候,往往需要停服很长时间,这期间有用户访问的话,就需要展示一个升级说明的页面,这个页面放在反向代理服务器中:反向代理服务器如httpd有请求URL重写模块,通过它可 ...

  3. PTA --- L1-006 连续因子

    题目地址 一个正整数 N 的因子中可能存在若干连续的数字.例如 630 可以分解为 3×5×6×7,其中 5.6.7 就是 3 个连续的数字.给定任一正整数 N,要求编写程序求出最长连续因子的个数,并 ...

  4. 爬取汽车之家新闻图片的python爬虫代码

    import requestsfrom bs4 import BeautifulSouprespone=requests.get('https://www.autohome.com.cn/news/' ...

  5. 数据结构与算法-stack

    栈的本质是一种线性表,特殊的一种线性表 基本概念 概念 栈是一种特殊的线性表 栈仅能在线性表的一端进行操作 栈顶(Top):允许操作的一端 栈底(Bottom):不允许操作的一端 stack是一种线性 ...

  6. SpringCloud学习（六）分布式配置中心(Spring Cloud Config)(Finchley版本)

    在上一篇文章讲述zuul的时候,已经提到过,使用配置服务来保存各个服务的配置文件.它就是Spring Cloud Config. 简介 在分布式系统中,由于服务数量巨多,为了方便服务配置文件统一管理, ...

  7. python -- TypeError: 'module' object is not callable

    文件: 代码: import pprintmessge = 'It was a bringht cold day in April,and the clocks were striking thrir ...

  8. 01-Hadoop概述及基础环境搭建

    1 hadoop概述 1.1 为什么会有大数据处理 传统模式已经满足不了大数据的增长 1)存储问题 传统数据库:存储亿级别的数据,需要高性能的服务器:并且解决不了本质问题:只能存结构化数据 大数据存储 ...

  9. Spring Cloud Feign接口返回流

    身无彩凤双飞翼,心有灵犀一点通. 服务提供者 @GetMapping("/{id}") public void queryJobInfoLogDetail(@PathVariabl ...

  10. 永久修改Putty设置

    在使用远程登录Putty时,会发现修改一些设置并且退出后发现自己之前改的设置不见了,可以通过保存设置解决 假设我要修改远程终端的背景颜色,选择系统颜色 勾选后,如果不保存下次登入时又要进行设置 点击D ...