100个酷炫的数据可视化大屏总有一款适合你(含演示实例)，30款 vue3 数据可视化大屏登录页下载

threejs贴图的加载与环境遮蔽贴图强度设置

threejs yekong

今天学习给平面添加贴图效果

创建平面

首先创建一个平面，给平面设置一个颜色，并添加到场景中。

// 创建平面
var planeGeometry = new THREE.PlaneGeometry(1, 1);
// 给平面设置颜色
var planeMaterial = new THREE.MeshLambertMaterial({
color: 0xffffff
});
let plane = new THREE.Mesh(planeGeometry, planeMaterial);
scene.add(plane);

添加纹理贴图

接下来添加纹理贴图,创建纹理加载器，加载图片，通过map将纹理贴图传进去，就可以看到我们的纹理贴图效果了。

// 创建纹理加载器
let textureLoader = new THREE.TextureLoader();
// 加载纹理贴图
let texture = textureLoader.load(jinggai);

// 创建平面
var planeGeometry = new THREE.PlaneGeometry(1, 1);
// 给平面设置颜色
var planeMaterial = new THREE.MeshLambertMaterial({
color: 0xffffff,
map:texture
});
let plane = new THREE.Mesh(planeGeometry, planeMaterial);
scene.add(plane);

我们也可以通过planeMaterial.map=texture;来设置纹理贴图。

添加纹理贴图

设置透明度

我们通过设置透明度来让需要透明的地方透明 transparent: true

// 创建纹理加载器
let textureLoader = new THREE.TextureLoader();
// 加载纹理贴图
let texture = textureLoader.load(jinggai);

// 创建平面
var planeGeometry = new THREE.PlaneGeometry(1, 1);
// 给平面设置颜色
var planeMaterial = new THREE.MeshLambertMaterial({
color: 0xffffff,
map:texture,
transparent: true,
});
let plane = new THREE.Mesh(planeGeometry, planeMaterial);

设置透明度

设置环境遮挡贴图aoMap

该纹理的红色通道用作环境遮挡贴区。 默认值为null，aoMap需要第二组UV.

我们可以通过gui调整来查看aoMap贴图的效果。

const gui = new GUI();
// 添加世界坐标辅助器
var axesHelper = new THREE.AxesHelper(20);
scene.add(axesHelper);
// 创建纹理加载器
let textureLoader = new THREE.TextureLoader();
// 加载纹理贴图
let texture = textureLoader.load(jinggai);
let aoMap = textureLoader.load(aoMapImg);

// 创建平面
var planeGeometry = new THREE.PlaneGeometry(1, 1);
// 给平面设置颜色
var planeMaterial = new THREE.MeshLambertMaterial({
color: 0xffffff,
map:texture,
transparent: true,
aoMap:aoMap
});
let plane = new THREE.Mesh(planeGeometry, planeMaterial);

// planeMaterial.map=texture;
scene.add(plane);

gui.add(planeMaterial, 'aoMapIntensity').min(0).max(1).name('ao强度');

演示地址

threejs贴图的加载与环境遮蔽贴图强度设置

学习笔记

当前内容为 threejs视频教程 Three.js可视化企业实战WEBGL课 -Three.js开发入门与调试设置-贴图的加载与环境遮蔽贴图强度设置-学习笔记

喜欢