1.立方体
虽然这一形状的名字叫立方体(CubeGeometry),但它其实是长方体,也就是长宽高可以设置为不同的值。其构造函数是:
THREE.CubeGeometry(width,height,depth,widthSegments,heightSegments, depthSegments)
width:x方向上的长度
height:y方向上的长度
depth:z方向上的长度
widthSegments:x方向上的分段数(可选,缺省值1)
heightSegments:y方向上的分段数(同上)
depthSegments:z方向上的分段数(同上)
未分段:
var material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true }); drawCube(scene, material); function drawCube(scene, material) { var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3), material); scene.add(cube); }
物体的默认位置是原点,对于立方体而言,是其几何中心在原点的位置。
分段:
var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3, 2, 2, 3), material);
为什么会有这么多邪线呢?版本问题。R73版本:
注意这个分段是对六个面进行分段,而不是对立方体的体素分段,因此在立方体的中间是不分段的,只有六个侧面被分段。
2.平面
这里的平面(PlaneGeometry)其实是一个长方形,而不是数学意义上无限大小的平面。其构造函数为:
THREE.PlaneGeometry(width, height, widthSegments, heightSegments)
width:x方向上的长度
height:y方向上的长度
widthSegments:x方向上的分段数(可选,缺省值1)
heightSegments:y方向上的分段数(同上)
new THREE.PlaneGeometry(2, 4);创建的平面在x轴和y轴所在平面内,效果如下:
3.球体
球体(SphereGeometry)的构造函数是:
THREE.SphereGeometry(radius,segmentsWidth,segmentsHeight,phiStart, phiLength, thetaStart, thetaLength) // radius:半径 // segmentsWidth:经度上的分段数 // segmentsHeight:纬度上的分段数 // phiStart:经度开始的弧度 // phiLength:经度跨过的弧度 // thetaStart:纬度开始的弧度 // thetaLength:纬度跨过的弧度
3.1 经纬度分段数
首先,我们来理解下segmentsWidth和segmentsHeight。使用var sphere = new THREE.SphereGeometry(3, 8, 6)可以创建一个半径为3,经度划分成8份,纬度划分成6份的球体,如下图所示。
segmentsWidth相当于经度被切成了几瓣,而segmentsHeight相当于纬度被切成了几层。
new THREE.SphereGeometry(3, 5, 4)的效果:
new THREE.SphereGeometry(3, 8, 6)的效果:
new THREE.SphereGeometry(3, 18, 12)的效果:
在图形底层的实现中,并没有曲线的概念,曲线都是由多个折线近似构成的。对于球体而言,当这两个值较大的时候,形成的多面体就可以近似看做是球体了。
3.2 经度弧度
new THREE.SphereGeometry(3, 8, 6, Math.PI / 6, Math.PI / 3)表示起始经度为Math.PI / 6,经度跨度为Math.PI / 3。
效果如下:
注意,这里segmentsWidth为8意味着对于经度从Math.PI / 6跨过Math.PI / 3的区域内划分为8块,而不是整个球体的经度划分成8块后再判断在此经度范围内的部分。
3.3 纬度弧度
纬度弧度同理。new THREE.SphereGeometry(3, 8, 6, 0, Math.PI * 2, Math.PI / 6, Math.PI / 3)表示纬度从Math.PI / 6跨过Math.PI / 3。
效果如下:
new THREE.SphereGeometry(3, 8, 6, Math.PI / 2, Math.PI, Math.PI / 6, Math.PI / 2)的效果:
4.源码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3.js测试四</title> </head> <body onload="init()"> <canvas id="mainCanvas" width="400px" height="300px" ></canvas> </body> <script type="text/javascript" src="js/three.min.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); // 材质 var material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true }); drawCube(scene, material); //立方体 // drawPlane(scene, material); //平面 // drawSphere(scene, material); //球体 // render renderer.render(scene, camera); } function drawCube(scene, material) { var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3, 2, 2, 3), material); scene.add(cube); } function drawPlane(scene, material) { var plane = new THREE.Mesh(new THREE.PlaneGeometry(2, 4), material); scene.add(plane); } function drawSphere(scene, material) { var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 18, 12), material); // var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 8, 6, Math.PI / 6, Math.PI / 3), material); // var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 8, 6, 0, Math.PI * 2, Math.PI / 6, Math.PI / 3), material); // var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 8, 6, Math.PI / 2, Math.PI, Math.PI / 6, Math.PI / 2), material); scene.add(sphere); } </script> </html>
以上就是Three.js学习之几何形状的全部内容,小编陆续还会更新关于Three.js的文章,请大家继续关注小牛知识库。
本文向大家介绍Three.js学习之文字形状及自定义形状,包括了Three.js学习之文字形状及自定义形状的使用技巧和注意事项,需要的朋友参考一下 1.文字形状 说起3d文字想起了早年word里的一些艺术字: 那么TextGeometry可以用来创建三维的文字形状。 使用文字形状需要下载和引用额外的字体库。这里,我们以 helvetiker字体为例。 引用: TextGeometr
本文向大家介绍Three.js学习之网格,包括了Three.js学习之网格的使用技巧和注意事项,需要的朋友参考一下 前言 小编之前发布过关于几何形状和材质,相信大家看过学习之后,我们就能使用他们来创建物体了。最常用的一种物体就是网格(Mesh),网格是由顶点、边、面等组成的物体;其他物体包括线段(Line)、骨骼(Bone)、粒子系统(ParticleSystem)等。创建物体需要指定几何形状
当你开始思考你应该如何学习WebGL和Three.js的时候,相信你至少对相关的关键词了解过了,希望通过WebGL或Three.js实现你想要的Web3D功能,也许你也会去思考通过WebGL或Three.js能不能实现你想要的功能,也许你是因为领导临时分配任务,还不太清楚WebGL和Three.js是什么,个人建议是不要做过多思考,先看看相关的具体技术教程,随着时间的推移你自然会明白Canvas、
本文向大家介绍Three.js学习之Lamber材质和Phong材质,包括了Three.js学习之Lamber材质和Phong材质的使用技巧和注意事项,需要的朋友参考一下 前言 材质(Material)是独立于物体顶点信息之外的与渲染效果相关的属性。通过设置材质可以改变物体的颜色、纹理贴图、光照模式等。 MeshBasicMaterial:对光照无感,给几何体一种简单的颜色或显示线框。
本文向大家介绍Three.js学习之正交投影照相机,包括了Three.js学习之正交投影照相机的使用技巧和注意事项,需要的朋友参考一下 前言 Three.js是一个3Djs库,webGL开源框架中比较优秀的一个。除了webGL以外,Three.js还提供了基于Canvas、SVG标签的渲染器,调试建议使用Chrome或者Firefox。 1.照相机 图形学中的照相机定义了三维空间到二维屏幕的投
本文向大家介绍Three.js基础学习教程,包括了Three.js基础学习教程的使用技巧和注意事项,需要的朋友参考一下 一、Three.js官网及使用Three.js必备的三个条件 1.Three.js 官网 https://threejs.org/ 2.使用Three.js必备的三个条件 (To actually be able to display anything with Three.js