3.1 基本几何形状

平面（PlaneGeometry）

说明：

这里的平面（PlaneGeometry）其实是一个长方形，而不是数学意义上无限大小的平面。

构造函数：

THREE.PlaneGeometry(width, height, widthSegments, heightSegments)

width：x方向上的长度；

height：是y方向上的长度；

widthSegments：x轴方向的分段；

heightSegments：y轴方向的分段。

如new THREE.PlaneGeometry(2, 4);创建的平面在x轴和y轴所在平面内，效果如下：

如果需要创建的平面在x轴和z轴所在的平面内，可以通过物体的旋转来实现，具体的做法将在5.2节作介绍

完整示例代码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 width="800px" height="600px" id="mainCanvas"></canvas>

</body>

<script>

    function init() {

        var renderer = new THREE.WebGLRenderer({

            canvas: document.getElementById('mainCanvas')

        });

        renderer.setClearColor(0x000000);

        var scene = new THREE.Scene();

        var camera = new THREE.OrthographicCamera(-2, 2, 1.5, -1.5, 1, 10);

        camera.position.set(1, 2, 3);

        scene.add(camera);

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

        var cube = new THREE.Mesh(new THREE.PlaneGeometry(1, 2, 16, 32),

            new THREE.MeshBasicMaterial({

                color: 0xff0000,

                wireframe: true

            })

        )

        scene.add(cube);

        renderer.render(scene, camera);

    }

</script>

</html>

　　

《Three.js 入门指南》3.1.1 - 基本几何形状 - 平面（PlaneGeometry）的更多相关文章

  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. JavaScript对象(一)

    Part One:对象的创建对象的创建,可以使用new Object() 或者 Object.creat(),该方法为静态函数 var foo = Object.create({x:1,y:2});  ...

  2. 关于OSS不再维护的一些讨论

    FUSE for macOS 将不再维护 Fuse 是一款针对Mac OS的文件系统所开发的一款开源软件. 用于MacOS的FUSE软件包提供了多个API,用于为OS X 10.9至macOS 10. ...

  3. 误用git reset -hard 的检讨书

    误用git reset -hard 的检讨书 消失的代码们: 我知道你们可能看不到了,但是我还是需要自我反省自己,因为自己的误操作,导致了你们的消失. 事情的始末 夜阑人静,周围除了少年敲击键盘的声音 ...

  4. R调用C++示例

    sourceCpp {Rcpp}:Source C++ Code from a File or String sourceCpp(file = "", code = NULL, e ...

  5. 阿里云centos安装oracle

    目录 阿里云centos安装oracle 阿里云默认没有swap分区,oracle安装需要 安装Oracle所需的依赖包 创建用户和组 关闭SELINUX(阿里云缺省关闭) 开始安装 使用" ...

  6. go源码分析(五) 获取函数名和调用者的函数名

    参考资料 实现代码保存在我的github // input flag 1:FunName 2:CallerFunName func GetFuncName(flag int) string {     ...

  7. 深入理解计算机系统 (CS:APP) 缓冲区漏洞实验 – Buffer Lab 解析

    原文地址:https://billc.io/2019/05/csapp-cachelab/ 写在前面 这是 CSAPP 官网上的第 4 个实验 buflab,也是学校要求的第三个实验.这个实验比上一个 ...

  8. java学习笔记(1)——有关接口

    接口: interface intf0{ public void doSomething(); } interface intf1{ public void doAnything(); } class ...

  9. 三万字、91道MySQL面试题。 附PDF

    文末领取面试题 高清PDF 数据库基础知识 1. 为什么要使用数据库 数据保存在内存 优点:存取速度快 缺点:数据不能永久保存 数据保存在文件 优点:数据永久保存 缺点:1)速度比内存操作慢,频繁的I ...

  10. VScode 快捷键大全

    按 Press 功能 Function Ctrl + Shift + P,F1 显示命令面板 Show Command Palette Ctrl + P 快速打开 Quick Open Ctrl + ...