<!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. BZOJ3771: Triple

    额我不是来发题解的,只是非常郁闷= =,这题的答案最大是1.2e9/6左右,所以用ntt的话要在模意义下除以6,不能最后除,否则刚好爆掉= = #include<bits/stdc++.h> ...

  2. 怎样学习Java

    JAVA自学之路 一:学会选择 ,当你要走向社会的时候,就不要再把自己当成学生,不要把自己的将来交给别人,学会运用自己的眼睛去观察,去了解这个世界吧. 我讲一个通过招聘网站的观察方法: http:// ...

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

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

  4. maven install Failed to execute goal org.apache.maven.plugins:maven-war-plugin:2.1.1:war (default-war) on project web_nanchang

    maven打包成war时,报错:Failed to execute goal org.apache.maven.plugins:maven-war-plugin:2.1.1:war (default- ...

  5. 什么时候用@Resource，什么时候用@service

    Spring中什么时候用@Resource,什么时候用@service当你需要定义某个类为一个bean,则在这个类的类名前一行使用@Service("XXX"),就相当于讲这个类定 ...

  6. UI第九节——UIProgressView

    - (void)viewDidLoad {    [super viewDidLoad];        // 实例化 UIProgressView,高度是固定的    UIProgressView ...

  7. vue2.0学习（一）

    1.解决双花括号在初始化时的闪烁,两种方式,一种是<div v-text="name"></div>,将用v-text指令来显示,类似于angular的ng ...

  8. 2.3属性在 ASP.NET Web API 2 路由

    路由是 Web API 如何匹配 URI 的行动.Web API 2 支持一种新型的路由,称为属性路由.顾名思义,属性路由使用属性来定义路由.属性路由给你更多的控制 Uri 在您的 web API.例 ...

  9. 设置TextView按下时变换文字颜色

    在res中建立一个color文件夹,在其中新建一个xml(这里为text_color.xml): <selector xmlns:android="http://schemas.and ...

  10. hmm

    http://www.cnblogs.com/mindpuzzle/p/3653043.html http://en.wikipedia.org/wiki/Viterbi_algorithm http ...