MeshPhongMaterial材质介绍和使用
1.MeshPhongMaterial材质介绍
MeshPhongMaterial材质可以创建一种光亮的材质,可以使用的属性和MeshLambertMaterial材质基本一样,可以配置的其他属性有color、opacity、shading、blending、depthTest、depthWrite、wireframe、wireframeLinewidth、wireframeLinecap、wireframeLineJoin、vertexColors;这些属性不做详细说明,主要列一下我们感兴趣的属性
属性 | 描述 |
---|---|
ambient | 这是该材质的环境色。和AmbientLight光源一起使用,这个颜色会和AmbientLight光源的颜色相乘,默认是白色 |
emissive | 这是该材质的发射的颜色。它其实并不像一个光源,只是一种纯粹的、不受其它光照影响的颜色。默认值为黑色 |
specular | 该属性指定该材质的光亮程度及高光部分颜色,如果设置成和color属性相同的颜色,将得到一种更加类似金属的材质。如果设置成灰色(grey),材质变得更像塑料 |
shininess | 该属性指定高光部分的亮度,默认值30 |
注:属性ambient、wrapAround、wrapRGB 不知从哪个版本开始废弃掉了,反正v119没有这几个属性
2.demo说明
如上图,该示例支持以下功能
- 调整visible属性控制物体是否显示
- 通过勾选transparent和调整opacity属性控制物体透明度
- 通过color属性调整材质的颜色
- 通过emissive属性调整材质发光的颜色
- 通过specular属性调整高光的颜色
- 通过shininess属性调整高光的亮度
- 通过下拉选择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-checkbox v-model="properties.metal">metal</el-checkbox>
</el-row>
<el-row>
<el-col :span="8" class="label-col"><label> color</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>
<el-col :span="8" class="label-col"><label> emissive</label></el-col>
<el-col :span="16">
<div @click="emissiveColorInputClick">
<el-input :value="properties.emissiveColor"></el-input>
</div>
<div v-show="isShowEmissiveColors" class="color-select-layer">
<sketch-picker v-model="properties.emissiveColor" @input="emissiveColorChange"></sketch-picker>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="8" class="label-col"><label> specular</label></el-col>
<el-col :span="16">
<div @click="specularColorInputClick">
<el-input :value="properties.specularColor"></el-input>
</div>
<div v-show="isShowSpecularColors" class="color-select-layer">
<sketch-picker v-model="properties.specularColor" @input="specularColorChange"></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
},
shininess: {
name: 'shininess',
value: 30,
min: 0,
max: 300,
step: 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',
emissiveColor: '#AB193D',
specularColor: '#111111',
selectMesh: 'cube',
side: 'front',
transparent: false,
wrapAround: false,
metal: false,
visible: true
},
isShowColors: false,
isShowEmissiveColors: false,
isShowSpecularColors: 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
},
emissiveColorInputClick () {
this.isShowEmissiveColors = !this.isShowEmissiveColors
},
emissiveColorChange (val) {
this.properties.emissiveColor = val.hex
},
specularColorInputClick () {
this.isShowSpecularColors = !this.isShowSpecularColors
},
specularColorChange (val) {
this.properties.specularColor = 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.MeshPhongMaterial({
color: 0x7777ff
}) // 材质对象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(0xab193d, 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.metal = this.properties.metal
this.meshMaterial.color.setStyle(this.properties.color)
this.meshMaterial.emissive.setStyle(this.properties.emissiveColor)
this.meshMaterial.specular = new THREE.Color(
this.properties.specularColor
)
// 属性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.shininess = this.properties.shininess.value
this.meshMaterial.visible = this.properties.visible
this.updateMesh(this.properties.selectMesh)
this.updateSide(this.properties.side)
this.meshMaterial.needsUpdate = true
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>