<!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. Ubuntu14.04下Nginx反向代理Odoo域名

    安装nginx sudo apt-get install -y nginx 修改配置文件 vi /etc/nginx/nginx.conf #注释掉下面这行代码 #include /etc/nginx ...

  2. boost之字符串与文本处理

    C++标准库中字符串转数值使用函数atoi(),数值转字符串使用printf系列函数. boost中使用转换函数操作符lexical_cast<>进行转换,实际上是模板函数.自定义类型,要 ...

  3. C# W3 调试

    如果在调试附加进程中 没W3进程的话, 在运行里输入 uac  设置为从不通知 即可:

  4. GPS坐标(WGS84)转换百度坐标(BD09) python测试

    基础知识坐标系说明: WGS84:为一种大地坐标系,也是目前广泛使用的GPS全球卫星定位系统使用的坐标系. GCJ02:是由中国国家测绘局制订的地理信息系统的坐标系统.由WGS84坐标系经加密后的坐标 ...

  5. predis操作大全

    predis是php连接redis的操作库,由于它完全使用php编写,大量使用命名空间以及闭包等功能,只支持php5.3以上版本,故实测性能一般,每秒25000次读写,相信改换c语言编写的php扩展后 ...

  6. Web前端开发的基本要求和认识

    Web前端开发技术包括三个要素:HTML.CSS和JavaScript,但随着RIA的流行和普及,Flash/Flex.Silverlight.XML和服务器端语言也是前端开发工程师应该掌握的.Web ...

  7. <script>放在head内和body内有什么区别

    加载的顺序不一样,你可以把HTML看成从上往下加载的. 例如在网速慢的情况下把js代码放在body底部用户会先看到网页结构,等js加载完成后才出现特效 区别简述: 在HTML body部分中的Java ...

  8. libhdfs的配置和使用

    测试环境:centos6.10,hadoop2.7.3,jdk1.8 测试代码:HDFSCSample.c #include "hdfs.h" #include <strin ...

  9. Linux 基础一---操作系统&常用命令

    UNIX是一个计算机操作系统,一个用来协调.管理和控制计算机硬件和软件资源的控制程序. 1.UNIX操作系统的特点:多用户和多任务: a) 多用户表示在同一时刻可以有多个用户同时使用UNIX操作系统而 ...

  10. 请求静态文件，返回http状态码405，not allowed

    昨天在首页加了一个链接,点击这个a标签,会进入http://121.43.68.40/boxpro/template/addsite.pdf,测试环境完全没有问题,上传到正式服务器之后,点击A标签,死 ...