<!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. Django组件-admin

    一. admin组件的使用 Django 提供了基于 web 的管理工具. Django 自动管理工具是 django.contrib 的一部分.你可以在项目的 settings.py 中的 INST ...

  2. 【AMAD】django-countries -- 为Django app的form提供country选项，为model提供CountryField

    动机 简介 个人评分 动机 有时候看一些数据库设计,国家数据会存在一个单独的表里面.这种方式读取数据库无疑又要加上一层join,很不划算. 简介 [django-countries]1解决的是: 不用 ...

  3. C++ min函数

    min 是c++标准库头文件中的一个重要的函数.它的功能是一个最小值的函数,比较两个数值的大小,返回他们的之间最小值. #include <algorithm> int a=2; int ...

  4. vue点击编辑按钮，内容变成input可以修改，也可以删除

    一.效果 图1 图2,点击报错之后,又变成图1的效果 二.使用到了element UI中的以下组件: <el-button> <el-input> 三.使用的关键点是vue中的 ...

  5. (转)利用Beautiful Soup去抓取p标签下class=jstest的内容

    1.利用Beautiful Soup去抓取p标签下class=jstest的内容 import io import sys import bs4 as bs import urllib.request ...

  6. Linux三剑客之grep常用参数详细总结

    三剑客grep总结 grep  : Linux三剑客老三      过滤需要的内容 参数: grep一般常用参数: -a :在二进制文件中,以文本文件的方式搜索数据 -c :计算找到 ’ 搜索字符串 ...

  7. vsphere6.7+Horizon7.8推送桌面遇到的一些问题

    系统环境 esxi6.7+vSphere6+Horizon7.8 VC环境为windows server 2016 standard 问题描述 vc安装 链接外部数据库找不到DSN 安装view co ...

  8. C++命名建议

    如果想要有效的管理一个稍微复杂一点的体系,针对其中事物的一套统一.带层次结构.清晰明了的命名准则就是必不可少而且非常好用的工具. 活跃在生物学.化学.军队.监狱.黑社会.恐怖组织等各个领域内的大量有识 ...

  9. 20190507-学习dubbo有感于梁飞

    “作为一名程序员,BAT肯定是大多数人都想进的,仿佛是一种情愫,就像学生时代的我们对清华北大的向往感觉一样.Dubbo团队中,其中主要负责人就是梁飞了,梁飞的经历还是蛮励志的.梁飞,花名虚极, 200 ...

  10. Ruby Rails学习中：User 模型，验证用户数据

    用户建模 一. User 模型 实现用户注册功能的第一步是,创建一个数据结构,用于存取用户的信息. 在 Rails 中,数据模型的默认数据结构叫模型(model,MVC 中的 M).Rails 为解决 ...