1、纹理贴图
javascript
import * as THREE from 'three'
const loader = new THREE.TextureLoader(); //纹理加载器
const texture = loader.load('./earth.png'); .load()方法加载图像,返回一个纹理对象Texture
const material = new THREE.MeshLambertMaterial({
map: texture
});
texture.colorSpace = THREE.SRGBColorSpace;//设置为SRGB颜色空间
const geometry = new THREE.SphereGeometry(100)
const mesh = new THREE.Mesh(geometry, material);
export default mesh
效果:把一个地球的图片贴到一个球体上
2、纹理对象阵列,实现地面效果。
javascript
主要使用的是设置阵列模式和uv两个方向纹理重复数量
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(30, 30)
javascript
import * as THREE from 'three';
const geometry = new THREE.PlaneGeometry(100, 100);
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('./floor.png');
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(30, 30)
const material = new THREE.MeshBasicMaterial({
map: texture,
side: THREE.DoubleSide
});
const mesh = new THREE.Mesh(geometry, material);
mesh.rotateX(Math.PI / 2)
export default mesh;
3、UV坐标
UV坐标的作用是从纹理贴图上提取像素映射到网格模型mesh的表面
4、背景透明png贴图
设置材质的transparent: true
,这样png图片背景完全透明。
5、通过纹理的offset偏移属性实现动画
javascript
import * as THREE from 'three';
const textureLoader = new THREE.TextureLoader(); //创建纹理加载器
const texture = textureLoader.load('./line.jpg');//加载图片
texture.wrapS = THREE.RepeatWrapping; //设置阵列
texture.repeat.x = 30; // uv两个方向纹理重复数量
const geometry = new THREE.PlaneGeometry(100, 100);
const material = new THREE.MeshBasicMaterial({
map: texture
});
const mesh1 = new THREE.Mesh(geometry, material);
mesh1.rotateX(-Math.PI / 2)
export { mesh1, texture }
// //渲染
function animate() {
texture.offset.x += 0.1 // 纹理偏移属性
requestAnimationFrame(animate);
stats.update();
renderer.render(scene, camera);
}
const controls = new OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', function () {
// renderer.render(scene, camera); //执行渲染操作
});//监听鼠标、键盘事件
animate();