92 lines
2.3 KiB
JavaScript
92 lines
2.3 KiB
JavaScript
const PIXI = 'undefined' !== typeof window ? require('pixi.js') : undefined;
|
|
|
|
import * as THREE from 'three';
|
|
|
|
import {compose, Property} from '@avocado/core';
|
|
|
|
import {hasGraphics} from '../has-graphics';
|
|
import {Image} from '../image';
|
|
import {Renderable} from '../renderable';
|
|
import {Sprite} from '../sprite';
|
|
|
|
const decorate = compose(
|
|
Property('camera'),
|
|
)
|
|
|
|
export class ThreeScene extends Renderable {
|
|
|
|
constructor(size) {
|
|
super();
|
|
// Default camera. Orthographic projection starting at "true" 0, 0.
|
|
const camera = new THREE.OrthographicCamera(
|
|
size[0] / -2,
|
|
size[0] / 2,
|
|
size[1] / 2,
|
|
size[1] / -2,
|
|
0,
|
|
200,
|
|
);
|
|
camera.position.z = 100;
|
|
camera.updateProjectionMatrix();
|
|
this.camera = camera;
|
|
// THREE stuff.
|
|
this.scene = new THREE.Scene();
|
|
this.renderer = new THREE.WebGLRenderer({
|
|
alpha: true,
|
|
});
|
|
this.renderer.setSize(size[0], size[1]);
|
|
// THREE/PIXI bridge.
|
|
this.image = Image.fromHtmlCanvas(this.renderer.domElement);
|
|
this.sprite = new Sprite(this.image);
|
|
this.sprite.anchor = [0, 0];
|
|
// First tick math is all weird...
|
|
this.renderer.render(this.scene, this.camera);
|
|
}
|
|
|
|
add(...args) {
|
|
this.scene.add(...args);
|
|
}
|
|
|
|
get internal() {
|
|
return this.sprite.internal;
|
|
}
|
|
|
|
render() {
|
|
this.renderer.render(this.scene, this.camera);
|
|
this.image.updateBaseTexture();
|
|
}
|
|
|
|
}
|
|
|
|
// // THREE scene.
|
|
// import {ThreeScene} from '@avocado/graphics/three/scene';
|
|
// const threeScene = new ThreeScene(visibleSize);
|
|
// const geometry = new THREE.BoxGeometry(8, 8, 8);
|
|
// const material = new THREE.MeshNormalMaterial();
|
|
// const mesh = new THREE.Mesh(geometry, material);
|
|
// threeScene.add(mesh);
|
|
// stage.addChild(threeScene);
|
|
|
|
|
|
// selfEntity.on('positionChanged', () => {
|
|
// mesh.position.x = selfEntity.x;
|
|
// mesh.position.y = -(selfEntity.y - 32);
|
|
// });
|
|
// camera.on('realPositionChanged', () => {
|
|
// const realPosition = camera.realPosition;
|
|
// threeScene.camera.position.x = realPosition[0];
|
|
// threeScene.camera.position.y = -realPosition[1];
|
|
// threeScene.camera.updateProjectionMatrix();
|
|
// const realOffset = camera.realOffset;
|
|
// threeScene.sprite.x = realOffset[0];
|
|
// threeScene.sprite.y = realOffset[1];
|
|
// });
|
|
|
|
|
|
// mesh.rotation.x += .1
|
|
// mesh.rotation.y += .1
|
|
|
|
|
|
// // THREE render.
|
|
// threeScene.render();
|