Flutter与原生H5混合开发

原创

乂乂又又

修改于 2021-02-22 10:25:24

3.8K0

文章被收录于专栏：万物皆可Serverless万物皆可Serverless

我们知道Flutter可以跟原生Android或iOS混合开发，那Flutter能不能与原生H5混合开发呢？

答案是：Yes!

首先来个网页背景，2D的太普通，这里我拿Three.js先给他整个3D地球转一转

朴实无华且枯燥～

    //全局变量
    let camera, scene, renderer;
    //摄像机
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 100000);
    camera.position.set(15, 5, 5);
    //场景
    scene = new THREE.Scene();
    //全局灯光
    const ambientLight = new THREE.AmbientLight(0xffffff);
    scene.add(ambientLight);
    //材质加载
    let loader = new THREE.TextureLoader();
    //图片贴纸来自 https://www.solarsystemscope.com/textures/
    //太空背景（星空）
    let geoSpace = new THREE.SphereGeometry(10000, 32, 32);
    let spaceMaterial = new THREE.MeshBasicMaterial({
      map: loader.load('img/star.jpg')
    });
    let space = new THREE.Mesh(geoSpace, spaceMaterial);
    space.material.side = THREE.BackSide;
    scene.add(space);
    //地球
    let geoEarth = new THREE.SphereGeometry(5, 40, 400);
    let earthMaterial = new THREE.MeshPhongMaterial({
      map: loader.load('img/earth.jpg'),
    });
    let earth = new THREE.Mesh(geoEarth, earthMaterial);
    scene.add(earth);
    //云层
    let geoCloud = new THREE.SphereGeometry(5.32, 40, 400);
    let cloudMaterial = new THREE.MeshPhongMaterial({
      map: loader.load('img/cloud.jpg'),
      transparent: true,
      opacity: 0.5
    });
    let cloud = new THREE.Mesh(geoCloud, cloudMaterial);
    scene.add(cloud);
    //渲染
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

OK，背景有了，现在把Flutter引入进来，给他做个遮罩层