标签: threecsg

bufferGeometry 上的 CSG 操作

我目前正在使用 Three.js 几何类来创建一个形状,然后对该形状执行多个 CSG 操作。从而不断地重绘形状。

执行多个 csg 操作的过程很慢,因为我使用光线投射来获得点击形状并执行所选形状和预定义形状(任何形状或几何体)的 CSG。

所以我的问题是:

  • 使用缓冲区几何会加速我的 CSG,但是有没有任何库可以在THREE.BufferGeometry实例上执行 CSG 操作?

  • 有没有办法可以通过使用任何其他方法来加快这个过程?

这是我的代码流:

var objects = [];

init();
render();

function init(){
 //scene and camera setup ... etc
   var sphere =  new THREE.SphereGeometry(200, 32, 32);
   objects.push(sphere);
 // raycasting config
 // bind mouse click and move event
 }
  function onMouseDown() {

   var intersects = raycaster.intersectObjects(objects);
   .....
   // get intersected shape ..
   // perfrom csg with predifend shape .
   // Also contains steps to convert 
      geometry to *CSG …
Run Code Online (Sandbox Code Playgroud)

javascript three.js threecsg buffer-geometry

4
推荐指数
1
解决办法
936
查看次数

Three.js - 合并多个几何/网格,删除公共区域

我试图将两个几何/网格(红色和蓝色)合并为一个独特的几何/网格.但是在创建一个新几何体并应用geometry.merge()之后,我发现所有内部顶点和面仍然存在(绿色区域).

我想删除所有额外的信息,因为它会在渲染的面上产生视觉毛刺,而且我也无法正确计算合并的体积.我需要像最后一张图片一样的东西,一个只包含最小外部/外部的网格面和顶点,删除内部的.

在此输入图像描述

我尝试应用ThreeCSG来减去网格,但我发现它在尝试加载大型模型时不断崩溃.我还尝试使用raycaster来检测常见的面孔,但这对大型模型的性能也有很大的影响.

ThreeCSG是唯一的好选择吗?但由于我不能在每个模型上使用它,我应该丢弃它.我想快速应用一些不太依赖于网格三角形数量的东西.

javascript vertices three.js threecsg face

3
推荐指数
1
解决办法
1596
查看次数

Three.js - 为什么csg.js不起作用?

我尝试使用csg.js-functions从一个盒子中切出一个球体,但它不起作用?我在http://learningthreejs.com/blog/2011/12/10/constructive-solid-geometry-with-csg-js/上阅读了教程,但它仍然无效.

<html>
    <head>
        <title>Experiment</title>
    </head>

    <body>
        <script src="three_js\build\three.min.js"></script>
        <script src="ThreeCSG.js"></script> 
        <script src="csg.js"></script>          
        <script type="text/javascript"> 

    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

    var renderer = new THREE.WebGLRenderer();

    renderer.setSize( window.innerWidth-20, window.innerHeight -20);
    document.body.appendChild( renderer.domElement );   

    var geometry1 = new THREE.BoxGeometry( 10, 10, 10);
    var material = new THREE.MeshPhongMaterial( {specular: "#fdfb57", color: "#d8d613", emissive: "#6b6a0d", side: THREE.DoubleSide} );
    var box = new THREE.Mesh(geometry1, material);
    var sphere = new THREE.Mesh(new THREE.SphereGeometry(5, 32, 32), material); …
Run Code Online (Sandbox Code Playgroud)

javascript geometry three.js threecsg

1
推荐指数
1
解决办法
1828
查看次数