ThreeBSP.js 是 three.js 的一个扩展库，可以实现对模型的数学布尔运算，实际上就是个个点的重新组合和拆分，来重新生成 几何体对象和网格模型。
本实示例浏览地址:
ThreeBSP构造函数
function ThreeBSP(treeIsh, matrix) {
this.matrix =
this.intersect = __bind(this.intersect, this);
this.union = __bind(this.union, this);
this.subtract = __bind(this.subtract, this);
this.toGeometry = __bind(this.toGeometry, this);
this.toMesh = __bind(this.toMesh, this);
this.toTree = __bind(this.toTree, this);
if (this.matrix == null) {
this.matrix = new THREE.Matrix4();
this.tree = this.toTree(treeIsh);
intersect(交集)
使用这个方法可以从获取两个几何体的共同部分
union (并集)
使用这个方法、可以把两个几何体联合在一起
subtract (差集)
使用这个方法可以从一个几何体中移除另一个几何体与这个几何体的重复部分
创建两个几何体
圆柱和立方体
var cylinderGeometry = new THREE.CylinderGeometry(100,100,20,100,20);
var boxGeometry = new THREE.BoxGeometry(100,100,100,50,50);
var materials = new THREE.MeshNormalMaterial({wireframe:true});
var cylinder = new THREE.Mesh(cylinderGeometry,materials);
var box = new THREE.Mesh(boxGeometry, materials);
并且这两个模型交织在一起
将这两个Mesh对象转换成 BSP 对象
引入 库文件
&script src="../libs/extend/ThreeBSP.js"&&/script&
var cylinderBSP = new ThreeBSP(cylinder);
var boxBSP = new ThreeBSP(box);
1 求圆柱和立方体的交集(interset)
var result = cylinderBSP.intersect(boxBSP);
var mesh = result.toMesh();
mesh.material =
scene.add(mesh);
2 求圆柱和立方体的并集(union)
var result = cylinderBSP.union(boxBSP);
3 求圆柱和立方体的差集(subtract)
var result = cylinderBSP.subtract(boxBSP);
&!DOCTYPE html&
lang="en"&
charset="UTF-8"&
&threeBSP布尔运算&
margin: 0;
overflow: hidden;
src="../libs/jquery-1.9.1.js"&&
src="../libs/build/three.js"&&
src="../libs/examples/js/libs/stats.min.js"&&
src="../libs/examples/js/Detector.js"&&
src="../libs/examples/js/controls/TrackballControls.js"&&
src="../libs/examples/js/libs/dat.gui.min.js"&&
src="../libs/extend/ThreeBSP.js"&&
id="WebGL-output"&&
id="Stats-output"&&
$(function () {
var stats = initStats();
var scene,camera,renderer,controls,guiControls,
function initScene(){
scene = new THREE.Scene();
function initCamera() {
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 10000);
camera.position.set(0, 200, 300);
camera.lookAt(new THREE.Vector3(0, 0, 0));
function initRenderer() {
if (Detector.webgl){
renderer = new THREE.WebGLRenderer({antialias : true});
renderer = new THREE.CanvasRenderer();
renderer.setClearColor( 0x050505 );
renderer.setSize(window.innerWidth , window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowM
$('#WebGL-output').append(renderer.domElement);
initLight() {
var ambientLight = new THREE.AmbientLight( 0xEEE0E5 );
scene.add(ambientLight);
var spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set(-100, 200,-200);
scene.add(spotLight);
function initControls() {
controls = new THREE.TrackballControls(camera, renderer.domElement);
function initGui(){
guiControls = new function(){
this.intersect = createMesh('intersect');
this.union = createMesh('union');
this.subtract = createMesh('subtract');
var gui = new dat.GUI();
gui.add(guiControls,'intersect');
gui.add(guiControls,'union');
gui.add(guiControls,'subtract');
gui.close();
function initObject() {
var cylinderGeometry = new THREE.CylinderGeometry(100,100,20,50,20);
var boxGeometry = new THREE.BoxGeometry(100,100,100,30,30);
var materials1 = new THREE.MeshLambertMaterial({wireframe:true,color : 0x9AFF9A});
var materials2 = new THREE.MeshLambertMaterial({wireframe:false,color : 0x9F79EE});
var cylinder = new THREE.Mesh(cylinderGeometry,materials1);
var box = new THREE.Mesh(boxGeometry, materials1);
scene.add(cylinder);
scene.add(box);
var cylinderBSP = new ThreeBSP(cylinder);
var boxBSP = new ThreeBSP(box);
objects = [];
objects.push(cylinderBSP);
objects.push(boxBSP);
objects.push(materials2);
function createMesh(type) {
function funResult(){
if (scene.getObjectByName('mesh') != null){
scene.remove(scene.getObjectByName('mesh'));
switch(type){
case 'subtract': result = objects[0].subtract(objects[1]);
case 'union': result = objects[0].union(objects[1]);
case 'intersect': result = objects[0].intersect(objects[1]);
var mesh = result.toMesh();
mesh.material = objects[2];
mesh.name = 'mesh';
scene.add(mesh);
return funR
function initStats() {
var stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
$('#Stats-output').append(stats.domElement);
function init() {
initScene();
initCamera();
initRenderer();
initLight();
initObject();
initControls();
initGui();
function update() {
controls.update();
controls.handleResize();
stats.update();
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
animate();
three.js 06-06 之 Binary Operations 几何体
Three.js 实现3D房间布局的简单实现
51 使用ThreeBSP库进行Three.js网格组合
three.js布尔运算源代码
14 - three.js 笔记 - 使用 THREE.DragControls 实现模型拖拽
没有更多推荐了，怎么用JS画出圆柱形罐体内液体高度效果图
[问题点数：100分，无满意结帖，结帖人cdc8596]
本版专家分：0
结帖率 100%
CSDN今日推荐
本版专家分：0
匿名用户不能发表回复！
其他相关推荐随笔分类 - three-js
摘要: 1.使用requestAnimationFrame()来驱动动画 从前，Web应用使用定时器（timer）来控制页面内容动画，通过setTimeout()或setInterval()这两个函数。随着Web 应用开始包含更复杂的动画和交互，这种方式明显遭遇到一些关键问题。 1）.定时器也设置好的恒定间隔来调用函数，无论是否是绘制图形的最佳时机。 2).在定时器回调中执行的Ja...
heavi 阅读(145) |
摘要: WebGL可以用来做3D效果的全景图呈现，例如故宫的全景图。但有时候我们不仅仅只是呈现全景图，还需要增加互动。故宫里边可以又分了很多区域，例如外朝中路、外朝西路、外朝东路等等。我们需要在3D图上做一些标记表示某个小的区域。当点击这个标记时，界面切换到对应标记区域的全景图。下图是实现此功能的一个小DE
heavi 阅读(1974) |
摘要: 我们要实现的功能比较简单：首先通过坐标定位、我的位置、地址搜索等方式，调用google map api获取地址信息。然后根据地址信息中的全景信息获取当前缩放级别的全景信息。最终把这些全景信息通过WebGL方法显示在屏幕上。 了解了Google街景图的呈现原理，像国内的街景呈现，景区全景呈现不外乎都是
heavi 阅读(882) |
摘要: threex.domevents是一个three.js的扩展库，支持3D场景的交互。和我们操作DOM树的事件相似，名称都是一样的。所以使用起来非常方便。另外他也提供了连接操作。单击网格可实现跳转功能。 如果仅仅使用Dom事件，需要引入： 如果需要使用链接跳转，还需要引入： 不管是使用事件还是跳转，都得创建DomEvents对象： var domEvents =...
heavi 阅读(301) |
摘要: 在本篇随笔中，我们学习下什么是对象选择，投影和反投影是如何工作的，怎样使用Three.js构建可使用鼠标和对象交互的应用。例如当鼠标移到对象，对象变成红色，鼠标移走，对象又恢复原来的颜色。 本篇随笔的源代码来自于：https://github.com/sole/three.js-tutorials/tree/master/object_picking 这里还有更多的例子可供...
heavi 阅读(755) |
摘要: 1.设置后期处理 设置Three.js库为后期处理做准备，我们需要通过以下步骤对当前的配置进行修改： 1）创建一个EffectComposer（效果组合器）对象，然后在该对象上添加后期处理通道。 2）配置该对象，使它可以渲染我们的场景，并应用额外的后期处理步骤。 3）在render循环中，使用Eff
heavi 阅读(1685) |
摘要: 1.创建可用Physijs的基本Three.js场景 创建一个可用Physijs的Three.js场景非常简单，只要几个步骤即可。首先我们要包含正确的文件， 需要引入physi.js文件。实际模拟物理场景时非常耗费CPU的，如果我么能在render线程中做的话，场景的帧频会受到严重的影响。为了弥补这
heavi 阅读(1037) |
摘要: 1.如何通过鼠标获取网格对象 首先需要把鼠标的起始位置在左上角的屏幕坐标转换为笛卡尔坐标。然后将坐标转为为以Camera为中心点的三维空间坐标。接下来根据摄像头位置和鼠标位置的法向量创建射线对象。最终根据射线对象的intersectObjects函数确认哪个网格被选中。 下面是比较经典的使用方法：
heavi 阅读(479) |
摘要: 加载和使用纹理需要了解以下几个方面：在Three.js里加载纹理并应用到网格上；使用凹凸贴图和法线贴图为网格添加深度和细节；使用光照贴图创建假阴影；使用环境贴图在材质上添加反光细节；使用光亮贴图，让网格的某些部分变得“闪亮”；通过修改网格的UV贴图，对贴图进行微调；将HTML5画布和视频元素作为纹理
heavi 阅读(1007) |
摘要: 1.对象合并 使用THREE.Group对象作为组合对象，调用它的add函数附加其他几何体。如下面的代码，创建了两个几何体sphere、cube，然后调用group的add函数，把两个几何体组合在一起。代码中的redraw函数在最后调用了position.BoundingBox()函数，用来定位组合
heavi 阅读(483) |
摘要: 1.粒子材质和粒子几何体 创建粒子系统的点，可以存放在Geometry几何体中。使用Geometry的vertices保存点、colors保存点的颜色。但我们必须使用粒子的专用材质对象PointCloudMaterial（原名叫做ParticleBasicMaterial）设置材质。包含的属性如下列
heavi 阅读(1054) |
摘要: 1.简单几何体 three.js提供的稍微简单点的几何体包括有：PlaneGeometry(平面)、CircleGeometry（圆形）、ShapeGeometry（塑性）、CubeGeometry（立方体）、CylinderGeometry（圆柱）、TorusGeometry（圆环）、TorusK
heavi 阅读(2006) |
摘要: 1.three.js库提供的光源 three.js库提供了一些列光源，而且没种光源都有特定的行为和用途。这些光源包括： 光源名称/描述 AmbientLight(环境光）/这是一种基础光源，它的颜色会添加到整个场景和所有对象的当前颜色上 PointLight(点光源)/空间中的一点，朝所有的方向发射
heavi 阅读(1193) |
摘要: 1.three.js提供哪些材质？ MeshBasicMaterial(网格基础材质)/基础材质，，可以用它富裕几何体一种简单的亚瑟，或者显示几何体的线框 MeshDepthMaterial（网格深度材质）/根据网格到相机的举例，这种材质决定如何给网格染色 MeshNormalMaterial(网格
heavi 阅读(1801) |
摘要: 1.一个场景至少需要的三种类型组件 相机/决定哪些东西将在屏幕上渲染 光源/他们会对材质如何显示，以及生成阴影时材质如何使用产生影响 物体/他们是在相机透视图里主要的渲染队形：方块、球体等 2.浏览器兼容 Moziller Firefox：4.0版本以后开始支持； Google Chrome：第9版以后开始支持 Safari：5.1版本开始支持； Op...
heavi 阅读(748) |Three.js入门
Three.js入门Three.js 入门
1.什么是Three.js
Three.js是一个3D JavaScript库。封装了底层的图形接口，使得程序员可以方便简单的实现三维场景的渲染。
下载Three.js源码
在html文件中引入Three.js文件
由于WebGL的渲染是需要Canvas元素的。所以创建一个Canvas元素(也可以由Three.js来创建)
在JS代码中定义一个init函数，会在文档加载完成后执行
一个典型的Three.js程序至少要包括渲染器、场景、照相机，以及在场景中创建的物体。
渲染器将和canvas元素进行绑定 例如：
var renderer = new THREE.WebGLRenderer({
canvas:document.getElementById('main');
上述代码就将渲染器与id为 'main' 的cnavas元素绑定了。当然我们也可以通过Three.js来创建canvas并将其与渲染器进行绑定
var renderer = new THREE.WebGLRenderer();
renderer.setSize(400, 300);
document.getElementsByTagName('body')[0].appendChild(renderer.domElement);
renderer.setClearColor(0x000000);
上述代码就创建了一个400*400的canvas并将其与渲染器进行了绑定。
Three.js中所有的物体都是要添加到场景中的，简单使用：
var scene = new THREE.Scene();
照相机定义了三维框架到二维屏幕的投影方式,投影方式有正交投影与透视投影,所以照相机又分为正交照相机与透视照相机
正交投影照相机
构造函数是:
THREE.OrthographicCamera(left,right,top,bottom,near,far);
left/right/top/bottom:左边界，是可视范围的左平面，可被渲染的最左面near/far:近面/远面，场景渲染的起/止点。
创建一个直透视投影的照相机：
var camera = new THREE.PerspectiveCamera(45,4/3,1,1000);
camera.position.set(0,0,5);
scene.add(camera);
创建一个长方体：
var cube = new THREE.Mesh(
new THREE.CubeGeometry(1,2,3),
new THREE.MeshBasicMaterial({
color:0xff0000
scene.add(cube);
透视照相机
构造函数是：
THREE.PerspectiveCamera(fov, aspect, near, far);
fov:视场，这是从相机位置能看到的部分场景aspect:渲染结果输出区的横纵方向上的比值
6.基本几何体
THREE.CubeGeometry(width, height, depth, widthSegments, heightSegments, depthSegment
前3个参数为三个方向上的长度，后三个参数是在三个方向上的分段数。
THREE.PlaneGeometry(width, height, widthSegments, heightSegments);
THREE.SphereG
radius 是半径； segmentsWidth 表示经度上的切片数； segmentsHeight 表示纬度上的切片数； phiStart 表示经度开始的弧度； phiLength 表示经度跨过的弧度；thetaStart 表示纬度开始的弧度； thetaLength 表示纬度跨过的弧度。
.CircleGeometry(, , , );
THREE.CylinderGeometry(radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded);
openEnded表示是否有顶面和底面，默认为false，表示有顶面和底面.
THREE.TorusGeometry(radius, tube, radialSegments, tubularSegments, arc);
tube:内部管道半径; arc:圆环面的弧度，默认为2π
THREE.TorusKnotGeometry(radius, tube, radialSegments, tubularSegments, p, q, heightScale);
p和q:控制圆环结的样式; heightScale:在z轴上的缩放。编写js程序计算圆柱体积和表面积_百度知道
编写js程序计算圆柱体积和表面积
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
好大的玉米棒
好大的玉米棒
//表面积function&getArea(radius,height){&&&&return&2*Math.PI*radius*height+2*Math.PI*radius*}//体积function&getVolume(radius,height){&&&&return&Math.PI*radius*radius*}
为你推荐：
其他类似问题
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。}