three.js ThreeBSP subtract 後Material問題

发布于 2022-09-11 16:00:32 字数 5709 浏览 14 评论 0

您好! 我有問題想要請教各位大神
我利用網路範例,想用ThreeBSP 對兩個幾何圖形進行substract的動作
得到新的幾何圖形後試著用array的方式賦予物體六面貼圖material
但得到的結果卻只有將array內第一個的圖重複貼了6次....

用組數給予不同貼圖的方式可成功用在尚未substract的Mesh上
但有經過threebsp處理後的物件顯示上卻有問題...
不知道能否給予我一些意見謝謝><

完整代碼初學three請見諒

<meta charset="UTF-8">
<title>a</title>
<style type="text/css">
    html, body {
        margin: 0;
        height: 100%;
    }


</style>

</head>
<body onload="draw();">

var renderer;
let doo = new THREE.Group();

function initRender() {
    renderer = new THREE.WebGLRenderer({antialias: true});
    renderer.setClearColor(new THREE.Color(0x9C894C)); //設置背景顏色
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

//renderer.render(scene,camera);
}

var camera;
function initCamera() {
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.set(0, 200, 500);
}

var scene;
function initScene() {
    scene = new THREE.Scene();
}

var light;
function initLight() {
    scene.add(new THREE.AmbientLight(0x404040)); 
    light = new THREE.AmbientLight(0xffffff); 
    light.position.set(1, 1, 1);
    scene.add(light);
}
//在HTML加載完後執行
function initModel() {
    //輔助軸 ( 每一個軸的長度 )
    var object = new THREE.AxesHelper(500);
    scene.add(object);
//cube1
var cubeGeometry = new THREE.BoxGeometry(60, 120, 60-2*2);
var cubeMaterialArray = [];
 cubeMaterialArray.push    ( new THREE.MeshPhongMaterial( { map:new THREE.TextureLoader().load("images1")})); // right
 cubeMaterialArray.push    ( new THREE.MeshPhongMaterial( { map:new THREE.TextureLoader().load("images2")})); // left
 cubeMaterialArray.push    ( new THREE.MeshPhongMaterial( { map:new THREE.TextureLoader().load("images3") })); // top
 cubeMaterialArray.push    ( new THREE.MeshPhongMaterial( { map:new THREE.TextureLoader().load("images4")})); // bottom 
 cubeMaterialArray.push    ( new THREE.MeshPhongMaterial( { map:new THREE.TextureLoader().load("images5") }));// front 
 cubeMaterialArray.push    ( new THREE.MeshPhongMaterial( { map:new THREE.TextureLoader().load("images6") }));
var cubeMaterials = new THREE.MeshFaceMaterial(cubeMaterialArray);
var cube1 = new THREE.Mesh( cubeGeometry, cubeMaterials );
//scene.add(cube1);

//cube2
var cubeGeometry2 = new THREE.BoxGeometry(45.5,120 - 2*6.655 + 1 ,60-2*2);
var cubeMaterial = new THREE.MeshBasicMaterial({ color: '#8B0A50', wireframe: false});
var cube2 = new THREE.Mesh( cubeGeometry2, cubeMaterial );
//scene.add(cube2);

//ThreeBSP
var cube1BSP = new ThreeBSP(cube1);
var cube2BSP = new ThreeBSP(cube2);
var resultBSP = cube1BSP.subtract(cube2BSP);
var result = resultBSP.toMesh(cubeMaterials);
result.geometry.computeFaceNormals();
result.geometry.computeVertexNormals();
result.material.shading = THREE.FlatShading;

//add material
//var rack = new THREE.MeshFaceMaterial(cubeMaterials);
//result.material=rack;
scene.add(result);
console.log(result);
}

//生成模型 要建立模型時所需要的網格
function createMesh(geom) {
    //创建法向量纹理
    var meshMaterial = new THREE.MeshNormalMaterial({
        flatShading: THREE.FlatShading,
        transparent: true,
        opacity: 0.1
    });

    //创建一个线框纹理 是否渲染線而非面
    var wireFrameMat = new THREE.MeshBasicMaterial({opacity: 0.1, wireframeLinewidth: 0.5});
    wireFrameMat.wireframe = true;

    //创建模型
var mesh = new THREE.Mesh(geom, wireFrameMat);

    return mesh;
}

//初始化性能插件
var stats;

function initStats() {
    stats = new Stats();
    document.body.appendChild(stats.dom);
}




//用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放
var controls;

function initControls() {

    controls = new THREE.OrbitControls(camera, renderer.domElement);

    // 如果使用animate方法时，将此函数删除
    //controls.addEventListener( 'change', render );
    // 使动画循环使用时阻尼或自转 意思是否有惯性
    controls.enableDamping = true;
    //动态阻尼系数 就是鼠标拖拽旋转灵敏度
    //controls.dampingFactor = 0.25;
    //是否可以缩放
    controls.enableZoom = true;
    //是否自动旋转
    controls.autoRotate = false;
    //设置相机距离原点的最远距离
    controls.minDistance = 20;
    //设置相机距离原点的最远距离
    controls.maxDistance = 10000;
    //是否开启右键拖拽
    controls.enablePan = true;
}

//生成gui设置配置项
var gui;
function initGui() {
    //声明一个保存需求修改的相关数据的对象
    gui = {

    };
    var datGui = new dat.GUI();
    //将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）
}

function render() {
//requestAnimationFrame(render);
//doo.rotation.y+= 0.1;
    renderer.render(scene, camera);
}

//窗口变动触发的函数
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    render();
    renderer.setSize(window.innerWidth, window.innerHeight);

}

function animate() {
    //更新控制器
    controls.update();
    render();

    //更新性能插件
    stats.update();
    requestAnimationFrame(animate);
}

function draw() {
    initRender();
    initScene();
    initCamera();
    initLight();
    initModel();
    initControls();
    initStats();
    initGui();//方便的 debug 工具，可以很快速地讓我們調整參數，或是觀察目前的狀態
    animate();
    window.onresize = onWindowResize;
}

</script></body>
</html>
雖然有顯示這幾行但似乎沒影響?
图片描述