WEB 3D技术 three.js 基础网格材质演示几何体贴图 ao贴图效果

本文我们来说一下基础网格材质

之前我们也用到过这个材质但是用的非常基础

我们在官网搜索 MeshBasicMaterial

这是能够给到物体最基础的材质但也是性能最好的材质

后续我们还会学效果更好的物理材质但还是那句话效果复杂的东西对性能消耗自然会更多

我们拉下来会发现他有非常非常多的属性

我们先来写个最基础的编写代码如下

javascript 复制代码

import './style.css'
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
//创建场景
const scene = new THREE.Scene();

//创建相机
const camera = new THREE.PerspectiveCamera(
    45, //视角 视角越大  能看到的范围就越大
    window.innerWidth / window.innerHeight,//相机的宽高比  一般和画布一样大最好
    0.1,  //近平面  相机能看到最近的距离
    1000  //远平面  相机能看到最远的距离
);

//c创建一个canvas容器  并追加到 body上
const renderer = new THREE.WebGLRenderer(0);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

let planeGeometry = new THREE.PlaneGeometry(1,1);
let planeMaterial = new THREE.MeshBasicMaterial({
    color: 0xffffff
})
let plane = new THREE.Mesh(planeGeometry, planeMaterial);
scene.add(plane);

//设置相机位置   这里 我们设置Z轴  大家可以试试  S Y 和 Z  都是可以的
camera.position.z = 5;
//设置相机默认看向哪里   三个 0  代表 默认看向原点
camera.lookAt(0, 0, 0);
//将内容渲染到元素上
renderer.render(scene, camera);
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
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();

这里关键代码是

javascript 复制代码

let planeGeometry = new THREE.PlaneGeometry(1,1);
let planeMaterial = new THREE.MeshBasicMaterial({
    color: 0xffffff
})
let plane = new THREE.Mesh(planeGeometry, planeMaterial);
scene.add(plane);

PlaneGeometry平面缓冲几何体上文我们也看过创建一个材质 MeshBasicMaterial声明里面就设置了一个 color颜色为白色

然后我们将元素 add到世界坐标中

运行结果如下

然后我们给几何体设置一个贴图文档中是 map属性

这里我们用一个png图片做因为这样能够更好的看出效果如果没有png图片可以下载我的资源
案例png图片，3D材质学习辅助工具

我们将png图片弄到项目公共文件目录中

然后改写代码如下

javascript 复制代码

let planeGeometry = new THREE.PlaneGeometry(1,1);
let textureLoader = new THREE.TextureLoader();
let texture = textureLoader.load("./public/logo.png");
let planeMaterial = new THREE.MeshBasicMaterial({
    color: 0xffffff,
    map: texture
})
let plane = new THREE.Mesh(planeGeometry, planeMaterial);
scene.add(plane);

我们用 TextureLoader 创建一个纹理加载器

然后通过纹理加载器的load函数内指定图片相对路径把图片导入进来

然后通过这个图片对象赋值给材质的map

运行结果如下

其实除了直接在构造函数中传入还可以直接材质对象点属性去修改

例如

这样看着就会简便很多

然后如果我们图片明明是 png但是没有实现多余部分透明的话可以设置 transparent 属性为true

这个属性的含义就是是否允许透明

然后在项目里面在随便放一个图片进来

编写代码如下

javascript 复制代码

let planeGeometry = new THREE.PlaneGeometry(1,1);
let textureLoader = new THREE.TextureLoader();
let planeMaterial = new THREE.MeshBasicMaterial({
    color: 0xffffff,
    side: THREE.DoubleSide,
    transparent: true
})
planeMaterial.map = textureLoader.load("./public/logo.png");
planeMaterial.aoMap = textureLoader.load("./public/background.jpg");
let plane = new THREE.Mesh(planeGeometry, planeMaterial);
scene.add(plane);

其实就加了个 planeMaterial.aoMap = textureLoader.load("./public/background.jpg"); 设置 ao贴图

这要我们图片颜色不是很深的地方就会看着像有一个背景图一样

aoMapIntensity 可以设置ao效果的强度

这里我们设置为 0

然后运行代码就会发现效果基本就没了

然后我们设置个 0.9

然后运行代码效果就比较明显了

aoMapIntensity 值的范围就是 0 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 1

值越大效果越强 0基本就是没有了