three.js基础几何体：立方体，球，圆柱的绘制

学习交流欢迎加群：789723098，博主会将一些demo整理共享

作为three.js的学习入门，一直在思考要怎样写才可以更符合初学者，对于我自己来说，本身也不是资深的玩家，也是入门不久的菜鸟，但我愿意与大家分享我的经验。我觉得three.js不应对一些基础性的东西介绍太多，因为其是基于WenGL开发的第三方库，如果延伸下去那就会没完没了，这也违背了three.js开发的初衷(为喜欢前端图形学开发，却没有良好的webgl和js基础的人群准备，使三维图形的开发变得更加容易)，所以接下来就从绘制基础的几何体开始吧，结合实际例子，这样更加简单粗暴。如果大家喜欢原生WebGL开发可以关注我另外的博客分栏：点击打开链接。

在开始代码实例以前，先讲讲几种几何体的代码实现方式：

(1) 平面

new THREE.PlaneGeometry(100,100,10,10)

括号里的内容分别对应平面的长，宽，长方向等分量，宽方向等分量，第三第四个参数这么形容可能不太恰当，但实在找不出更恰当的形容，这里的意思是这样的，沿着长的方向将其分为10等分，沿着宽的方向将其分为10等分，参数可以根据大家的需要自己设置哈。

(2) 立方体

创建立方体的代码为：

new THREE.CubeGeometry(20, 20, 20, 10, 10, 10);

这里括号里的参数分别对应：长、宽、高、长方向等分量、宽方向等分量、高方向等分量；参数可以根据自己需要调整。

(3) 球体

创建球体的代码如下：

new THREE.SphereGeometry(16, 40, 40);

括号里的参数分别对应：半径、经度、纬度；参数的大小可以按照自己的需求设置。

(4) 圆柱体

创建圆柱体的代码为：

new THREE.CylinderGeometry(15, 15 ,40 ,40 ,40)

括号里的参数分别对应：顶圆半径、底圆半径、圆柱体高度、经度、纬度；参数的大小可以根据自身需求设置。

在创建好几何体后，还需要对其进行材料属性的添加，这些在接下来的程序代码里都有注释和体现，先看看程序实现的效果图：

再看看将其设置为网格形式的效果，开启网格模式的命令为:wrieframe:true。

