【发布时间】：2022-01-20 18:29:42
【问题描述】：
我正在尝试使用 ThreeJS 中的模板方法在实体对象（框）上打一个洞。在这方面，我在网上找到了很少的网页和类似的问题，但无法解决。特别是This link 是我想要实现的（即使一个洞就足够了）。但是链接中的代码使用的是巴比伦，我需要它在 ThreeJS 中。知道如何使用 ThreeJS 来实现这一点（或将其转换为 ThreeJS）吗？
更新 1：
ThreeJS 示例中有一个示例"misc_exporter_ply.html"（尽管它与模板缓冲区无关）所以我尝试使用它，因为它有一个只有一个盒子的简单场景。我在框内添加了另一个圆柱体来表示孔。
我可以让它工作，以便有一个可见的孔。然而它并不完美，因为模板缓冲区没有按预期工作：
这里是代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - exporter - ply</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="main.css">
</head>
<body>
<div id="info">
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - exporter - ply<br/><br/>
<button id="exportASCII">export ASCII</button> <button id="exportBinaryBigEndian">export binary (Big Endian)</button> <button id="exportBinaryLittleEndian">export binary (Little Endian)</button>
</div>
<script type="module">
import * as THREE from '../build/three.module.js';
import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { PLYExporter } from './jsm/exporters/PLYExporter.js';
let scene, camera, renderer, exporter, mesh, meshHole, mesh0, mesh1;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 200, 100, 200 );
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xa1caf1 );
//scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 );
//exporter = new PLYExporter();
//
const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
hemiLight.position.set( 0, 200, 0 );
scene.add( hemiLight );
const directionalLight = new THREE.DirectionalLight( 0xffffff );
directionalLight.position.set( 0, 200, 100 );
directionalLight.castShadow = true;
directionalLight.shadow.camera.top = 180;
directionalLight.shadow.camera.bottom = - 100;
directionalLight.shadow.camera.left = - 120;
directionalLight.shadow.camera.right = 120;
scene.add( directionalLight );
// ground
const ground = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0xaaaaaa, depthWrite: false } ) );
ground.rotation.x = - Math.PI / 2;
ground.receiveShadow = true;
scene.add( ground );
const grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
grid.material.opacity = 0.2;
grid.material.transparent = true;
scene.add( grid );
// mesh
const boxHole = new THREE.CylinderGeometry( 15, 15, 65, 32, 32 );//BoxGeometry( 20, 20, 51 );
let matHole = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
matHole.colorWrite = false;
meshHole = new THREE.Mesh( boxHole, matHole );
meshHole.castShadow = true;
meshHole.position.y = 50;
meshHole.rotation.x = Math.PI / 2;
scene.add( meshHole );
const geometry = new THREE.BoxGeometry( 50, 50, 50 );
mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial({ color: 0xaaaaaa }) );
mesh.castShadow = true;
mesh.position.y = 50;
scene.add( mesh );
// back faces
const mat0 = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
mat0.side = THREE.FrontSide;
mat0.depthWrite = false;
mat0.depthTest = false;
mat0.colorWrite = false;
//mat0.stencilWrite = true;
mat0.stencilFunc = THREE.AlwaysStencilFunc;
mat0.stencilFail = THREE.KeepStencilOp;
//mat0.stencilZFail = THREE.IncrementWrapStencilOp;
//mat0.stencilZPass = THREE.ReplaceStencilOp;
mat0.stencilRef = 1;
const boxHole0 = new THREE.CylinderGeometry( 15, 15, 65, 32, 32 );
mesh0 = new THREE.Mesh( boxHole0, mat0 );
mesh0.rotation.x = Math.PI / 2;
mesh0.castShadow = true;
mesh0.position.y = 50;
scene.add( mesh0 );
// front faces
const mat1 = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
mat1.side = THREE.DoubleSide;
//mat1.depthWrite = false;
//mat1.depthTest = true;
//mat1.colorWrite = false;
//mat1.stencilWrite = true;
mat1.depthFunc=THREE.AlwaysDepth;
mat1.stencilFunc = THREE.EqualStencilFunc;
mat1.stencilFail = THREE.IncrementStencilOp;
//mat1.stencilZFail = THREE.DecrementWrapStencilOp;
//mat1.stencilZPass = THREE.DecrementWrapStencilOp;
mat1.stencilRef = 1;
const boxHole1 = new THREE.CylinderGeometry( 15, 15, 65, 32, 32, true );
mesh1 = new THREE.Mesh( boxHole1, mat1 );
mesh1.rotation.x = Math.PI / 2;
mesh1.castShadow = true;
mesh1.position.z = 0;
mesh1.position.y = 50;
scene.add( mesh1 );
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMap.enabled = true;
renderer.localClippingEnabled = true;
document.body.appendChild( renderer.domElement );
//
const controls = new OrbitControls( camera, renderer.domElement );
controls.target.set( 0, 25, 0 );
controls.update();
//
window.addEventListener( 'resize', onWindowResize );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
const link = document.createElement( 'a' );
link.style.display = 'none';
document.body.appendChild( link );
</script>
</body>
【问题讨论】：
-
我发送的链接没有使用任何布尔运算。它完全使用模板缓冲区完成。
-
确实，我被看似具有适当法线的孔所欺骗！示例中使用的调用是简单的 1 对 1 WebGL 映射，因此在没有巴比伦的情况下复制它应该不会太难。
-
感谢您对此进行调查。我已经使用 webgl 尝试更新了这个问题，但到目前为止还没有运气。你介意看看这个吗？
-
你不是说你想要纯 webgl 吗？那么“到目前为止没有运气”是什么意思？
-
抱歉抱歉。我对 webgl 和 ThreeJS 有点陌生。我的意思是把它翻译成 ThreeJS。我更新了问题。问题中粘贴的代码是我未能创建洞的尝试。