JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.jsdelivr.net/npm/three@0.87.1/build/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.js"></script>
<script src="https://pixijs.download/dev-fix-reset/pixi.js"></script>
<canvas id="myCanvas"></canvas>
JavaScript
/* pixi-v4-dev & three-v78 */
var stats = new Stats();
stats.showPanel( 0 ); // 0: fps, 1: ms, 2: mb, 3+: custom
document.body.appendChild( stats.domElement )
var canvas = {
el: document.getElementById('myCanvas'),
width: 512,
height: 512,
pixelRatio: 1
}
/* 1. Three */
var scene, camera, lights = {}, material, object, renderer3D, renderTarget;
scene = new THREE.Scene();
camera = new THREE.OrthographicCamera(canvas.width / -2, canvas.width / 2, canvas.height / 2, canvas.height / -2, -1000, 1000);
lights.ambient = new THREE.AmbientLight(0xffe1dd, 1);
lights.point = new THREE.PointLight(0xffffff, 1, 0);
lights.point.position.z = 500;
scene.add(lights.ambient);
scene.add(lights.point);
material = new THREE.MeshPhongMaterial({color: 0x156289, emissive: 0x072534, side: THREE.DoubleSide});
material.flatShading = true
object = new THREE.Mesh(new THREE.DodecahedronGeometry(120, 1), material);
scene.add(object);
renderTarget = new THREE.WebGLRenderTarget(canvas.width * canvas.pixelRatio, canvas.height * canvas.pixelRatio);
renderer3D = new THREE.WebGLRenderer({canvas: canvas.el, alpha: true});
renderer3D.setPixelRatio(canvas.pixelRatio);
renderer3D.setSize(canvas.width, canvas.height);
/* 2. Pixi */
var container, renderer2D, blurFilter, sprite3D;
container = new PIXI.Container();
blurFilter = new PIXI.filters.BlurFilter();
//container.filters = [blurFilter];
renderer2D = PIXI.autoDetectRenderer(canvas.width, canvas.height, {
context: renderer3D.context, // shared context with threejs
view: canvas.el,
resolution: canvas.pixelRatio,
transparent: true,
});
/* Create a sprite of the same dimensions as canvas.
This will be used to change the webgltexture
*/
var canvasTexture = PIXI.Texture.fromCanvas(canvas.el);
canvasTexture.baseTexture.resolution = canvas.pixelRatio;
sprite3D = new PIXI.Sprite(canvasTexture);
sprite3D.position.x += 100;
container.addChild(sprite3D);
var bunnyTexture =...