JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.9/pixi.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r74/three.js"></script>
JavaScript
var renderer = PIXI.autoDetectRenderer(800, 600,{backgroundColor : 0x1099bb});
document.body.appendChild(renderer.view);
// create the root of the scene graph
var stage = new PIXI.Container();
// create a texture from an image path
var texture = PIXI.Texture.fromImage('https://pixijs.github.io/examples/_assets/basics/bunny.png');
// create a new Sprite using the texture
var bunny = new PIXI.Sprite(texture);
// center the sprite's anchor point
bunny.anchor.x = 0.5;
bunny.anchor.y = 0.5;
// move the sprite to the center of the screen
bunny.position.x = 200;
bunny.position.y = 150;
stage.addChild(bunny);
// some 3js shit
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, 800 / 600, 1, 10000);
camera.position.z = 1000;
var mesh = new THREE.Mesh(new THREE.BoxGeometry(200, 200, 200), new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true }));
scene.add(mesh);
var renderer3d = new THREE.WebGLRenderer({ canvas: renderer.view, context: renderer.gl });
renderer3d.autoClear = false;
// start animating
animate();
function animate() {
requestAnimationFrame(animate);
// just for fun, let's rotate mr rabbit a little
bunny.rotation += 0.1;
// render the container
renderer.gl.disable(renderer.gl.DEPTH_TEST);
renderer.gl.disable(renderer.gl.CULL_FACE);
renderer.render(stage);
// render the 3D
renderer.gl.enable(renderer.gl.DEPTH_TEST);
renderer.gl.enable(renderer.gl.CULL_FACE);
renderer3d.render(scene, camera);
}