@zimjs/three
v2.3.9
Published
Three is a helper module for the ZIM JavaScript Canvas Framework that imports three.js and provides a fast easy way to get started, bring three.js into ZIM or bring ZIM into three.js as TextureActives for full 2D interactivity on any texture / material in
Downloads
24
Maintainers
Readme
// ~~~~~~~~~~~~~~~~~~~~~~~
// 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"
- https://zimjs.com/three/ - phone with controls
- https://zimjs.com/bits/view/three.html - cube with controls
- https://codepen.io/zimjs/full/qGPVqO - world with labels
- https://codepen.io/zimjs/full/abzXeZX - gallery