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）默认环境光场景

这个场景只加入了简单的环境光，AmbientLight的光线没有特定的来源，而且这个光源也不会影响阴影的生成。在使用其他光源的同时使用AmbientLight，目的是弱化阴影或添加一些颜色。

initScene1() {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);//场景const 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();//加入环境光let ambiColor = "#cccccc";let ambientLight = new THREE.AmbientLight(ambiColor);scene.add(ambientLight)//球体const sphereGeometry = new THREE.SphereGeometry(4, 20, 20)const sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff})const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial)sphere.position.y = 10sphere.position.z = 10//设置球体投射阴影sphere.castShadow = truescene.add(sphere)//正方体1const geometry = new THREE.BoxBufferGeometry(10, 10, 10);const material = new THREE.MeshLambertMaterial({color: 0x2a5a5});const mesh1 = new THREE.Mesh(geometry, material);mesh1.position.x = 15mesh1.name = 'ms1'//设置正方体投射阴影mesh1.castShadow = true;scene.add(mesh1);//平面const planeGeometry = new THREE.PlaneGeometry(200, 150, 5, 5);const planeMaterial = new THREE.MeshBasicMaterial({color: 0xa8a8a8,});planeMaterial.side = THREE.DoubleSide;const plane = new THREE.Mesh(planeGeometry, planeMaterial)plane.rotation.x = Math.PI / 2plane.position.y = -5//设置平面接收阴影plane.receiveShadow = true;scene.add(plane)//辅助线const axesHelper = new THREE.AxesHelper(500);scene.add(axesHelper)renderer.setPixelRatio(wx.getSystemInfoSync().pixelRatio);//渲染器使能阴影渲染renderer.shadowMap.enabled = truerenderer.shadowMap.type = THREE.PCFSoftShadowMap;renderer.setSize(canvas.width, canvas.height);function render() {canvas.requestAnimationFrame(render);//更新控制器controls.update();renderer.render(scene, camera);}render()})},

(3)采用点光源的场景

点光源，PointLight，照射所有方向的光源。

initScene2() {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);//场景const 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();//加入点光源let pointColor = "#ccffcc";let pointLight = new THREE.PointLight(pointColor);//设置点光源的位置pointLight.position.set(0, 30, 0)scene.add(pointLight)//球体const sphereGeometry = new THREE.SphereGeometry(4, 20, 20)const sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff})const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial)sphere.position.y = 10sphere.position.z = 10//设置球体投射阴影sphere.castShadow = truescene.add(sphere)//正方体1const geometry = new THREE.BoxBufferGeometry(10, 10, 10);const material = new THREE.MeshLambertMaterial({color: 0x2a5a5});const mesh1 = new THREE.Mesh(geometry, material);mesh1.position.x = 15mesh1.name = 'ms1'//设置正方体投射阴影mesh1.castShadow = true;scene.add(mesh1);//平面const planeGeometry = new THREE.PlaneGeometry(200, 150, 20, 20);const planeMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});planeMaterial.side = THREE.DoubleSide;const plane = new THREE.Mesh(planeGeometry, planeMaterial)plane.rotation.x = Math.PI / 2plane.position.y = -5//设置平面接收阴影plane.receiveShadow = true;scene.add(plane)//辅助线const axesHelper = new THREE.AxesHelper(500);scene.add(axesHelper)renderer.setPixelRatio(wx.getSystemInfoSync().pixelRatio);//渲染器使能阴影渲染renderer.shadowMap.enabled = truerenderer.shadowMap.type = THREE.PCFSoftShadowMap;renderer.setSize(canvas.width, canvas.height);function render() {canvas.requestAnimationFrame(render);//更新控制器controls.update();renderer.render(scene, camera);}render()})},

（4）采用锥形光源场景

锥形光-SpotLight(聚光灯光源)，通过设置target属性来确定要照射的对象

