我目前正在使用 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) 我试图将两个几何/网格(红色和蓝色)合并为一个独特的几何/网格.但是在创建一个新几何体并应用geometry.merge()之后,我发现所有内部顶点和面仍然存在(绿色区域).
我想删除所有额外的信息,因为它会在渲染的面上产生视觉毛刺,而且我也无法正确计算合并的体积.我需要像最后一张图片一样的东西,一个只包含最小外部/外部的网格面和顶点,删除内部的.
我尝试应用ThreeCSG来减去网格,但我发现它在尝试加载大型模型时不断崩溃.我还尝试使用raycaster来检测常见的面孔,但这对大型模型的性能也有很大的影响.
ThreeCSG是唯一的好选择吗?但由于我不能在每个模型上使用它,我应该丢弃它.我想快速应用一些不太依赖于网格三角形数量的东西.
我尝试使用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)