ThreeJS点材质形状问题
和 SpriteMaterial 精灵材质一样，点材质THREE.PointsMaterial的形状默认也是矩形。改变点材质的形状就是给它贴个背景透明的纹理贴图，但对ThreeJS内置的几何体而言，依附其上的 map 并不能完美改变点材质的形状，试看：
<img style="position:absolute;width:200px;height:200px;z-index:10;" src="https://638183.freep.cn/638183/web/svg/sunfl-2.svg" alt="" title="纹理原图" />
<script type="module">
import { THREE, scene, camera, renderer, clock, basic3, click3 } from 'https://638183.freep.cn/638183/3dev/3/3basic.js';
basic3();
new THREE.TextureLoader().load(
'https://638183.freep.cn/638183/web/svg/sunfl-2.svg',
(texture) => {
texture.colorSpace = THREE.SRGBColorSpace;
const geometry = new THREE.SphereGeometry(); // 球体几何体
const material = new THREE.PointsMaterial({ size: 0.15, map: texture, transparent: true }); // 点材质
const points = new THREE.Points(geometry, material);
scene.add(points);
renderer.render(scene, camera);
}, undefined, (err) => console('error:', err)
);
</script>
运行代码可以看到球体不完美，球体图像中的点材质保留着矩形的形状，texture 纹理贴图以一个整体分摊给各个点，所有的点并不能完美以贴图构图。要让纹理成为每一个点的图像形状，需要对几何体进行重构，一个简单的实现思路是：创建一个缓冲几何体 BufferGeometry，它从球体几何体 SphereGeometry 那里获取所有顶点的位置（position）信息，然后，使用该缓冲几何体+点材质构建图像。具体代码如下：
<img style="position:absolute;width:200px;height:200px;z-index:10;" src="https://638183.freep.cn/638183/web/svg/sunfl-2.svg" alt="" title="纹理原图" />
<script type="module">
import { THREE, scene, camera, renderer, clock, basic3, click3 } from 'https://638183.freep.cn/638183/3dev/3/3basic.js';
basic3();
const positions = new THREE.SphereGeometry().attributes.position;
new THREE.TextureLoader().load(
'https://638183.freep.cn/638183/web/svg/sunfl-2.svg',
(texture) => {
texture.colorSpace = THREE.SRGBColorSpace;
const geometry = new THREE.BufferGeometry(); // 球体几何体
geometry.setAttribute('position', positions);
const material = new THREE.PointsMaterial({ size: 0.15, map: texture, transparent: true }); // 点材质
const points = new THREE.Points(geometry, material);
scene.add(points);
renderer.render(scene, camera);
}, undefined, (err) => console('error:', err)
);
</script>
这回球体图像是完整的，而且，重要的是，“绘制”球体的点材质完美贴上了纹理，纹理图片的形状就是每一个点的形状。
前一篇: ThreeJS点材质着色问题
下一篇: 理解CSS 3d transform转换
发表评论:
评论列表 [1条]
#1 | 飞飞 于 2025-6-30 20:04 发布: 矮油，这个是纹理图片密排成球体。。怪好看的
