<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

    <head>

        <script type="text/javascript" src="libs/three.js"></script>

        <script type="text/javascript">

            function init() {

                var renderer = new THREE.WebGLRenderer({

                    canvas: document.getElementById('mainCanvas')

                });

                renderer.setClearColor(0x000000);

                var scene = new THREE.Scene();

                // camera

                var camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);

                camera.position.set(25, 25, 25);

                camera.lookAt(new THREE.Vector3(0, 0, 0));

                scene.add(camera);

                // draw axes to help you understand the coordinate

                drawAxes(scene);

                var material = new THREE.MeshBasicMaterial({

                    color: 0xffff00,

                    wireframe: true

                });

                // init an empty geometry

                var geometry = new THREE.Geometry();

                // set vertices

                // 4 vertices on top

                geometry.vertices.push(new THREE.Vector3(-1, 2, -1));

                geometry.vertices.push(new THREE.Vector3(1, 2, -1));

                geometry.vertices.push(new THREE.Vector3(1, 2, 1));

                geometry.vertices.push(new THREE.Vector3(-1, 2, 1));

                // 4 vertices on bottom

                geometry.vertices.push(new THREE.Vector3(-2, 0, -2));

                geometry.vertices.push(new THREE.Vector3(2, 0, -2));

                geometry.vertices.push(new THREE.Vector3(2, 0, 2));

                geometry.vertices.push(new THREE.Vector3(-2, 0, 2));

                // set faces

                // top face

                geometry.faces.push(new THREE.Face3(0, 1, 3));

                geometry.faces.push(new THREE.Face3(1, 2, 3));

                // bottom face

                geometry.faces.push(new THREE.Face3(4, 5, 6));

                geometry.faces.push(new THREE.Face3(5, 6, 7));

                // side faces

                geometry.faces.push(new THREE.Face3(1, 5, 6));

                geometry.faces.push(new THREE.Face3(6, 2, 1));

                geometry.faces.push(new THREE.Face3(2, 6, 7));

                geometry.faces.push(new THREE.Face3(7, 3, 2));

                geometry.faces.push(new THREE.Face3(3, 7, 0));

                geometry.faces.push(new THREE.Face3(7, 4, 0));

                geometry.faces.push(new THREE.Face3(0, 4, 5));

                geometry.faces.push(new THREE.Face3(0, 5, 1));

                var mesh = new THREE.Mesh(geometry, material);

                scene.add(mesh);

                // render

                renderer.render(scene, camera);

            }

            function drawAxes(scene) {

                // x-axis

                var xGeo = new THREE.Geometry();

                xGeo.vertices.push(new THREE.Vector3(0, 0, 0));

                xGeo.vertices.push(new THREE.Vector3(1, 0, 0));

                var xMat = new THREE.LineBasicMaterial({

                    color: 0xff0000

                });

                var xAxis = new THREE.Line(xGeo, xMat);

                scene.add(xAxis);

                // y-axis

                var yGeo = new THREE.Geometry();

                yGeo.vertices.push(new THREE.Vector3(0, 0, 0));

                yGeo.vertices.push(new THREE.Vector3(0, 1, 0));

                var yMat = new THREE.LineBasicMaterial({

                    color: 0x00ff00

                });

                var yAxis = new THREE.Line(yGeo, yMat);

                scene.add(yAxis);

                // z-axis

                var zGeo = new THREE.Geometry();

                zGeo.vertices.push(new THREE.Vector3(0, 0, 0));

                zGeo.vertices.push(new THREE.Vector3(0, 0, 1));

                var zMat = new THREE.LineBasicMaterial({

                    color: 0x00ccff

                });

                var zAxis = new THREE.Line(zGeo, zMat);

                scene.add(zAxis);

            }

        </script>

    </head>

    <body onload="init()">

        <canvas id="mainCanvas" width="400px" height="300px" ></canvas>

    </body>

</html>

aaarticlea/png;base64,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" alt="" />