initScene3() {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);//场景const 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;spotLight.target = plane;//设置投影显示的像素spotLight.shadow.mapSize.width = 1024spotLight.shadow.mapSize.height = 1024scene.add(spotLight)//球体const sphereGeometry = new THREE.SphereGeometry(4, 20, 20)const sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff})const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial)sphere.position.y = 10sphere.position.z = 10//设置球体投射阴影sphere.castShadow = truescene.add(sphere)//正方体1const geometry = new THREE.BoxBufferGeometry(10, 10, 10);const material = new THREE.MeshLambertMaterial({color: 0x2a5a5});const mesh1 = new THREE.Mesh(geometry, material);mesh1.position.x = 15mesh1.name = 'ms1'//设置正方体投射阴影mesh1.castShadow = true;scene.add(mesh1);//平面const planeGeometry = new THREE.PlaneGeometry(200, 150, 20, 20);const planeMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});planeMaterial.side = THREE.DoubleSide;const plane = new THREE.Mesh(planeGeometry, planeMaterial)plane.rotation.x = Math.PI / 2plane.position.y = -5//设置平面接收阴影plane.receiveShadow = true;scene.add(plane)//辅助线const axesHelper = new THREE.AxesHelper(500);scene.add(axesHelper)renderer.setPixelRatio(wx.getSystemInfoSync().pixelRatio);//渲染器使能阴影渲染//renderer.shadowMap.enabled = truerenderer.shadowMap.type = THREE.PCFSoftShadowMap;renderer.setSize(canvas.width, canvas.height);function render() {canvas.requestAnimationFrame(render);//更新控制器controls.update();renderer.render(scene, camera);}render()})}

（5）区域光场景

区域光源--RectAreaLight--可定义为一个发光矩形的光源

initScene5() {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);//场景const 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();// 地面var planeGeometry = new THREE.PlaneGeometry(70, 70, 1, 1);var planeMaterial = new THREE.MeshStandardMaterial({roughness: 0.044676705160855, // calculated from shininess = 1000metalness: 0.0});var plane = new THREE.Mesh(planeGeometry, planeMaterial);// plane.receiveShadow  = true;// rotate and position the planeplane.rotation.x = -0.5 * Math.PI;plane.position.x = 0;plane.position.y = 0;plane.position.z = 0;// add the plane to the scenescene.add(plane);//光线var spotLight0 = new THREE.SpotLight(0xcccccc);spotLight0.position.set(-40, 60, -10);spotLight0.intensity = 0.1;spotLight0.lookAt(plane);scene.add(spotLight0);var areaLight1 = new THREE.RectAreaLight(0xff0000, 500, 4, 10);areaLight1.position.set(-10, 10, 35);scene.add(areaLight1);var areaLight2 = new THREE.RectAreaLight(0x00ff00, 500, 4, 10);areaLight2.position.set(0, 10, 35);scene.add(areaLight2);var areaLight3 = new THREE.RectAreaLight(0x0000ff, 500, 4, 10);areaLight3.position.set(10, 10, 35);scene.add(areaLight3);var planeGeometry1 = new THREE.BoxGeometry(4, 10, 0);var planeGeometry1Mat = new THREE.MeshBasicMaterial({color: 0xff0000});var plane1 = new THREE.Mesh(planeGeometry1, planeGeometry1Mat);plane1.position.copy(areaLight1.position);scene.add(plane1);var planeGeometry2 = new THREE.BoxGeometry(4, 10, 0);var planeGeometry2Mat = new THREE.MeshBasicMaterial({color: 0x00ff00,});var plane2 = new THREE.Mesh(planeGeometry2, planeGeometry2Mat);plane2.position.copy(areaLight2.position);scene.add(plane2);var planeGeometry3 = new THREE.BoxGeometry(4, 10, 0);var planeGeometry3Mat = new THREE.MeshBasicMaterial({color: 0x0000ff});var plane3 = new THREE.Mesh(planeGeometry3, planeGeometry3Mat);plane3.position.copy(areaLight3.position);scene.add(plane3);//辅助线const axesHelper = new THREE.AxesHelper(500);scene.add(axesHelper)renderer.setPixelRatio(wx.getSystemInfoSync().pixelRatio);//渲染器使能阴影渲染renderer.shadowMap.enabled = truerenderer.shadowMap.type = THREE.PCFSoftShadowMap;renderer.setSize(canvas.width, canvas.height);function render() {canvas.requestAnimationFrame(render);//更新控制器controls.update();renderer.render(scene, camera);}render()})},

其他的代码就是按钮演示视频中按钮的点击事件函数，点击按钮后渲染不同的场景，这里不做过多赘述。