3.1 基本几何形状

立方体（CubeGeometry）

构造函数：

THREE.CubeGeometry(width, height, depth, widthSegments, heightSegments, depthSegments)

width：是x方向上的长度；

height：是y方向上的长度；

depth：是z方向上的长度；

后三个参数分别是在三个方向上的分段数，一般情况下不需要分段的话，可以不设置后三个参数，后三个参数的缺省值为1。其他几何形状中的分段也是类似的，下面不做说明。

widthSegments：代表x方向上的分段数，widthSegments为3的话，代表x方向上水平分为三份。（下同）；

heightSegments：代表y方向上的分段数；

depthSegments：代表z方向上的分段数。

长宽高：

创建立方体直观简单，如：new THREE.CubeGeometry(1, 2, 3);可以创建一个x方向长度为1，y方向长度为2，z方向长度为3的立方体。

分段：

而在设置了分段，如new THREE.CubeGeometry(1, 2, 3, 2, 2, 3)，可以创建一个x方向长度为1，y方向长度为2，z方向长度为3的立方体。同时x,y方向分为2段，而z方向分为三段。

完整示例代码demo与效果图：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

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

    <title>Document</title>

</head>

<body onload="init()">

    <canvas id="mainCanvas" width="800px" height="600px"></canvas>

</body>

<script>

    function init() {

        var renderer = new THREE.WebGLRenderer({

            canvas: document.getElementById('mainCanvas')

        });

        renderer.setClearColor(0x000000);

        var scene = new THREE.Scene();

        var aspect = window.innerWidth / window.innerHeight;

        var camera = new THREE.OrthographicCamera(-2 * aspect, 2 * aspect, 1.5 * aspect, -1.5 * aspect, 1, 500);

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

        scene.add(camera);

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

        var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3, 1, 2, 3),

            new THREE.MeshBasicMaterial({

                color: 0xff0000,

                wireframe: true

            })

        )

        scene.add(cube);

        renderer.render(scene, camera);

    }

</script>

</html>

　　

《Three.js 入门指南》3.1.1 - 基本几何形状-立方体（CubeGeometry）的更多相关文章

  1. d3.js 入门指南 - 仪表盘

    D3的全称是Data-Driven Documents(数据驱动的文档),是一个用来做数据可视化的JavaScript函数库,而JavaScript文件的后缀通常为.js,所以D3被称为D3.js. ...

  2. d3.js 入门指南

    说到数据可视化,我们会行到很多优秀的框架,像echarts.highcharts,这些框架很优雅,健壮,能满足我们对可视化的大部分需求,但是缺点也很明显,就是这些框架几乎是不可定制化的,当遇到特殊的需 ...

  3. 《Three.js 入门指南》3.1.2 - 一份整齐的代码结构以及使用ORBIT CONTROLS插件（轨道控制）实现模型控制

    3.1.2 正式代码结构 & ORBIT CONTROLS插件(轨道控制) 说明 本节内容属于插入节,<Three.js入门指南>这本书中,只是简单的介绍了一些概念,是一本基础的入 ...

  4. 《Three.js 入门指南》3.0 - 代码构建的最基本结构。

    3.0 代码构建的最基本结构 说明: 我们必需首先知道,Three.js 的一些入门级概念: 我们需要知道,OpenGL 是一套三维实现的标准,为什么说是标准,因为它是跨平台,跨语言的.甚至CAD以及 ...

  5. 《Three.js 入门指南》0 - 说明

    本笔记,摘自:<Three.js 入门指南>一书 地址链接为:https://www.ituring.com.cn/book/miniarticle/58552 本书的前言摘录: 本书结构 ...

  6. Vue.js 入门指南之“前传”（含sublime text 3 配置）

    题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴 ...

  7. 系列博文-Three.js入门指南(张雯莉)-静态demo和three.js功能概览

    一:一个最简单的静态DEMO //body加载完后触发init() //WebGL的渲染是需要HTML5 Canvas元素的,你可以手动在HTML的<body>部分中定义Canvas元素, ...

  8. 《Three.js 入门指南》3.1.1 - 基本几何形状 -圆环结（TorusKnotGeometry）

    3.1 基本几何形状 圆环结(TorusKnotGeometry) 构造函数 THREE.TorusKnotGeometry(radius, tube, radialSegments, tubular ...

  9. 《Three.js 入门指南》3.1.1 - 基本几何形状 -圆环面（TorusGeometry）

    3.1 基本几何形状 圆环面(TorusGeometry) 构造函数 THREE.TorusGeometry(radius, tube, radialSegments, tubularSegments ...

随机推荐

  1. HashSet底层、及存入对象时候如何保持唯一

    HashSet底层.及存入对象时候如何保持唯一 在JDK1.8之前,哈希表底层采用数组+链表实现,即使用链表处理冲突,同一hash值的链表都存储在一个链表里. 但是当位于一个桶中的元素较多,即hash ...

  2. 负margin在页面布局中的应用

    关于负margin的原理建议大家看看这篇文章:http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812 一. 左右列固定, ...

  3. 2019-2020-3 20174318张致豪《网络对抗技术》Exp2 后门原理与实践

    Exp2 后门原理与实践 前期准备 一.实验目标与基础知识 1.1 实践目标 使用netcat获取主机操作Shell,cron启动 使用socat获取主机操作Shell,任务计划启动 使用MSF  m ...

  4. 初识JVM：（二）Java的垃圾回收机制详解

    声明:本文主要参考https://www.cnblogs.com/codeobj/p/12021041.html 仅供个人学习.研究之用,请勿用于商业用途,如涉及侵权,请及时反馈,立刻删除. 一.Ja ...

  5. 分布式——吞吐量巨强、Hbase的承载者 LSMT

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是分布式系统的第九篇文章. 今天给大家分享的内容是LSM树,它的英文是Log-structed Merge-tree.看着有些发怵,但其 ...

  6. MySQL数据库的创建和操作以及多表查询

    创建数据库: CREATE DATABASE 数据库名称; 查看所有的数据库: SHOW DATABASES; 操作指定数据库: USE 数据库名称; 查看当前所操作的数据库: SELECT DATA ...

  7. c# Dictionary<string, object> 转JSON字符串

    JavaScriptSerializer jss = new JavaScriptSerializer(); Dictionary<string, object> dict = new D ...

  8. shell编程学习之使用jq对json数据进行提取

    shell编程学习之使用jq对json提取 jq命令允许直接在命令行下对JSON进行操作,包括分片.过滤.转换等 ,jq是用C编写,没有运行时依赖,所以几乎可以运行在任何系统上.预编译的二进制文件可以 ...

  9. shellcode

    msf > use windows/exec msf > set CMD calc.exe msf > set EXITFUNC thread msf > generate - ...

  10. 毕业设计——基于ZigBee的智能窗户控制系统的设计与实现

    题目:基于物联网的智能窗户控制系统的设计与实现 应用场景:突降大雨,家里没有关窗而进水:家中燃气泄漏,不能及时通风,威胁人身安全,存在火灾的隐患:家中窗户没关,让坏人有机可乘.长时间呆在人多.封闭的空 ...