微信小程序集成three.js--2.创建不同材质的物体

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.3D模型下载及ThreeJS集成演示

 3D模型素材库