<!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. 【JVM学习笔记】ServiceLoader类

    ServiceLoader.load方法的函数原型如下 public static <S> ServiceLoader<S> load(Class<S> servi ...

  2. DES算法概述

    DES全称为Data Encryption Standard,即数据加密标准.1997年数据加密标准DES正式公布,其分组长度为64比特,密钥长度为64比特,其中8比特为奇偶校验位,所以实际长度为56 ...

  3. CentOS7怎么安装图形界面

    step1: 进入下载页,选择阿里云站点进行下载 Actual  Country 国内资源                   Nearby Countries  周边国家资源 阿里云站点:http: ...

  4. 【并行计算-CUDA开发】CUDA bank conflict in shared memory

    http://hi.baidu.com/pengkuny/item/c8070b388d75d481b611db7a 以前以为 shared memory 是一个万能的 L1 cache,速度很快,只 ...

  5. 在docker容器下安装airflow

    本人的环境是基于centos7下来安装的 一.安装docker  下载docker安装包,下载地址:https://download.docker.com/linux/static/stable/x8 ...

  6. IDEA安装Git

    1.下载Git 官方地址为:https://git-scm.com/download/win 2.下载完之后,双击安装 3.选择安装目录 4.选择组件 5.开始菜单目录名设置 6.选择使用命令行环境 ...

  7. 【Python】【demo实验20】【练习实例】【寻找“完数”】

    原题: 一个数如果恰好等于它的因子之和,这个数就称为"完数".例如6=1+2+3.编程找出1000以内的所有完数. 我的代码: #!/usr/bin/python # encodi ...

  8. Vue--理解非prop特性

    所谓非 prop 特性,就是指它可以直接传入组件,而不需要定义相应的 prop. 尽管为组件定义明确的 prop 是推荐的传参方式,组件的作者却并不总能预见到组件被使用的场景.所以,组件可以接收任意传 ...

  9. Number of Containers ZOJ - 3175（数论题）

    Problem Description For two integers m and k, k is said to be a container of m if k is divisible by  ...

  10. PAT B1024/A1073 科学计数法

    书中AC代码 #include <cstdio> #include <cstring> #include <iostream> #include <cmath ...