做百度移动网站点,重庆 建网站,网页版梦幻西游下载,关键词数据分析工具有哪些本文 我们说一下 线框几何体 想将一个几何体 以线框形式展现 threeJS中 有两种类可以实现 第一种 WireframeGeometry 这种几何体 其实就类似于 将材质中的 wireframe 开启 这种方法 之前我们也用过 还有一种 就是 EdgesGeometry 边缘几何体 我们先将代码写成这样 import .…本文 我们说一下 线框几何体 想将一个几何体 以线框形式展现 threeJS中 有两种类可以实现 第一种 WireframeGeometry 这种几何体 其实就类似于 将材质中的 wireframe 开启 这种方法 之前我们也用过 还有一种 就是 EdgesGeometry 边缘几何体 我们先将代码写成这样 import ./style.css import * as THREE from three; import { OrbitControls } from three/examples/jsm/controls/OrbitControls.js; import { GLTFLoader } from three/examples/jsm/loaders/GLTFLoader.js;//创建相机 const camera new THREE.PerspectiveCamera(45, //视角 视角越大 能看到的范围就越大window.innerWidth / window.innerHeight,//相机的宽高比 一般和画布一样大最好0.1,1000 ); const scene new THREE.Scene(); const gltfLoader new GLTFLoader(); gltfLoader.load(/gltf/scene.gltf,(gltf) {gltf.scene.traverse((child) {if (child.isMesh) {child.frustumCulled false;child.castShadow true;child.material.emissive child.material.color;child.material.emissiveMap child.material.map;}});scene.add(gltf.scene);} );//c创建一个canvas容器 并追加到 body上 const renderer new THREE.WebGLRenderer(0); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);//设置相机位置 这里 我们设置Z轴 大家可以试试 S Y 和 Z 都是可以的 camera.position.z 5; //设置相机默认看向哪里 三个 0 代表 默认看向原点 camera.lookAt(0, 0, 0); //将内容渲染到元素上 renderer.render(scene, camera); const controls new OrbitControls(camera, renderer.domElement);function animate() {controls.update();requestAnimationFrame(animate);/*cube.rotation.x 0.01;cube.rotation.y 0.01;*/renderer.render(scene, camera); } animate();gltf/scene.gltf 是我项目中的一个 gltf 3D资源文件 现在 我希望用边缘几何体 将这个3D元素 拆解显示 那么 先这样改一下 const gltfLoader new GLTFLoader(); gltfLoader.load(/gltf/scene.gltf,(gltf) {gltf.scene.traverse((child) {if (child.isMesh) {child.frustumCulled false;child.castShadow true;child.material.emissive child.material.color;child.material.emissiveMap child.material.map;let geometry child.geometry;let edgesGeometry new THREE.EdgesGeometry(geometry);}});scene.add(gltf.scene);} );threeJS中 LineSegments 可以生成线段 但是 现在 我们需要先用 LineBasicMaterial 创建一个线段的材质 整个复制 然后 我们只需要里面的 color 颜色属性 都弄好之后 我们就可以通过 LineSegments 生成一个线框几何体 然后将他add到场景中了 整体代码如下 const gltfLoader new GLTFLoader(); gltfLoader.load(/gltf/scene.gltf,(gltf) {gltf.scene.traverse((child) {if (child.isMesh) {child.frustumCulled false;child.castShadow true;child.material.emissive child.material.color;child.material.emissiveMap child.material.map;let geometry child.geometry;let edgesGeometry new THREE.EdgesGeometry(geometry);const material new THREE.LineBasicMaterial( {color: 0xffffff} );let edges new THREE.LineSegments(edgesGeometry, material);// 添加倒场录scene.add(edges);}});scene.add(gltf.scene);} );但是运行之后 你会发现 两个几何体重合了 我们这里 可以将这个线框几何体 移动一下 然后 我们线框几何体就前面去了 但是 这里 我们明显发现 我们原来的3D元素 是有旋转的 但是线框几何体没有 这边 我们可以通过世界举证 解决这个问题 我们这样写 const gltfLoader new GLTFLoader(); gltfLoader.load(/gltf/scene.gltf,(gltf) {gltf.scene.traverse((child) {if (child.isMesh) {child.frustumCulled false;child.castShadow true;child.material.emissive child.material.color;child.material.emissiveMap child.material.map;let geometry child.geometry;let edgesGeometry new THREE.EdgesGeometry(geometry);const material new THREE.LineBasicMaterial( {color: 0xffffff} );let edges new THREE.LineSegments(edgesGeometry, material);// 添加倒场录child.updateMatrixWorld(true, true);edges.matrix.copy(child.matrixWorld);edges.matrix.decompose(edges.position, edges.quaternion, edges.scale, edges.rotation);scene.add(edges);}});scene.add(gltf.scene);} );decompose 会同步他们的旋转 位置等属性 但是 我们这里 好像是用顶点旋转做的 那直接简单粗暴 我们直接也旋转它 直接改 rotation 属性 然后 前面也说了 还有一种 WireframeGeometry 线框几何体的方式 直接将 let edgesGeometry new THREE.EdgesGeometry(geometry);换成 let edgesGeometry new THREE.WireframeGeometry(geometry);因为他也是 可以直接传入原几何体对象 然后生成几何体内容 通过材质 LineSegments 就可以用了的 const gltfLoader new GLTFLoader(); gltfLoader.load(/gltf/scene.gltf,(gltf) {gltf.scene.traverse((child) {if (child.isMesh) {child.frustumCulled false;child.castShadow true;child.material.emissive child.material.color;child.material.emissiveMap child.material.map;let geometry child.geometry;const material new THREE.LineBasicMaterial( {color: 0xffffff} );let edgesGeometry new THREE.WireframeGeometry(geometry);let edges new THREE.LineSegments(edgesGeometry, material);// 添加倒场录child.updateMatrixWorld(true, true);edges.matrix.copy(child.matrixWorld);edges.matrix.decompose(edges.position, edges.quaternion, edges.scale, edges.rotation);scene.add(edges);}});//scene.add(gltf.scene);} );这种 看着就会乱很多 因为整体都是 三角形构成的