MeshLambertMaterial材质介绍和使用
1.MeshLambertMaterial材质介绍
MeshLambertMaterial材质用来渲染看上去暗淡不光亮的表面,该材质会对场景中的光源产生反应,这个材质可以配置的其他属性有color、opacity、shading、blending、depthTest、depthWrite、wireframe、wireframeLinewidth、wireframeLinecap、wireframeLineJoin、vertexColors、fog;这些属性不做详细说明,主要对以下几个属性说明一下
属性 | 描述 |
---|---|
emissive | 这是该材质的发射的颜色。它其实并不像一个光源,只是一种纯粹的、不受其它光照影响的颜色。默认值为黑色 |
ambient | 这是材质的环境色。它跟上一章讲过的环境光源一起使用。这个颜色会与环境光提供的颜色相乘。默认值为白色 |
wrapAround | 如果这个属性设置为true,则启动半lambert光照技术 |
wrapRGB | 当wrapAround属性设置为true时,可以使用THREE.Vector3来控制光下降得速度 |
注:属性ambient、wrapAround、wrapRGB 不知从哪个版本开始废弃掉了,反正v119没有这几个属性
2.demo说明
如上图,该示例支持以下功能
- 调整visible属性控制物体是否显示
- 通过勾选transparent和调整opacity属性控制物体透明度
- 通过emissive属性调整材质发光的颜色
- 通过下拉选择side属性控制渲染前面、后面、全部
- 通过下拉选择mesh属性控制页面绘制球体、方块还是平面
3.demo代码
<template>
<div>
<div id="container"></div>
<div class="controls-box">
<section>
<el-row>
<el-checkbox v-model="properties.visible">visible</el-checkbox>
</el-row>
<el-row>
<el-checkbox v-model="properties.transparent">transparent</el-checkbox>
</el-row>
<el-row>
<el-checkbox v-model="properties.wrapAround">wrapAround</el-checkbox>
</el-row>
<el-row>
<el-col :span="8" class="label-col"><label> emissive</label></el-col>
<el-col :span="16">
<div @click="inputClick">
<el-input :value="properties.color"></el-input>
</div>
<div v-show="isShowColors" class="color-select-layer">
<sketch-picker v-model="properties.color" @input="colorChange"></sketch-picker>
</div>
</el-col>
</el-row>
<el-row>
<div v-for="(item,key) in properties" :key="key">
<div v-if="item&&item.name!=undefined">
<el-col :span="8">
<span class="vertice-span">{{item.name}}</span>
</el-col>
<el-col :span="13">
<el-slider v-model="item.value" :min="item.min" :max="item.max" :step="item.step" :format-tooltip="formatTooltip"></el-slider>
</el-col>
<el-col :span="3">
<span class="vertice-span">{{item.value}}</span>
</el-col>
</div>
</div>
</el-row>
<el-row>
<el-col :span="8" class="label-col"><label>side</label></el-col>
<el-col :span="16">
<el-select v-model="properties.side" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-col>
</el-row>
<el-row>
<el-col :span="8" class="label-col"><label>mesh</label></el-col>
<el-col :span="16">
<el-select v-model="properties.selectMesh" placeholder="请选择">
<el-option v-for="item in selectMeshOptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-col>
</el-row>
</section>
</div>
</div>
</template>
<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { Sketch } from 'vue-color'
export default {
components: {
'sketch-picker': Sketch
},
data() {
return {
options: [
{
value: 'front',
label: 'front'
},
{
value: 'back',
label: 'back'
},
{
value: 'double',
label: 'double'
}
],
selectMeshOptions: [
{
value: 'cube',
label: 'cube'
},
{
value: 'sphere',
label: 'sphere'
},
{
value: 'plane',
label: 'plane'
}
],
properties: {
opacity: {
name: 'opacity',
value: 0.3,
min: 0,
max: 1,
step: 0.1
},
wrapR: {
name: 'wrapR',
value: 1,
min: 0,
max: 1,
step: 0.1
},
wrapG: {
name: 'wrapG',
value: 1,
min: 0,
max: 1,
step: 0.1
},
wrapB: {
name: 'wrapB',
value: 1,
min: 0,
max: 1,
step: 0.1
},
color: '#EB193D',
selectMesh: 'cube',
side: 'front',
transparent: false,
wrapAround: false,
visible: true
},
isShowColors: false,
cube: null,
sphere: null,
plane: null,
activeMesh: null,
meshMaterial: null,
camera: null,
scene: null,
renderer: null,
controls: null
}
},
mounted() {
this.init()
},
methods: {
formatTooltip(val) {
return val
},
inputClick() {
this.isShowColors = !this.isShowColors
},
colorChange(val) {
this.properties.color = val.hex
},
// 初始化
init() {
this.createScene() // 创建场景
this.createMesh() // 创建网格模型
this.createLight() // 创建光源
this.createCamera() // 创建相机
this.createRender() // 创建渲染器
this.createControls() // 创建控件对象
this.render() // 渲染
},
// 创建场景
createScene() {
this.scene = new THREE.Scene()
},
// 创建网格模型
createMesh() {
const geometry = new THREE.PlaneGeometry(100, 100, 4, 4) // 创建一个平面对象PlaneGeometry
const planeMaterial = new THREE.MeshLambertMaterial({
color: 0x777777
}) // 材质对象Material
const plane = new THREE.Mesh(geometry, planeMaterial)
plane.receiveShadow = true
// 设置平面位置
plane.rotation.x = -0.5 * Math.PI
plane.position.set(0, -20, 0)
// 平面对象添加到场景中
this.scene.add(plane)
const sphereGeometry = new THREE.SphereGeometry(14, 20, 20)
const cubeGeometry = new THREE.BoxGeometry(15, 15, 15)
const planeGeometry = new THREE.PlaneGeometry(14, 14, 4, 4)
// 创建材质
this.meshMaterial = new THREE.MeshLambertMaterial({
color: 0x7777ff
})
// 创建球、方块、平面
this.sphere = new THREE.Mesh(sphereGeometry, this.meshMaterial)
this.cube = new THREE.Mesh(cubeGeometry, this.meshMaterial)
this.plane = new THREE.Mesh(planeGeometry, this.meshMaterial)
this.sphere.position.set(-12, 3, 2)
this.cube.position = this.sphere.position
this.plane.position = this.sphere.position
this.activeMesh = this.sphere
},
// 创建光源
createLight() {
// 环境光
const ambientLight = new THREE.AmbientLight(0xffffff, 0.1) // 创建环境光
this.scene.add(ambientLight) // 将环境光添加到场景
const spotLight = new THREE.SpotLight(0xffffff) // 创建聚光灯
spotLight.position.set(-40, 60, -10)
this.scene.add(spotLight)
},
// 创建相机
createCamera() {
const element = document.getElementById('container')
const width = element.clientWidth // 窗口宽度
const height = element.clientHeight // 窗口高度
const k = width / height // 窗口宽高比
// PerspectiveCamera( fov, aspect, near, far )
this.camera = new THREE.PerspectiveCamera(35, k, 0.1, 1000)
this.camera.position.set(-60, 60, 100) // 设置相机位置
this.camera.lookAt(new THREE.Vector3(10, 0, 0)) // 设置相机方向
this.scene.add(this.camera)
},
// 创建渲染器
createRender() {
const element = document.getElementById('container')
this.renderer = new THREE.WebGLRenderer()
this.renderer.setSize(element.clientWidth, element.clientHeight) // 设置渲染区域尺寸
this.renderer.shadowMap.enabled = true // 显示阴影
this.renderer.shadowMap.type = THREE.PCFSoftShadowMap
this.renderer.setClearColor(0x3f3f3f, 1) // 设置背景颜色
element.appendChild(this.renderer.domElement)
},
updateMesh(selectMesh) {
this.scene.remove(this.activeMesh)
switch (selectMesh) {
case 'cube':
this.activeMesh = this.cube
break
case 'sphere':
this.activeMesh = this.sphere
break
case 'plane':
this.activeMesh = this.plane
break
}
this.scene.add(this.activeMesh)
},
updateSide(side) {
switch (side) {
case 'front':
this.meshMaterial.side = THREE.FrontSide
break
case 'back':
this.meshMaterial.side = THREE.BackSide
break
case 'double':
this.meshMaterial.side = THREE.DoubleSide
break
}
this.meshMaterial.needsUpdate = true
},
// 更新属性
updateFun() {
this.meshMaterial.opacity = this.properties.opacity.value
this.meshMaterial.transparent = this.properties.transparent
this.meshMaterial.emissive.setStyle(this.properties.color)
//属性ambient、wrapAround、wrapRGB 废弃掉了
/* this.meshMaterial.wrapAround = this.properties.wrapAround
this.meshMaterial.wrapRGB.x = this.properties.wrapR.value
this.meshMaterial.wrapRGB.y = this.properties.wrapG.value
this.meshMaterial.wrapRGB.z = this.properties.wrapB.value */
this.meshMaterial.visible = this.properties.visible
this.updateMesh(this.properties.selectMesh)
this.updateSide(this.properties.side)
this.activeMesh.rotation.y += 0.01 //旋转
},
render() {
this.updateFun()
this.renderer.render(this.scene, this.camera)
requestAnimationFrame(this.render)
},
// 创建控件对象
createControls() {
this.controls = new OrbitControls(this.camera, this.renderer.domElement)
}
}
}
</script>
<style>
#container {
position: absolute;
width: 100%;
height: 100%;
}
.controls-box {
position: absolute;
right: 5px;
top: 5px;
width: 300px;
padding: 10px;
background-color: #fff;
border: 1px solid #c3c3c3;
}
.label-col {
padding: 8px 5px;
}
.color-select-layer {
position: relative;
left: -20px;
padding: 15px 0;
}
.vertice-span {
line-height: 38px;
padding: 0 2px 0 10px;
}
</style>