var app = getApp();

var THREE = app.THREE;

var requestAnimationFrame;

var camera, scene, renderer,canvas;

Page({

data: {

height: '360',

width: '20',

},

onLoad() {

// wx.authorize({ scope: "scope.camera" });//scope.record

// this.ctx = wx.createCameraContext();

wx.getSystemInfo({

success: res => {

this.setData({ height: res.windowHeight, width: res.windowWidth });

},

})

},onReady(){

var self = this;

const query = wx.createSelectorQuery()

query.select('#myCanvas').node().exec((res) => {

console.log(res);

canvas = res[0].node;

console.log(canvas);

canvas.requestAnimationFrame(self.animate());

//self.init(canvas);

const gl = canvas.getContext('webgl');

gl.clearColor(1, 0, 1, 1);

gl.clear(gl.COLOR_BUFFER_BIT);

})

},

init: function (canvas) {

camera = new THREE.PerspectiveCamera(45, canvas._width / canvas._height, 0.01, 10000);

scene = new THREE.Scene();

//scene.background = new THREE.Color(0xffffff);

renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true });

var light = new THREE.DirectionalLight(0xffffff);

light.position.set(0, 0, 1);

scene.add(light);

var cube = new THREE.Mesh(new THREE.CubeGeometry(0.1, 0.1, 0.1),

new THREE.MeshBasicMaterial({

color: 0xff0000

})

);

scene.add(cube);

cube.rotation.set(45,0,0);

cube.position.set(0, 0, -2);

},

render: function () {

// camera.position.x += (mouseX - camera.position.x) * 0.05;

// camera.position.y += (- mouseY - camera.position.y) * 0.05;

// camera.lookAt(scene.position);

renderer.render(scene, camera);

},

animate: function () {

//requestAnimationFrame(this.animate);

if (canvas && !renderer)

{

// console.log(height);

// canvas._width = width;

// canvas._height = height;

// canvas._left = 0;

// canvas._top = 0;

console.log(canvas._width);

this.init(canvas);

}

console.log(renderer);

if (renderer){

this.render();

}

},

error(e) {

wx.authorize({ scope: "scope.camera" });

console.log(e.detail)

}

})