接下来把本例的完整程序代码附上，里面有详细的注释哈：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>threejs-basic-geometry</title><style>body{font-family: Monospace;background: #f0f0f0;margin: 0px;overflow: hidden;}</style>
</head>
<body>
<script type="text/javascript" src="build/three.js"></script>
<script type="text/javascript" src="js/Detector.js"></script>
<script type="text/javascript">//检测webgl的支持情况if(!Detector.webgl) {Detector.addGetWebGLMessage();}var container;var camera, scene, renderer;main();render();//主函数function main(){//添加一个div元素container = document.createElement('div')document.body.appendChild(container);scene = new THREE.Scene();//创建一个新场景//添加一个透视相机camera = new THREE.PerspectiveCamera(30,window.innerWidth/window.innerHeight, 1, 1000);camera.position.set(100, 300, 100);//设置相机位置camera.lookAt(new THREE.Vector3(0,0,0));//让相机指向原点//渲染//antialias:true增加抗锯齿效果renderer = new THREE.WebGLRenderer({antialias:true});renderer.setClearColor(new THREE.Color(0x000000));//设置窗口背景颜色为黑renderer.setSize(window.innerWidth, window.innerHeight);//设置窗口尺寸//将renderer关联到container，这个过程类似于获取canvas元素container.appendChild(renderer.domElement);//给场景添加光源//自然光var ambientLight = new THREE.AmbientLight( 0x606060 );scene.add( ambientLight );//平行光源var directionalLight = new THREE.DirectionalLight( 0xffffff );directionalLight.position.set( 1, 0.75, 0.5 ).normalize();scene.add( directionalLight );plane();cube();sphere();cylinder();}//创建一个平面function plane(){var planeGeo = new THREE.PlaneGeometry(100,100,10,10);//创建平面var planeMat = new THREE.MeshLambertMaterial({  //创建材料color:0x666666,wireframe:false});var planeMesh = new THREE.Mesh(planeGeo, planeMat);//创建网格模型planeMesh.position.set(0, 0, -20);//设置平面的坐标planeMesh.rotation.x = -0.5 * Math.PI;//将平面绕X轴逆时针旋转90度scene.add(planeMesh);//将平面添加到场景中}//创建一个立方体function cube(){var cubeGeo = new THREE.CubeGeometry(20, 20, 20, 5, 5, 5);//创建立方体var cubeMat = new THREE.MeshLambertMaterial({//创建材料color:0x003300,wireframe:false});var cubeMesh = new THREE.Mesh(cubeGeo, cubeMat);//创建立方体网格模型cubeMesh.position.set(20, 10, 0);//设置立方体的坐标scene.add(cubeMesh);//将立方体添加到场景中}//创建一个球function sphere(){var sphereGeo = new THREE.SphereGeometry(16, 40, 40);//创建球体var sphereMat = new THREE.MeshLambertMaterial({//创建材料color:0x0000FF,wireframe:false});var sphereMesh = new THREE.Mesh(sphereGeo, sphereMat);//创建球体网格模型sphereMesh.position.set(-25, 10, 0);//设置球的坐标scene.add(sphereMesh);//将球体添加到场景}//创建圆柱体function cylinder(){//创建圆柱体var cylinderGeo = new THREE.CylinderGeometry(15, 15 ,40 ,40 ,40);var cylinderMat = new THREE.MeshLambertMaterial({//创建材料color:0xFF6600,wireframe:false});//创建圆柱体网格模型var cylinderMesh = new THREE.Mesh(cylinderGeo, cylinderMat);cylinderMesh.position.set(0, 20, -40);//设置圆柱坐标scene.add(cylinderMesh);//向场景添加圆柱体}//渲染function render(){renderer.render(scene, camera);}</script>
</body>
</html>

做为入门，介绍了一个three.js实例的开发，后续将继续介绍three.js里面一些基本的组件。three.js的优势在于开发相同的三维场景，代码量要比用原生webgl少的多，因为很多底层的东西和功能three.js已经封装好了，你只需要去调用即可。现在有没有觉得three.js其实不是特别难呢？

three.js基础几何体：立方体，球，圆柱的绘制相关推荐

基于OpenCASCADE自制三维建模软件（七）立方体、圆柱、球、圆锥、圆环
文章目录一.立方体 1.构造 2.实例二.圆柱 1.构造 2.实例三.球 1.构造 2.实例四.圆锥 1.构造 2.实例五.圆环 1.构造 2.实例项目仓库 Open CASCADE有现成 ...
Web3D编程入门总结——WebGL与Three.js基础介绍
1 /*在这里对这段时间学习的3D编程知识做个总结,以备再次出发.计划分成"webgl与three.js基础介绍"."面向对象的基础3D场景框架编写".&quo ...
102 Three.js 使用几何体生成拱门形状
Three.js的几何体已经能够创建很多的几何体模型,但是,远远还达不到特殊需求的几何体模型.今天,我就记一下如何制作特殊几何模型的感想. 这是我制作的一个简单的拱门形状的几何体.这个创建可以使用BS ...
Three.js基础探寻二——正交投影照相机
本篇主要介绍照相机中的正交投影照相机. 第一篇传送门:Three.js基础探寻一 1.照相机图形学中的照相机定义了三维空间到二维屏幕的投影方式. 针对投影方式照相机分为正交投影照相机和透视投影照相机 ...
三维球体换算到二维_三维制图讲义04 - 基础几何体
三维制图讲义01 - 欢迎来到三维世界三维制图讲义02 - 三维制作流程三维制图讲义03 - 三维软件和Blender介绍快速回顾上一节课,我们介绍了 Blender 软件的下载.安装.设置和 ...
three.js使用OrbitControls.js控制几何体旋转、平移、缩放
附带一个可用的OrbitControls.js http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js ...
基础几何体的造型要点：看这几条总结很到位~
素描几何体怎么画?几何体组合的绘画重点是什么?很多小伙伴在学习美术的时候都会遇到各种问题今天美术加带大家了解下常见结合体的知识点: 我们在学习基础造型的时候,像比较常见的,四棱锥.方形穿插体.圆柱+圆 ...
threejs 形状几何体_Three.js模型几何体面积、体积计算
Three.js模型几何体面积.体积计算在工作中通过Three.js开发项目的时候,一些特定的情况下你可能需要计算一个三维模型的表面积或者体积,比如在3D打印的Web项目中,你需要计算一个三维模型的 ...
构建node.js基础镜像_我如何使用Node.js构建工作抓取网络应用
构建node.js基础镜像 by Oyetoke Tobi Emmanuel 由Oyetoke Tobi Emmanuel 我如何使用Node.js构建工作抓取网络应用 (How I built a ...

three.js基础几何体：立方体，球，圆柱的绘制

学习交流欢迎加群：789723098，博主会将一些demo整理共享

three.js基础几何体：立方体，球，圆柱的绘制相关推荐

最新文章

热门文章