<!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. 创建NetWorkDataset---FileGDB篇

    /// <summary> /// 创建NetWorkDataset /// </summary> /// <returns>INetworkDataset.< ...

  2. 使用Nominatim进行openstreetmap地址搜索/解析

    Nominatim(来自拉丁语,意思是“名称”)是一个可以按名称和地址来搜索OSM中的数据,并生成OSM点的合成地址的工具(反向地理编码).可用在http://nominatim.openstreet ...

  3. sqlserver text/ntext 字段读取

    sqlserver ntext 字段在读取时返回值 net.sourceforge.jtds.jdbc.ClobImpl@555bc78f 需要在连接数据库的URL后边加上";useLOBs ...

  4. 制作wordpress留言板

    总结步骤如下: 1.找到模板目录中的single.php文件,复制single.php并重命名为guestbook.php 2.在guestbook最顶部添加如下代码(用于模板调用) <?php ...

  5. Android接入支付宝和银联

    支付宝接入参考链接:https://software.intel.com/zh-cn/node/542608 银联接入参考链接:http://blog.csdn.net/gf771115/articl ...

  6. kindeditor在光标处插入编辑器外的数据

    页面 <div class="form-group clearfix"> <label class="control-label col-sm-3 co ...

  7. AutofacContainer

    /// <summary> /// Autofac容器 /// </summary> public class AutofacContainer { public static ...

  8. 大熊君JavaScript插件化开发------（第二季）

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,还记得昨天的那篇文章吗------这个系列的开篇(第一季).主要讲述了以“jQuery的方式如何开发插件”, 那么今天我们带着昨天的疑问来继续我们的插 ...

  9. LNMP环境搭建笔记

    说明:前面尝试的在ubuntu12.04上搭建的LAMP环境由于开发的需要需要对php的版本进行升级,然而通过apt-get库安装的php的版本是5.3.10,不能满足开发需要.此笔记安装的php的 ...

  10. Codeforces #261 D

    Codeforces #261 D D. Pashmak and Parmida's problem time limit per test 3 seconds memory limit per te ...