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>
相关推荐
1、three.js绘制3维坐标系; 2、绘制多个立方体; 3、立方体设置边框; 4、立方体表面绘制线条;
使用three.js绘制3d图表(柱状图,饼状图,环状图,面积图等).zip使用three.js绘制3d图表(柱状图,饼状图,环状图,面积图等).zip使用three.js绘制3d图表(柱状图,饼状图,环状图,面积图等).zip使用three.js...
16 Three.js基础之自定义几何体 ........ 21 Three.js优化之合并对象的动画 22 Three.js优化之OffscreenCanvas与WebWorker 23 Three.js解决方案之加载.obj模型 24 Three.js解决方案之加载.gLTF模型 25 Three.js解决...
three.js和高德地图结合引入obj格式模型---------------------three.js和高德地图结合引入obj格式模型---------------------three.js和高德地图结合引入obj格式模型---------------------three.js和高德地图结合引入...
基于 Express + Three.js的 3D 球体抽奖程序源码.zip
three. js的人体解剖图
HTML5+Three.js+WebGL实现的立方体矩阵起伏动画特效源码.zip
本书针对 Three.js 的几个重要话题分章节介绍。 第 1 章介绍 Three.js 和 WebGL 的背景资料,并通过简单的例子帮助读者实现第一个Three.js 应用。 第 2 章介绍照相机的设定。 第 3、4、5 章分别介绍几何形状、材质和...
适用于three.js显示pcd模型文件,找不到pcd文件
three.js适用于微信小程序的压缩版本,因微信小程序有分包2m的大小限制,three.js官方也对three.js进行了压缩处理,提供了压缩版的three.js
元宇宙初探React+Three.js制作3D全景漫游.zip元宇宙初探React+Three.js制作3D全景漫游.zip元宇宙初探React+Three.js制作3D全景漫游.zip元宇宙初探React+Three.js制作3D全景漫游.zip元宇宙初探React+Three.js制作3D...
import './three.js-master/build/three.js' import './three.js-master/examples/js/loaders/OBJLoader.js' import './three.js-master/examples/js/loaders/MTLLoader.js' import './three.js-master/examples/js/...
利用threejs实现海洋温度颜色体绘制
three.js开发必备(内附开发指南和three.js多版本)。包内文件:three.min.js多版本.zip和THREE.JS开发指南.pdf
使用three.js开发的3D机房项目
分享课程——Three.js实战常用技巧视频教程,课程一共12章,140多节,结合了很多实战案例,课程主要针对three.js实际开发中常用的一些技巧进行讲解,提供有配套的源码和文档资料下载!希望对那些想提升Three.js技能...
Three.js + Mapbox 实现泛光效果 Three.js + Mapbox 实现泛光效果 Three.js + Mapbox 实现泛光效果 Three.js + Mapbox 实现泛光效果 Three.js + Mapbox 实现泛光效果 Three.js + Mapbox 实现泛光效果 Three.js + ...
Three.js模型包,包含各种示例使用模型