<!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. 【原】常用的javascript设计模式

    设计模式太多了,貌似有23种,其实我们在平时的工作中没有必要特意去用什么样的设计模式,或者你在不经意间就已经用了设计模式当中的一种.本文旨在总结平时相对来说用的比较多的设计模式. 什么是设计模式 百度 ...

  2. HTTP Content-type 对照表

    Application Type 文件扩展名 Content-Type(Mime-Type) 描述 . application/x-   .* application/octet-stream 二进制 ...

  3. Fedora 23安装 NS2 (network simulator 2)

    1 实验环境 OS: Fedora 23 workstation 2 实验步骤 ( 参考了:http://www.isi.edu/nsnam/ns/ns-build.html) 本次实验的实验环境: ...

  4. [Unity] Shader - CG语言 流程控制语句

    CG语言中: 不支持 switch 语句(可以写,但不能很好的执行.) 循环语句中, 循环次数不能大于 1024 ,否则会报错. If...ELSE 条件判断语句: if (true) { } els ...

  5. 问题解决：psql: could not connect to server: No such file or directory Is the server running locally and accepting connections on Unix domain socket "/var/run/postgresql/.s.PGSQL.5432"?

    错误提示: psql: could not connect to server: No such file or directory Is the server running locally and ...

  6. 移动端框架篇-控制子容器的滑屏框架-fullPage.js

    控制子容器法 方法是只显示其中一个子元素,其它隐藏,滑屏时隐藏当前元素,并显示当前元素的下一个同辈元素~ 这里采用fullPage框架,库大小7.69K~ fullPage框架的页面样式无需自定义,已 ...

  7. 苹果微信下载 iOS微信各版本列表

    微信在不断地更新迭代,ios微信下载点击这里立即开始(手机电脑都可以,电脑端要安装iTunes),每个版本都放出一些新的功能或修复相关错误,详情可以点击下面的版本链接进行查看.(这里有Android微 ...

  8. Shell入门教程：Shell函数的返回值

    shell函数返回值一般有3种方式: 1.return语句(默认的返回值) shell函数的返回值可以和其他语言的返回值一样,通过return语句返回. 比如: #!/bin/bash functio ...

  9. 【转】MVC中处理Json和JS中处理Json对象

    事实上,MVC中已经很好的封装了Json,让我们很方便的进行操作,而不像JS中那么复杂了. MVC中: public JsonResult Test() { JsonResult json = new ...

  10. git 简单使用

    创建新分支:git branch branchName 切换到新分支:git checkout branchName 然后 ,上面两个命令也可以合成为一个命令: git checkout -b bra ...