<!DOCTYPE html>

<html>

<head>

    <title></title>

    <script src="https://cdn.bootcss.com/three.js/r67/three.js"></script>

    <style>

        body {

            margin: 0;

            overflow: hidden;

        }

    </style>

</head>

<body>

<div id="WebGL-output">

</div>

<script type="text/javascript">

    function init() {

        // 创建场景

        var scene = new THREE.Scene();

        // 创建相机

        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

        // 创建渲染器

        var renderer = new THREE.WebGLRenderer();

        renderer.setClearColorHex();

        renderer.setClearColor(new THREE.Color(0xEEEEEE));

        renderer.setSize(window.innerWidth, window.innerHeight);

        //辅助线

        var axes = new THREE.AxisHelper(20);

        scene.add(axes);

        // 相机坐标设置

        camera.position.x = -30;

        camera.position.y = 40;

        camera.position.z = 30;

        camera.lookAt(scene.position);

        // 添加到DOM元素里面

        document.getElementById("WebGL-output").appendChild(renderer.domElement);

        // 渲染场景

        renderer.render(scene, camera);

    }

    window.onload = init;

</script>

</body>

</html>

X轴是红色. Y轴是绿色. Z轴是蓝色

02-THREE.JS 辅助线使用的更多相关文章

  1. 02: vue.js常用指令

    目录:Vue其他篇 01: vue.js安装 02: vue.js常用指令 目录: 1.1 vuejs简介 1.2 选择器:根据id.class等查找 1.3 静态绑定数据 data 1.4 插值 { ...

  2. 02.lib-v1.js

    /* Date: 2014-07-29 4:06:07 [PM] */ function StringBuilder() { this.strings = new Array, this.length ...

  3. JavaWEB开发02——CSS&JS

    今日目标 使用CSS完成网站首页的优化 使用CSS完成网站注册页面的优化 使用JS完成简单的数据校验 使用JS完成图片轮播效果 教学目标: 了解CSS的概念 了解CSS的引入方式 了解CSS的基本用法 ...

  4. JS 模块化 - 02 Common JS 模块化规范

    1 Common JS 介绍 Common JS 是模块化规范之一.每个文件都是一个作用域,文件里面定义的变量/函数都是私有的,对其他模块不可见.Common JS 规范在 Node 端和浏览器端有不 ...

  5. 2016.02.17 JS DOM编程艺术 第四五六章

    看完这三章内容,集中精力,加快速度.

  6. vue.js及项目实战[笔记]— 02 vue.js基础

    一. 基础 1. 注册全局组件 应用场景:多出使用的公共性能组件,就可以注册成全局组件,减少冗余代码 全局APIVue.component('组件名','组件对象') 2.附加功能:过滤器&监 ...

  7. 02 Node.js学习笔记之http服务

    在Node中可以非常轻松的构建一个Web服务器,在Node中提供了一个http模块,这个模块主要功能就是帮助你创建一个Web服务器. 创建步骤: //1.加载http模块 var http=requi ...

  8. JavaScript学习02（js快速入门）

    快速入门 基本语法 JavaScript的语法和Java的语法类似,每个语句以;结束,语句块用{...}.但是JavaScrip并不强制要求在每个语句的结尾加;,浏览器中负责执行JavaScript代 ...

  9. js上课笔记

    Html 结构化CSS 样式JavaScript 行为交互01.JavaScript基础02.JavaScript操作BOM对象03.JavaScript操作DOM对象 *****04.JavaScr ...

随机推荐

  1. Spring 单例

    我们知道 Web 容器本身就是多线程的,Web 容器为一个 Http 请求创建一个独立的线程,所以由此请求所牵涉到的 Spring 容器中的 Bean 也是运行于多线程的环境下.在绝大多数情况下,Sp ...

  2. microsoft cl.exe 编译器

    cl.exe是visual stdio 内置的编译器,visual stdio包含各种功能,有些功能可能这辈子都用不到,体积庞大,如果是 开发比较大或者有图形的项目,vs是首选.更多情况时更喜欢使用文 ...

  3. hibernate 操作 Postgresql 数据库报 operator does not exist: integer = character varying

    网上的说法如下: Java开发Postgresql 数据库兼容应用的问题,与Oracle有一些不同: Java类型映射数据库类型的不同,Oracle jdbc驱动程序处理Java String类型可正 ...

  4. HackerRank - lonely-integer 【水】

    题意 给出一系列数字,输出那个出现次数为奇数次的数字 思路 用MAP标记一下,在输入的时候判断一下 之前有没有输入过,如果有,就抹掉 最后剩下的那个 就是出现次数为奇数的 或者可以用 位运算 AC代码 ...

  5. 跟踪 twisted 里deferred 的Callback

    twisted 提供了 deferred 机制,而关键点就是回调.通过查看deferred 源码 (version 8.2.0)我们可以 看到 deferred的addCallback是怎么工作的,以 ...

  6. redis操作封装整理

    <?php /** * redis操作类 * 说明,任何为false的串,存在redis中都是空串. * 只有在key不存在时,才会返回false. * 这点可用于防止缓存穿透 * */ cla ...

  7. 【鸟哥的Linux私房菜】笔记2

    Linux的应用 学习资源整理 安装记录 >< 1.Linux的应用: 网络服务器 数据库 学术机构的高效运算任务 嵌入式系统 ... 2.挂载与磁盘分区 学习资源整理 学习 1.书上的网 ...

  8. java配置好jdk-bash: /usr/bin/java: No such file or directory

    在 Linux 系统中安装 JDK 环境,配置好环境变量后,输入 java.javac 或者 java -version 等时,都提示如下错误: -bash: /usr/local/java/bin/ ...

  9. 摊铺机基本参数介绍(三一重工SSP220C-5)

    三一重工SSP220C-5稳定土摊铺机参数 SSP系列稳定土摊铺机SSP220C-5 动力强劲162kw 动力充分满足摊铺机各种工况下动力需求 高效任何工况,确保摊铺能力大于900t/h,行业内绝无仅 ...

  10. 恢复性训练day1

    DP: 0/1背包一个常见的错误是没有cmax(f[i][j],f[i-1][j]) 0/1背包的拓展中有转移式的变形,以及无限数量背包,分组背包等. 可化为背包问题的一般不会太难. 数组开小,出现大 ...