<!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. 树莓派-Ubuntu Mate开启远程桌面xrdp服务

    树莓派3B+安装Ubuntu Mate后,开启远程桌面xrdp服务可以使用KRDC或mstsc远程登录访问,感觉比vnc要快一些: $ sudo apt install xrdp 安装后重启xrdp服 ...

  2. 算法题--Z字形变换

    题目描述 将一个给定字符串根据给定的行数,以从上往下.从左到右进行 Z 字形排列. 比如输入字符串为 "LEETCODEISHIRING" 行数为 3 时,排列如下: L C I ...

  3. FUZZ测试简介

    基本思想:利用黑盒方法,发送大量恶意/随机数据到被测试系统,通过监视系统运行过程中的异常,来发现应用程序中可能存在的安全问题.

  4. spark 1.6.0 安装与配置（spark1.6.0、Ubuntu14.04、hadoop2.6.0、scala2.10.6、jdk1.7）

    前几天刚着实研究spark,spark安装与配置是入门的关键,本人也是根据网上各位大神的教程,尝试配置,发现版本对应最为关键.现将自己的安装与配置过程介绍如下,如有兴趣的同学可以尝试安装.所谓工欲善其 ...

  5. readline安装

    wget -c ftp://ftp.gnu.org/gnu/readline/readline-6.2.tar.gz tar -zxvf readline-6.2.tar.gz cd readline ...

  6. 插入排序的Python代码实现

    是打扑克的时候了 那种按大小排序的扑克游戏 def insert_sort(arr): for i in range(1,len(arr)): for j in range(i,0,-1): #与左边 ...

  7. 【转帖】赤壁之战，曹操大败只因缺了Service Mesh

    赤壁之战,曹操大败只因缺了Service Mesh 本文作者把微服务向 Service Mesh 的进化融入到了三国故事中,妙趣横生.故事比较长,大家慢慢看,精彩的在后边. http://develo ...

  8. 【Python】【demo实验28】【练习实例】【递归函数练习】

    原题: 有5个人坐在一起,问第五个人多少岁?他说比第4个人大2岁.问第4个人岁数,他说比第3个人大2岁.问第三个人,又说比第2人大两岁.问第2个人,说比第一个人大两岁.最后问第一个人,他说是10岁.请 ...

  9. 详解mysql复制机制--异步复制，半同步复制和并行复制

    图4 那么如何并行化,并行IO线程,还是并行SQL线程?其实两方面都可以并行,但是并行SQL线程的收益更大,因为SQL线程做的事情更多(解析,执行).并行IO线程,可以将从Master拉取和写Rela ...

  10. 【Life】 今天的思考

    今天一个实习生来问我问题,他要用python操作outlook发送邮件,代码是从网上找的. 在其他人的电脑上可以成功运行,但在他的电脑上就失败. 处理过程 (1)我查看了他method里的代码, 发现 ...