@zimjs/three NPM

three

textureactives

// ~~~~~~~~~~~~~~~~~~~~~~~
// ZIM

const panel = new TextureActive({
    width:W,
    height:H,
    color:light,
    corner:20
}).addTo();

// pressing the ALT T key will toggle between the 3D and 2D mode
// Usually we would use this during production then turn it off
// Here we add a logo that will also toggle when pressed	
TextureActive.makeLogo("light", true).loc(50,50,panel).tap(()=>{
  textureActives.manager.toggle();
});

new Circle(100, purple)
  .center(panel)
  .drag();    


// ~~~~~~~~~~~~~~~~~~~~~~~
// THREEJS

const three = new Three({
  width:window.innerWidth, 
  height:window.innerHeight, 
  cameraPosition:new THREE.Vector3(0,0,500),
  textureActive:true
});

const renderer = three.renderer;
const scene = three.scene;
const camera = three.camera;
const canvas = three.canvas;
const controls = new OrbitControls(camera, canvas);

// TEXTUREACTIVES
const textureActives = new TextureActives(panel, THREE, three, renderer, scene, camera, controls);

// if the object is a plane then we can use the makePanel
const canvasWindow = three.makePanel({
  textureActive:panel, 
  textureActives:textureActives, 
  curve:50,
  doubleSide:true
})
scene.add(canvasWindow);

Here are the specific imports if desired:

import { Frame, Circle, TextureActive, TextureActives } from "zimjs"

// ~~~~~~~~~~~~~~~~~~~~~~~
// ZIM

const paper = new TextureActive({
	width:500,
	height:500,
	color:black,
	corner:0,
	borderColor:white,
	borderWidth:2,
	backingOrbit:false
});

const pen = new Pen({color:series(white,purple), size:10, cache:false}).center(paper);
new MotionController({target:pen, type:"pressmove", container:paper});


// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// THREEJS

const three = new Three({
	width:window.innerWidth, 
	height:window.innerHeight, 
	cameraPosition:new THREE.Vector3(0,0,500),
	textureActive:true
});

const renderer = three.renderer;
const scene = three.scene;
const camera = three.camera;
const canvas = three.canvas;
const controls = new OrbitControls(camera, canvas);

// TEXTUREACTIVES
const textureActives = new TextureActives(paper, THREE, three, renderer, scene, camera, controls);


// if the object is not a plane then we use the CanvasTexture
const cubeGeometry = new THREE.BoxGeometry(300,300,300);
const cubeTexture = new THREE.CanvasTexture(paper.canvas);
const cubeMaterial = new THREE.MeshBasicMaterial({map:cubeTexture});
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);           
scene.add(cube); 
textureActives.addMesh(cube);

Here are the specific imports for the example above if desired:

import { Frame, MotionController, TextureActive, TextureActives, series, Pen } from "zimjs"

import zim from "https://zimjs.org/cdn/016/zim_three";

import zim from "zimjs"
import * as THREE from "three" 
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"
import { Three } from "@zimjs/three"