<!DOCTYPE html>

<html>

<head>

    <meta charset=utf-8>

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

    <style>

        body {

            margin: 0;

        }

        canvas {

            width: 100%;

            height: 100%

        }

        div#canvas-frame {

            border: none;

            cursor: pointer;

            width: 100%;

            height: 600px;

            background-color: #EEEEEE;

        }

    </style>

</head>

<body>

<div id="canvas-frame"></div>

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

<script>

    var renderer;  // 渲染器, 声明变量

    function initThree() {

        renderer = new THREE.WebGLRenderer();  // 创建一个渲染器

        renderer.setSize(window.innerWidth, window.innerHeight);  // 设置宽度高度

        document.getElementById('canvas-frame').appendChild(renderer.domElement);  //添加到画布canvas-frame里面

        renderer.setClearColor(0xFFFFFF, 1.0);  // 设置背景色和透明度

    }

    var camera;  // 摄像机

    function initCamera() {

        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 500);  // 创建一个透视摄像机

        camera.position.set(0, 500, 0);  // 设置摄像机坐标

        camera.up.x = 0;

        camera.up.y = 0;

        camera.up.z = 1;

        camera.lookAt(0, 0, 0);

    }

    var scene;  // 场景

    function initScene() {

        scene = new THREE.Scene();  // 创建场景

    }

    var light;

    function initLight() {

        light = new THREE.DirectionalLight(0xFF0000, 1.0, 0);  // THREE.DirectionalLight平行光可以看作距离很远的光

        light.position.set(100, 100, 200);  // 坐标

        scene.add(light);  // 添加到场景中

    }

    function initObject() {

        var geometry = new THREE.Geometry();  // geometry为三维空间中的点集同点集闭合后的各个面的集合

        // 在x轴上定义两个点p1(-500,0,0)，p2(500,0,0)。

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

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

        // 思路：我们要画一个网格的坐标，那么我们就应该找到线的点。把网格虚拟成正方形，在正方形边界上找到几个等分点，用这些点两两连接，就能够画出整个网格来。

        for (var i = 0; i <= 8; i++) {

            // 这两个点决定了x轴上的一条线段，将这条线段复制20次，分别平行移动到z轴的不同位置，就能够形成一组平行的线段。

            // 同理，将p1p2这条线先围绕y轴旋转90度，然后再复制20份，平行于z轴移动到不同的位置，也能形成一组平行线。

            // 经过上面的步骤，就能够得到坐标网格了。

            var linex = new THREE.Line(geometry, new THREE.LineBasicMaterial({color: 0x000000, opacity: 0.2}));

            linex.position.z = (i * 50) - 200;

            scene.add(linex);

            var liney = new THREE.Line(geometry, new THREE.LineBasicMaterial({color: 0x000000, opacity: 0.2}));

            liney.position.x = (i * 50) - 200;

            liney.rotation.y = 90 * Math.PI / 180;  // 将线旋转90度

            scene.add(liney);

        }

    }

    function threeStart() {

        initThree();

        initCamera();

        initScene();

        initLight();

        initObject();

        renderer.clear();

        renderer.render(scene, camera);

    }

    threeStart();

</script>

</body>

</html>

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

three.js之创建坐标系网格的更多相关文章

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

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

  2. C#中如何创建PDF网格并插入图片

    这篇文章我将向大家演示如何以编程的方式在PDF文档中创建一个网格,并将图片插入特定的网格中. 网上有一些类似的解决方法,在这里我选择了一个免费版的PDF组件.安装控件后,创建新项目,添加安装目录下的d ...

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

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

  4. js动态创建及移除div的方法

    本文实例讲述了js动态创建及移除div的方法.分享给大家供大家参考.具体实现方法如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...

  5. 用JS动态创建登录表单，报了个小错误

    后来发现原来是: dvObj.style.border='#Red 1px sold'; 其中的Red多谢了一个‘#’, 但是奇怪的是在chrome和firefox都备有报错,但是在ie中报错了. 各 ...

  6. js动态创建样式: style 和 link

    js动态创建样式: style 和 link ie6 不能 document.createElement('style') 然后append到head标签里.所以就找到这样个好文章 有很多提供动态创建 ...

  7. js+jquery创建元素

    例:创建如下标签: <a id="baidu" class="link" name="baidu">这是一个链接</a&g ...

  8. UEditor js动态创建和textarea中渲染【原】

    UEditor动态创建和textarea中渲染 http://ueditor.baidu.com/website/examples/textareaDemo.html <!DOCTYPE> ...

  9. 雷林鹏分享：jQuery EasyUI 数据网格 - 创建属性网格

    jQuery EasyUI 数据网格 - 创建属性网格 属性网格(property grid)带有一个内置的 expand(展开)/collapse(合并) 按钮,可以简单地为行分组.您可以简单地创建 ...

随机推荐

  1. hostname -i 出现0.0.0.0解决

    [root@hostnametest4 ~]# hostname -i 0.0.0.0 原因:是因为四个节点中其中一个节点没有配置hosts解析,必须每个节点写全这四个ip,只要掉一个ip就会出现0. ...

  2. c/c++编码规范(1)--头文件

    最近工作稍微轻松一点,就再学习了一下编码规范.遂记些笔记,以便查阅. 这次学习的是Google 开源项目风格指南中文版,地址是:http://zh-google-styleguide.readthed ...

  3. 并查集 --cogs456 岛国

    题目链接:http://cogs.pro:8081/cogs/problem/problem.php?pid=pNyNQiqge 思路: 基础是并查集,将两个相邻的岛算作一个集合,每次若合并成功,则N ...

  4. 【FFMPEG】使用FFMPEG+H264实现RTP传输数据

    开发环境:WINDOWS7 32bitMINGWeclipse juno cdt1.首先你要编译好FFMPEG,a) 方法一:可以去官网下载源码,用MINGW编译(编译时记得支持H264,当然,事先得 ...

  5. JavaScript 3种内置对象

    前面我们学了对象,如何创建对象及使用对象. 内置对象不需要实例化,就可以使用. 可以通俗地理解,在内存里的东东是对象,也就是实例化好的.在磁盘里的东东是类,需要实例化才能使用.实例化后的东东在内存里. ...

  6. prometheus 监控jvm-tomcat

    1.prometheus的配置 - job_name: 'java01' #按照这个来分组 scrape_interval: 10s static_configs: - targets: ['192. ...

  7. springBoot整合Listener

    新建项目 这个是pom文件 <properties> <java.version>1.8</java.version> </properties> &l ...

  8. Centos7 安装Jenkins (rpm 方式)

    首先说明本教程基于jenkins 2.183,但是其他版本基本差不多,主要说一下其中比较坑的几点,做一个总结. 1.rpm 包的下载 从官网上下载rpm的速度简直让人不能忍受,所以千万不要去官网下载. ...

  9. （5.3.2）数据库迁移——SSIS包批量导出

    SSIS连接出错 原因 :    ssms 工具 不是 admin 权限 打开的  SSIS包批量导出代码 use msdb go IF OBJECT_ID('msdb.dbo.usp_ExportS ...

  10. sql sever 授予用户create table权限

    sql server2008的用户权限管理及其细致.此处我也不知道是表扬还是批评.所以经常会遇到各种“对不起您没有**权限”的问题. 本次遇到的问题机器常见.在尝试修改数据库结构时提示"没有 ...