网站推广淘宝联盟怎么做,免费外贸网站模板,建设网站需要几部分,舆情监测系统永久免费默认物体均为居中#xff0c;如果指定位置没有发生偏移#xff0c;可能是因为在执行布尔操作之前没有正确设置变换。确保在进行布尔运算之前应用所有必要的变换。以下是经过修正的完整代码示例#xff0c;它会确保圆柱正确旋转并与盒子进行 CSG 操作。
安装依赖
首先如果指定位置没有发生偏移可能是因为在执行布尔操作之前没有正确设置变换。确保在进行布尔运算之前应用所有必要的变换。以下是经过修正的完整代码示例它会确保圆柱正确旋转并与盒子进行 CSG 操作。
安装依赖
首先确保安装了必要的依赖
npm install three three-csg-ts创建 Vue 组件
在 src 目录下创建一个新的组件文件 ThreeScene.vue并在其中实现 Three.js 渲染和 three-csg-ts 操作。
以下是 ThreeScene.vue 的代码示例
templatediv refthreeContainer classthree-container/div
/templatescript langts
import { defineComponent, onMounted, ref } from vue;
import * as THREE from three;
import { OrbitControls } from three/examples/jsm/controls/OrbitControls;
import { CSG } from three-csg-ts;export default defineComponent({name: ThreeScene,setup() {const threeContainer refHTMLDivElement | null(null);onMounted(() {if (!threeContainer.value) return;// 创建场景、相机和渲染器const scene new THREE.Scene();const camera new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);const renderer new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);threeContainer.value.appendChild(renderer.domElement);// 添加轨道控制const controls new OrbitControls(camera, renderer.domElement);// 创建一个盒子const boxGeometry new THREE.BoxGeometry(2, 2, 2);const boxMaterial new THREE.MeshStandardMaterial({ color: 0x00ff00 });const boxMesh new THREE.Mesh(boxGeometry, boxMaterial);// 创建一个圆柱const cylinderGeometry new THREE.CylinderGeometry(0.5, 0.5, 2, 32);const cylinderMaterial new THREE.MeshStandardMaterial({ color: 0xff0000 });const cylinderMesh new THREE.Mesh(cylinderGeometry, cylinderMaterial);cylinderMesh.rotation.z Math.PI / 2;cylinderMesh.position.x -0.5; // 调整位置使其在左半边// 更新圆柱的变换矩阵cylinderMesh.updateMatrix();// 执行 CSG 操作const boxCSG CSG.fromMesh(boxMesh);const cylinderCSG CSG.fromMesh(cylinderMesh);const subtractedCSG boxCSG.subtract(cylinderCSG);// 转换回 Three.js 网格const resultMesh CSG.toMesh(subtractedCSG, boxMesh.matrix);resultMesh.material boxMaterial; // 应用相同的材质scene.add(resultMesh);// 添加光源const light new THREE.DirectionalLight(0xffffff, 1);light.position.set(5, 5, 5).normalize();scene.add(light);camera.position.z 5;const animate () {requestAnimationFrame(animate);resultMesh.rotation.x 0.01;resultMesh.rotation.y 0.01;controls.update();renderer.render(scene, camera);};animate();// 处理窗口大小调整window.addEventListener(resize, () {camera.aspect window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);});});return {threeContainer,};},
});
/scriptstyle
.three-container {width: 100%;height: 100vh;
}
/style整合到主应用
确保在你的主应用组件例如 App.vue中使用 ThreeScene 组件
templatediv idappThreeScene //div
/templatescript langts
import { defineComponent } from vue;
import ThreeScene from ./components/ThreeScene.vue;export default defineComponent({name: App,components: {ThreeScene,},
});
/scriptstyle
#app {width: 100%;height: 100vh;margin: 0;
}
/style总结
代码确保在进行 CSG 操作之前正确设置和更新了圆柱体的变换矩阵。这样圆柱体的旋转和位置调整可以正确应用从而在正方体的左半边进行交互式挖洞。
这里要注意,如需移动物体在非居中位置进行挖洞在合理的位置添加以下代码否则无法再指定位置进行开挖
// 更新圆柱的变换矩阵cylinderMesh.updateMatrix();
