1.实例演示
小程序集成Three.js,创建不同材质的物体
2.源码
(1)引入three.js库文件
import * as THREE from '../../libs/three.weapp.js'
import {
OrbitControls
} from '../../jsm/controls/OrbitControls'
const app = getApp()
库文件下载及配置看这里https://blog.csdn.net/weixin_39318421/article/details/128468409?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22128468409%22%2C%22source%22%3A%22weixin_39318421%22%7D
(2)在onLoad函数中初始化场景
onLoad: function () {
this.initScene();
},
intScene()函数
initScene() {
wx.createSelectorQuery()
.select('#webgl')
.node()
.exec((res) => {
let canvasId = String(res[0].node.id)
const canvas = THREE.global.registerCanvas(canvasId, res[0].node)
this.setData({
canvasId: canvasId
})
//相机
const camera = new THREE.PerspectiveCamera(70, canvas.width / canvas.height, 1, 1000);
//场景
scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff);
const renderer = new THREE.WebGLRenderer({
antialias: true
});
camera.position.set(30, 40, 50);
//控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.update();
//添加灯光
const spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 60, -10)
//设置点光源投射阴影
spotLight.castShadow = true;
scene.add(spotLight)
//加入环境光
let ambiColor = "#33322b";
let ambientLight = new THREE.AmbientLight(ambiColor);
scene.add(ambientLight)
//1.普通材质正方体
const cubeGeometry = new THREE.BoxBufferGeometry(10, 10, 10);
const cubeMaterial = new THREE.MeshBasicMaterial({
color: 0x2a5a5
});
const mesh = new THREE.Mesh(cubeGeometry, cubeMaterial);
mesh.position.x = 0
mesh.position.y = 10
//设置正方体投射阴
scene.add(mesh);
//2.不光亮表面材质物体
var cubeGeometry = new THREE.BoxGeometry(15, 15, 15);
var meshMaterial = new THREE.MeshLambertMaterial({
color: 0x7777ff
});
var cube = new THREE.Mesh(cubeGeometry, meshMaterial);
cube.position.x = 30;
cube.position.y = 5;
cube.position.z = 0;
scene.add(cube);
//3.添加光亮表面材质物体
const sphereGeometry = new THREE.SphereGeometry(4, 20, 20)
const sphereMaterial = new THREE.MeshPhongMaterial({
color: 0x7777ff,
specular: 0x7777ff,
shininess: 50
})
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial)
sphere.position.y = 10
sphere.position.x = -20
scene.add(sphere)
//4.添加6个面不同颜色的正方体
var mats = [];
mats.push(new THREE.MeshBasicMaterial({
color: 0x009e60
}));
mats.push(new THREE.MeshBasicMaterial({
color: 0x0051ba
}));
mats.push(new THREE.MeshBasicMaterial({
color: 0xffd500
}));
mats.push(new THREE.MeshBasicMaterial({
color: 0xff5800
}));
mats.push(new THREE.MeshBasicMaterial({
color: 0xC41E3A
}));
mats.push(new THREE.MeshBasicMaterial({
color: 0xffffff
}));
let cubeGeom = new THREE.BoxGeometry(10, 10, 10);
let cube2 = new THREE.Mesh(cubeGeom, mats);
cube2.position.set(0, 0, 10);
scene.add(cube2)
//辅助线
const axesHelper = new THREE.AxesHelper(500);
scene.add(axesHelper)
renderer.setPixelRatio(wx.getSystemInfoSync().pixelRatio);
//渲染器使能阴影渲染
renderer.shadowMap.enabled = true
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.setSize(canvas.width, canvas.height);
function render() {
canvas.requestAnimationFrame(render);
//更新控制器
controls.update();
renderer.render(scene, camera);
}
render()
})
},
(3)源码说明
这个源码还是很好理解的,通过给不同物体赋予不同的材质,可以展现不同的效果。
<1>:MeshBasicMaterial
这种材质不考虑光照的影响。可通过设置材质属性 wireframe:true 显示物体线框
<2>:MeshLambertMaterial
这种材质用于暗淡、不发光表面的物体
<3>:MeshPhoneMaterial
通过这种材质,可以创建一种光亮的材质,例如金属之类的表面
<4>:LineBasicMaterial
这种材质只能作为线性网格的表面材质
3.实例小程序
场景演示->Three.js中的材质