three.js自定义形状的更多相关文章

  1. Three.js基础探寻六——文字形状与自定义形状

    1.文字形状 说起3d文字想起了早年word里的一些艺术字: 时间真快. 那么TextGeometry可以用来创建三维的文字形状. 使用文字形状需要下载和引用额外的字体库.这里,我们以 helveti ...

  2. js自定义验证码

    分享一个js自定义的验证码 window.onload = function () {     var code;     $('.changePassword').click(function () ...

  3. js自定义弹出框

    js自定义弹出框: 代码如下 <html> <head><title>自定义弹出对话框</title> <style type ="te ...

  4. 超酷HTML5 Canvas图表应用Chart.js自定义提示折线图

    超酷HTML5 Canvas图表应用Chart.js自定义提示折线图 效果预览 实例代码 <div class="htmleaf-container"> <div ...

  5. 制作自定义背景Button按钮、自定义形状Button的全攻略（转）

    在Android开发应用中,默认的Button是由系统渲染和管理大小的.而我们看到的成功的移动应用,都是有着酷炫的外观和使用体验的.因此,我们在开发产品的时候,需要对默认按钮进行美化.在本篇里,笔者结 ...

  6. 与你相遇好幸运，Sails.js自定义responses

    在 /api/responses/ 新建文件 >serviceDBError.js 自定义的数据库错误 >serviceError.js  自定义的数据错误 >serviceSucc ...

  7. jquery.validate.js默认配置，jquery.validate.js自定义提示信息

    jquery.validate.js默认配置,jquery.validate.js自定义提示信息 配置jQuery.validator默认的处理方法 >>>>>>& ...

  8. web前端对上传的文件进行类型大小判断的js自定义函数

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. js自定义事件、DOM/伪DOM自定义事件

    一.说明.引言 我JS还是比较薄弱的,本文的内容属于边学边想边折腾的碎碎念,可能没什么条理,可能有表述不准确的地方,可能内容比较拗口生僻.如果您时间紧迫,或者JS造诣已深,至此您就可以点击右侧广告(木 ...

随机推荐

  1. 英文写作——冠词的使用(Use 0f Articles)

    1.使用'a','an','the'和不使用冠词的基本规则: <1>泛指,不可数名词不能有任何冠词 <2>泛指,可数,复数名词前不能有冠词 <3>泛指,可数,单数名 ...

  2. ExtJs 实现表单联动

    最近做的项目使用Extjs.遇到表单联动的业务.下面来说说主要实现思想: 说明:表单联动一般存在从属关系,有大范围的对象和大范围中的小对象.比如地理位置的选定(例:浙江省-杭州市-某某县).在这里,我 ...

  3. spark安装(实战)

    sparksql+hive :http://lxw1234.com/archives/2015/06/294.htm 1,安装scala http://scala-lang.org/download/ ...

  4. Sublime编辑器安装使用

    用习惯了VS2010强大的IDE工具,但也被它折腾过.烦恼过,当vs加载超过万行的脚本代码时,界面半天才反应,经常卡死,电脑配置决定算得上顶呱呱. 不喜欢逆来顺受,于是选择了txt文本编辑器,最原始的 ...

  5. UVA-11997 K Smallest Sums

    UVA - 11997 K Smallest Sums Time Limit: 1000MS   Memory Limit: Unknown   64bit IO Format: %lld & ...

  6. JavaScript事件处理程序

    JavaScript中的事件处理程序主要分为3种: HTML事件处理程序: <script type="text/javascript"> // HTML事件处理程序 ...

  7. 【重点】Shell入门教程：流程控制（2）条件判断的写法

    第三节:条件判断的写法 if条件判断中,if的语法结构中的“条件判断”可以有多种形式.测试结果是真是假,就看其传回的值是否为0. 条件测试的写法,有以下10种: 1.执行某个命令的结果 这里的命令,可 ...

  8. 写JSP文件遇到的一个问题

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  9. 使用php+swoole对client数据实时更新(上)

    如果想对一个列表做实时的更新,传统的做法是采用轮询的方式.以web为例,通过Ajax定时请求服务端然后获取数据显示在页面.这种方式实现简单,缺点就是浪费资源. HTTP1.1新增加了对websocke ...

  10. 引用项目外dll时不显示注释的解决方案

    在引用项目外的dll时,显示类库中的注释可按以下步骤: 方法或变量用summary添加注释,如:         /// <summary>发送post请求         /// < ...