<!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系列】使用JavaScript实现网站访问次数统计代码

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[JAVA系列]使用JavaScript实现网站 ...

  2. k8s 工具集

    Volcano 资源调度器 apollo 配置中心 spinnaker 持续部署系统 jaeger 分布式跟踪系统.它用于监视和诊断基于微服务的分布式系统,包括: 分布式上下文传播 分布式交易监控 根 ...

  3. ValueError: Object arrays cannot be loaded when allow_pickle=False

    错误ValueError: Object arrays cannot be loaded when allow_pickle=False的解决     numpy最新版1.17以上版本与其他包不兼容问 ...

  4. C#对IQueryable<T>、IEnumerable<T>的扩展方法

    #region IQueryable<T>的扩展方法 #region 根据第三方条件是否为真是否执行指定条件的查询 /// <summary> /// 根据第三方条件是否为真是 ...

  5. LESSON 6- Quantization

    如果输入本身就是离散的(比如text, computer files…), 对于这种discrete sources不需要量化可以直接进行离散信源编码. 如果输入是waveform(比如声音),取样为 ...

  6. input框改变默认样式

      input[type="radio"] { width: 2rem; height: 2rem; -webkit-appearance: none; /*清除复选框默认样式*/ ...

  7. windows下安装和配置SNMP

    window snmp服务开启及测试 转自:https://blog.csdn.net/qq_33314107/article/details/80031446 一 安装 二 开启服务 Linux下安 ...

  8. 一文搞懂 Java 中的枚举，写得非常好！

    知识点 概念 enum的全称为 enumeration, 是 JDK 1.5 中引入的新特性. 在Java中,被 enum关键字修饰的类型就是枚举类型.形式如下: enum Color { RED, ...

  9. 【记录】看见的一些很好的博客x存一下

    [字符串] AC自动机:https://www.cnblogs.com/cjyyb/p/7196308.html

  10. PAT A1019 General Palindromic Number (20 分)

    AC代码 #include <cstdio> const int max_n = 1000; long long ans[max_n]; int num = 0; void change( ...