微信小程序集成three.js--3.创建内置几何体

1.实例演示

小程序集成Three.js，在场景中创建二维和三维几何体

2.源码
（1）引入three.js库文件

import * as THREE from '../../libs/three.weapp.js'
import {
    OrbitControls
} from '../../jsm/controls/OrbitControls'
const app = getApp()

(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 planeGeometry = new THREE.PlaneGeometry(20, 20, 40, 40);
                const planeMaterial = new THREE.MeshBasicMaterial({
                    color: 0x69b70b,
                });
                planeMaterial.side = THREE.DoubleSide;
                const plane = new THREE.Mesh(planeGeometry, planeMaterial)
                plane.rotation.x = Math.PI / 2
                plane.position.y = 0
                scene.add(plane)
                
                //创建二维圆面
                const circleGeometry = new THREE.CircleGeometry(10, 20)
                const circleMaterial = new THREE.MeshBasicMaterial({
                    color: 0xf30872,
                    side: THREE.DoubleSide
                });
                const circle = new THREE.Mesh(circleGeometry, circleMaterial);
                circle.castShadow = true;
                circle.rotation.x = Math.PI * 0.5
                circle.position.y = 10
                scene.add(circle);
                
                //创建正方体
                const cubeGeometry = new THREE.CubeGeometry(10, 10, 10)
                const cubeMaterial = new THREE.MeshBasicMaterial({
                    color: 0xf30872,
                    side: THREE.DoubleSide
                });
                const cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
                cube.position.y = -10
                scene.add(cube)
                
                //创建球体
                const sphereGeometry = new THREE.SphereGeometry(5, 20, 20)
                const sphereMaterial = new THREE.MeshBasicMaterial({
                    color: 0x341de0,
                    side: THREE.DoubleSide
                })
                const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial)
                sphere.position.z = 20
                scene.add(sphere)
                

                //圆柱体
                const cylinderGeometry = new THREE.CylinderGeometry(8, 8, 20, 10, 10)
                const cylinderMaterial = new THREE.MeshBasicMaterial({
                    color: 0xe1d11c,
                    side: THREE.DoubleSide
                })
                const cylinder = new THREE.Mesh(cylinderGeometry, cylinderMaterial)
                cylinder.position.z = -20
                scene.add(cylinder)
                
                //辅助线
                const axesHelper = new THREE.AxesHelper(500);
                scene.add(axesHelper)

                renderer.setPixelRatio(wx.getSystemInfoSync().pixelRatio);
                renderer.setSize(canvas.width, canvas.height);

                function render() {
                    canvas.requestAnimationFrame(render);
                    //更新控制器
                    controls.update();
                    renderer.render(scene, camera);
                }
                render()
            })
    },

（3）源码说明

源码中创建了二维平面和圆面，三维正方体，球体和圆柱体。

3.实例演示小程序

场景演示->Three.js中的几何体