<!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. servlet 3.0 的新特性之三对异步处理的支持

    一．异步处理 1. 什么是异步处理 原来,在服务器没有结束响应之前,浏览器是看不到响应内容的!只有响应结束时,浏览器才能显示结果! 现在异步处理的作用:在服务器开始响应后,浏览器就可以看到响应内容,不 ...

  2. Hadoop createSnapshot和deleteSnapshot命令

    概述 HDFS快照是文件系统的只读时间点副本. 可以对文件系统的子树或整个文件系统进行快照. 快照的一些常见用例是数据备份,防止用户错误和灾难恢复.HDFS快照的实现是高效的: 快照创建是即时的:成本 ...

  3. 关于like %%的优化思路

    测试数据:2亿行,被筛选出的数据,3KW多行. 众所周知 like %str%无法走索引,但是我们如果实在是有这种需求要达到like '%str%'的筛选目的,怎么优化好一些呢? 以下是我的一些思考: ...

  4. linux crontab+curl+php 实现php定时任务

    首先登入Linux ->用root登入 在命令行输入 crontab -e  之后就会打开一个文件,并且是非编辑状态,则是vi的编辑界面,通过敲键盘上的i,进入编辑模式,就可以编辑内容.这个文件 ...

  5. width

    position:absolute 其widht:%是想对于最近的已经定位的父元素,如果没有就想对于body widht 是指的内容区的with,设置除了width其他的元素都会使元素变的比width ...

  6. Funq之Lambda表达式入门

    今天接受了一个Tranning关于.net3.5 framework中的new feature. 其中最不明白的还是Lambda表达式.回来后又仔细的思考了一番,总算有点体会在这里写一下.既然是入门, ...

  7. 根据GUID获取设备信息

    #include <windows.h> #include <setupapi.h> #include <objbase.h> #include <initg ...

  8. Python编程-编码、文件处理、函数

    一.字符编码补充知识点 1.文本编辑器存取文件的原理(nodepad++,pycharm,word) 打开编辑器就打开了启动了一个进程,是在内存中的,所以在编辑器编写的内容也都是存放与内存中的,断电后 ...

  9. [NOI2008]奥运物流

    题目 洛谷 BZOJ 做法 单环有向图毒瘤题 不考虑环和改变后继:\(\sum\limits{i=1}^n C_i\cdot K^{dep(i)}\) 考虑环无穷等比求极m:\(R(1)=\sum\l ...

  10. Squid 正向代理配置

    Squid 正向代理配置 1.删除主配置文件重写写入配置 rm -f /etc/squid/squid.conf 2.重新写入配置正向代理 vim /etc/squid/squid.conf # 监听 ...