// threejs库
import { createScopedThreejs } from 'threejs-miniprogram'
import registerOrbit from "../libs/orbit"


// 画布对象
let canvas;
// three.js
let THREE;
// 相机、场景、渲染器
let camera, scene, renderer;
// 控制器
let controls;


function init (canvasDom) {
    // 获取系统信息
    const info = wx.getSystemInfoSync();
    const width = info.windowWidth;
    const height = info.windowHeight;
    const devicePixelRatio = info.pixelRatio;


    // canvas
    canvas = canvasDom;


    // three
    THREE = createScopedThreejs(canvas);


    // 场景
    scene = new THREE.Scene();


    // 相机
    camera = new THREE.PerspectiveCamera(100, width / height, 1, 1000);
    camera.position.set(16, 25, 16);
    camera.lookAt(new THREE.Vector3(0, 2, 0));


    // 渲染层
    renderer = new THREE.WebGLRenderer({ canvas, alpha: true });
    renderer.setPixelRatio(devicePixelRatio);
    renderer.setSize(width, height);


    // control
    const { OrbitControls } = registerOrbit(THREE)
    controls = new OrbitControls( camera, renderer.domElement );
    controls.update()
}



function render () {
    controls.update()
    renderer.render(scene, camera);
}


function createUI () {
    let geometry = new THREE.BoxGeometry(10, 10, 10);
    let material = new THREE.MeshBasicMaterial({ color: 0x999999});
    let cube = new THREE.Mesh(geometry, material);
    //添加进场景
    scene.add(cube);
    render()
}

function createEnv(canvasDom) {
    init(canvasDom)
    createUI()
}


module.exports = {
    createEnv,
}


-----

const cameraBusiness = require('../../utils/cameraBusiness.js')


Page({
  data: {
  },
  onReady() {
    console.log('onReady')
    wx.createSelectorQuery()
      .select('#canvas')
      .node()
      .exec(res => {
        cameraBusiness.createEnv(res[0].node)
      })
  },
});

--------

<canvas
  id="canvas"
  class="canvas"
  type="webgl"
  disable-scroll="true">
</canvas>