<!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. DS18b20温度传感器基础使用

    认识管脚 认识唯一标示的64位地址序列号 寄存器数据译码成温度值(下面只针对12位转化的,还有9..10等其他位的转化方式,不同位的转化,其精度也不同) 传感器存储器 配置寄存器使用说明 DS18b2 ...

  2. Python 清华镜像设置

    大家在通过pip 或conda 下载一些很大的第三方库时是不是有一种等到坟头的草都三尺高了,还没下载完的感觉,而且大的第三方库长时间下载,可能会导致超时自动中断下载,感谢清华的大佬们 临时使用: pi ...

  3. 图表：WebChartControl

    #region 画统计图 /// <summary> /// 画统计图 /// </summary> private void LoadWebChartControl() { ...

  4. 面试总结 | 百度 NLP 实习生

    1. 项目简历:主要体现和招聘要求相关的工作,简历要精简,不要给过多冗余信息.对于每个项目,自己做过的工作,里面用到的方法,要很清楚,工作的motivation.意义等也要清楚. 这次面试中我的问题: ...

  5. linux 静态库 ar命令用法

    当我们的程序中有经常使用的模块,而且这种模块在其他程序中也会用到,这时按照软件重用的思想,我们应该将它们生成库,使得以后编程可以减少开发代码量.这里介绍命令ar,用来对库操作. 1.ar基本用法 ar ...

  6. python列表一

    1.列表数据类型 列表是一个值,它包含多个值构成,也可包含其他列表,其内的表项用逗号分隔 列表值:作为一个值可以保存在变量中,或传递给函数,像所有其他值一样.  #不是指括号内的值 表项:列表中的值, ...

  7. STL map 常见用法详解

    <算法笔记>学习笔记 map 常见用法详解 map翻译为映射,也是常用的STL容器 map可以将任何基本类型(包括STL容器)映射到任何基本类型(包括STL容器) 1. map 的定义 / ...

  8. 同一台服务器请求easyswoole的一个websocket接口报错

    求助大神啊!file_get_contents报这个错:failed to open stream: Connection timed out换成curl又报这个错:couldn't connect ...

  9. spark的安装步骤

    官网:http://spark.apache.org/downloads.html 安装:tar -zxvf spark-2.4.3-bin-hadoop2.7.tgz#配置环境变量(vim ~/.b ...

  10. Vuex是什么?

    记得去年公司招聘前端工程师的时候,我要负责准备面试题去考验面试者,让我记忆深刻的有一件事,我看大多数面试者简历上都写了熟练掌握Vuex,然而当我问起的时候,大部分回答都支支吾吾,解释不清,而当我提起与 ...