<!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. PJzhang:python基础进阶的10个疗程-one

    猫宁!!! 课程导学 北京理工大学 国家精品在线开放课程 零基础.大学水平 100行左右的python可以做很多事情 编程是基本技能,体会思维 时间成本和收益的关系 每周5个小时 https://py ...

  2. STL————vector的用法

    一.什么是vector? 向量(Vector)是一个封装了动态大小数组的顺序容器(Sequence Container).跟任意其它类型容器一样,它能够存放各种类型的对象.可以简单的认为,向量是一个能 ...

  3. 字符串——kmp

    目录 一.前言 二.思路 三.代码 一.前言 kmp算法是用于从文本串text的字串中,寻找含有的模板串pattern的数量/位置的算法. 例如,在文本串abcabcccabc中,模板串abc的数量有 ...

  4. 【机器学习】Matlab中实现QQ-plot的一个好工具gqqplot

    Matlab中实现QQ-plot的一个好工具gqqplot 26JUN June 26, 2013 这几天看了一下QQ-plot以及在Matlab中的实现,可是Matlab自带的qqplot函数不能满 ...

  5. C学习笔记-字符串

    对于C语言来说,字符串其实就是最后一个元素为'\0'的char数组 字符数组的初始化 字符数组常见的有两种初始化方式 char str[] = "hello"; 或者 char s ...

  6. css 左右固定宽度，中间自适应的三列布局

    float——浮动布局: 使用浮动,先渲染左右两个元素,分别让他们左右浮动,然后再渲染中间元素,设置它的margin左右边距分别为左右两个元素的宽度. <!DOCTYPE html> &l ...

  7. XSS练习平台- https://alf.nu/alert1

    https://alf.nu/alert1   参考:https://www.cnblogs.com/renzongxian/p/5617551.html   我目前的进度:https://alf.n ...

  8. spring boot 项目开发常用目录结构

    在spring boot开发中一些常用的目录划分 转载自https://blog.csdn.net/Auntvt/article/details/80381756: 一.代码层结构 根目录:net.c ...

  9. Codeforces Educational Codeforces Round 3 E. Minimum spanning tree for each edge　树上倍增

    E. Minimum spanning tree for each edge 题目连接: http://www.codeforces.com/contest/609/problem/E Descrip ...

  10. NOIP模拟赛 打铁的匠 题解

    [问题描述] Mark Douglas是一名优秀的锻造师.与他优秀的锻造水平不相符,他非常穷,以至于很多好刀都因为缺少素材缺少资金无法打造. Mark把他有能力锻造的所有n种刀建成了一棵锻造树,除了第 ...