PIXI+THREE

效果

思路

1. 初始化 PIXI 的 Application, 作为 pixi 最重要的变量

const app = new PIXI.Application({
width: 800,
height: 600,
// 像素
resolution: window.devicePixelRatio,
// 透明
transparent: true,
// 抗锯齿
antialias: true,
});

1. 创建 container 并加入到

   app.stage

   中
2. 创建自己的 sprite, 也就是上图 pixi 中标识的 图片
3. 将 pixi 创建的 canvas 加入到 body 中

1. 创建 Three 相关变量, camera, scene, renderer, box, light
2. 将相关变量设置好内容
3. 新建 pixi 中的 sprite, 名为 sprite3D, 新建

   PIXI.Texture

   , source 为 three 中

   renderer.dom

4. 在 animate 方法中 更新 texture

源代码

import * as THREE from "three";
import * as PIXI from "pixi.js";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import img1 from "./img/img1.jpg";

window.PIXI = PIXI;

function init() {
const { container, app, sprite } = initPixi();
// 设置图片位置
sprite.scale.set(0.5, 0.5);
sprite.position.set(200, 200);

const { scene, renderer, camera, orbitControls, box } = initThree(app);

// 设置三维盒子变量
const sprite3DTexture = PIXI.Texture.from(renderer.domElement);
const sprite3D = new PIXI.Sprite(sprite3DTexture);
sprite3D.width = 300;
sprite3D.height = 200;
sprite3D.position.set(50, 100);
container.addChild(sprite3D);

// 循环方法
function animate() {
requestAnimationFrame(animate);

sprite.rotation += 0.01;
// 更新 three 渲染的内容
sprite3DTexture.update();

box.rotation.x += 0.01;
box.rotation.y += 0.01;

orbitControls.update();

renderer.render(scene, camera);
}
animate();
}

function initPixi() {
const app = new PIXI.Application({
width: 800,
height: 600,
// 像素
resolution: window.devicePixelRatio,
// 透明
transparent: true,
// 抗锯齿
antialias: true,
});
const container = new PIXI.Container();
// stage 全局内容
app.stage.addChild(container);

const spriteTexture = createdPixiTexture(img1);
const sprite = new PIXI.Sprite(spriteTexture);

container.addChild(sprite);

document.body.appendChild(app.view);

return { container, app, sprite };
}

function createdPixiTexture(url) {
return PIXI.Texture.from(url);
}

function initThree(app) {
const scene = new THREE.Scene();
// 环境光
scene.add(new THREE.AmbientLight(0xffffff, 0.8));

scene.add(new THREE.AxesHelper(100));
const pointLight = new THREE.PointLight(0xfd08aa, 1);
pointLight.position.set(100, 100, 100);

const renderer = new THREE.WebGLRenderer({
// 设置透明
alpha: true,
antialias: true,
});
// 设置 pixi 限定的尺寸
renderer.setSize(300, 200);
renderer.pixelRatio = window.devicePixelRatio;

const camera = new THREE.PerspectiveCamera(45, 300 / 200);
camera.position.set(200, 300, 200);
camera.lookAt(0, 0, 0);

const orbitControls = new OrbitControls(camera, app.view);
orbitControls.update();

const box = new THREE.Mesh(
new THREE.BoxBufferGeometry(40, 50, 60),
new THREE.MeshStandardMaterial({
color: 0xfea67a,

56c
roughness: 2,
})
);
scene.add(box);

return { scene, camera, renderer, orbitControls, box };
}

init();