28 - three.js 笔记 - MeshBasicMaterial 材质
程序员文章站
2022-06-11 11:37:29
...
MeshBasicMaterial是一种非常简单的材质，继承自Material，这种材质不受光线的影响，可以显示模型的线框，对场景中的雾化会有反应。
通过操作示例可以对这种材质有一定的了解
示例：MeshBasicMaterial.html
构造函数
MeshBasicMaterial( parameters : Object )参数
parameters：可选参数一般指定为颜色，{color:0xffffff}，也可以添加别的从Material父类继承来的属性。
除却继承的属性外，MeshBasicMaterial也有自己独有的属性，以下是部分属性。
| 属性 | 简介 |
|---|---|
| alphaMap | alpha地图是一种灰度纹理，它控制着表面的不透明度（黑色：完全透明;白:完全不透明)。默认为null。 |
| color | 材料的颜色值，默认为白色 |
| combine | 将材质表面颜色与环境贴图相结合，默认为THREE.Multiply，如果选择混合模式，则反射率是用来混合两种颜色的 |
| envMap | 环境贴图，默认为null |
| lightMap | 灯光贴图，默认为null |
| lightMapIntensity | 灯光贴图的强度，默认为1 |
| lights | 材料是否受到光线影响，默认为false |
| map | 贴图，默认为null |
| reflectivity | 反射率，表面对环境的影响程度，有效范围在0 - 1之间，默认为1 |
| wireframe | 是否以线框模式呈现，默认为false |
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MeshBasicMaterial 基础材质</title>
<style>
body {
margin: 0;
overflow: hidden; /*溢出隐藏*/
}
</style>
<script src="../../libs/build/three.min.js"></script>
<script src="../../libs/examples/js/controls/OrbitControls.js"></script>
<script src="../../libs/examples/js/libs/dat.gui.min.js"></script>
<script src="../../libs/examples/js/libs/stats.min.js"></script>
<script src="../../libs/examples/js/Detector.js"></script>
</head>
<body>
<script>
let stats = initStats();
let scene, camera, renderer, light, controls, guiControls;
// 场景
function initScene() {
scene = new THREE.Scene();
scene.background = new THREE.Color(0x050505);
}
// 相机
function initCamera() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 5000);
camera.position.set(0, 0, 250);
camera.lookAt(new THREE.Vector3(0, 0, 0));
}
// 渲染器
function initRenderer() {
renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
// 设置渲染器的像素比例，按照设备
renderer.setPixelRatio(window.devicePixelRatio);
// 渲染范围
renderer.setSize(window.innerWidth, window.innerHeight);
// 开启阴影支持
renderer.shadowMap.enabled = true;
// 阴影类型
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.body.appendChild(renderer.domElement);
}
let ambientLight;
// 灯光
function initLight() {
ambientLight = new THREE.AmbientLight({color: 0xDBDBDB});
scene.add(ambientLight);
}
// 控制器
function initControls() {
controls = new THREE.OrbitControls(camera, renderer.domElement);
// 添加惯性
controls.enableDamping = true;
// 最大偏移角度
controls.maxPolarAngle = 0.49 * Math.PI;
// 旋转速度
controls.rotateSpeed = 0.05;
// 最大可视距离
controls.maxDistance = 500;
// 最小可视距离
controls.minDistance = 100;
}
// 调试插件
function initGui() {
guiControls = new function () {
// Scene
this.background = scene.background.getStyle();
this.ambientLight = ambientLight.color.getStyle();
this.fog = false;
this.fogColor = scene.background.getStyle();
// Material
this.transparent = torusKont.material.transparent;
/*注意：如果材料不透明，那么这个值得改变只会对材料的颜色有影响，为 0 时材料的颜色会变成白色*/
this.opacity = torusKont.material.opacity;
this.depthTest = true;
this.depthWrite = true;
this.visible = true;
this.side = 'front';
// MeshBasicMaterial
this.color = torusKont.material.color.getStyle();
this.wireframe = torusKont.material.wireframe;
this.wireframeLinecap = torusKont.material.wireframeLinecap;
};
let gui = new dat.GUI({width: 300});
// scene
let sceneFolder = gui.addFolder('Scene');
sceneFolder.addColor(guiControls, 'background').onChange(function (e) {
scene.background.setStyle(e);
});
sceneFolder.addColor(guiControls, 'ambientLight').onChange(function (e) {
ambientLight.color.setStyle(e);
});
sceneFolder.open();
// fog
let fogFolder = sceneFolder.addFolder('scene.fog');
fogFolder.add(guiControls, 'fog').onChange(function (e) {
if (e){
scene.fog = new THREE.Fog(scene.background, 0.1, 500);
}else{
scene.fog = null;
}
});
fogFolder.addColor(guiControls,'fogColor').onChange(function (e) {
scene.fog.color.setStyle(e);
});
fogFolder.open();
// material
let materialFolder = gui.addFolder('THREE.Material');
materialFolder.add(guiControls, 'transparent').onChange(function (e) {
torusKont.material.transparent = e;
});
materialFolder.add(guiControls, 'opacity', 0.0, 1.0).onChange(function (e) {
torusKont.material.opacity = e;
});
materialFolder.add(guiControls,'depthTest').onChange(function (e) {
torusKont.material.depthTest = e;
});
materialFolder.add(guiControls,'depthWrite').onChange(function (e) {
torusKont.material.depthWrite = e;
});
materialFolder.add(guiControls,'visible').onChange(function (e) {
torusKont.material.visible = e;
});
materialFolder.add(guiControls,'side',['front','back','double']).onChange(function (e) {
switch (e){
case "front":
torusKont.material.side = THREE.FrontSide;
break;
case "back":
torusKont.material.side = THREE.BackSide;
break;
case "double":
torusKont.material.side = THREE.DoubleSide;
break;
}
});
// basicMaterial
let basicMaterial = gui.addFolder('THREE.MeshBasicMaterial');
basicMaterial.addColor(guiControls,'color').onChange(function (e) {
torusKont.material.color.setStyle(e);
});
basicMaterial.add(guiControls,'wireframe').onChange(function (e) {
torusKont.material.wireframe = e;
});
basicMaterial.add(guiControls,'wireframeLinecap',['round','butt','square']).onChange(function (e) {
switch (e){
case "round":
torusKont.material.wireframeLinecap = "round";
break;
case "butt":
torusKont.material.wireframeLinecap = "butt";
break;
case "square":
torusKont.material.wireframeLinecap = "square";
break;
}
});
basicMaterial.open();
materialFolder.open();
}
let torusKont;
// 场景中的内容
function initContent() {
// 创建一个换面纠结对象
let torusKontGeometry = new THREE.TorusKnotGeometry(40, 10, 50, 50);
let basicMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff});
torusKont = new THREE.Mesh(torusKontGeometry, basicMaterial);
scene.add(torusKont);
}
// 性能插件
function initStats() {
let stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.body.appendChild(stats.domElement);
return stats;
}
let step = 0;
// 更新
function update() {
stats.update();
controls.update();
torusKont.rotation.y += 0.01;
torusKont.rotation.x += 0.01;
}
// 初始化
function init() {
// 兼容性判断，若不兼容会提示信息
if (!Detector.webgl) Detector.addGetWebGLMessage();
initScene();
initCamera();
initRenderer();
initLight();
initControls();
initContent();
initGui();
window.addEventListener('resize', onWindowResize, false);
}
// 窗口变动触发的方法
function onWindowResize() {
// 重新设置相机的宽高比
camera.aspect = window.innerWidth / window.innerHeight;
// 更新相机投影矩阵
camera.updateProjectionMatrix();
// 更新渲染器大小
renderer.setSize(window.innerWidth, window.innerHeight);
}
// 循环渲染
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
update();
}
// 页面绘制完后加载
window.onload = function () {
init();
animate();
};
</script>
</body>
</html>