//https://github.com/mrdoob/three.js/blob/master/examples/webgl_materials_texture_canvas.html
// template is blank
// define your own Three.js World here
AB.loadCSS ( '/uploads/threeport/main.css' );
// use JS to make HTML elements too:
AB.newDiv ( "container" );
// template is blank
// define your own Three.js World here
import * as THREE from '/api/threemodule/libs/three.module.js';
let camera, scene, renderer, mesh, material;
const drawStartPos = new THREE.Vector2();
init();
setupCanvasDrawing();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 500;
scene = new THREE.Scene();
material = new THREE.MeshBasicMaterial();
mesh = new THREE.Mesh( new THREE.BoxGeometry( 200, 200, 200 ), material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize );
}
// Sets up the drawing canvas and adds it as the material map
function setupCanvasDrawing() {
// get canvas and context
const drawingCanvas = document.getElementById( 'drawing-canvas' );
const drawingContext = drawingCanvas.getContext( '2d' );
// draw white background
drawingContext.fillStyle = '#FFFFFF';
drawingContext.fillRect( 0, 0, 128, 128 );
// set canvas as material.map (this could be done to any map, bump, displacement etc.)
material.map = new THREE.CanvasTexture( drawingCanvas );
// set the variable to keep track of when to draw
let paint = false;
// add canvas event listeners
drawingCanvas.addEventListener( 'pointerdown', function ( e ) {
paint = true;
drawStartPos.set( e.offsetX, e.offsetY );
} );
drawingCanvas.addEventListener( 'pointermove', function ( e ) {
if ( paint ) draw( drawingContext, e.offsetX, e.offsetY );
} );
drawingCanvas.addEventListener( 'pointerup', function () {
paint = false;
} );
drawingCanvas.addEventListener( 'pointerleave', function () {
paint = false;
} );
}
function draw( drawContext, x, y ) {
drawContext.moveTo( drawStartPos.x, drawStartPos.y );
drawContext.strokeStyle = '#000000';
drawContext.lineTo( x, y );
drawContext.stroke();
// reset drawing start position to current position.
drawStartPos.set( x, y );
// need to flag the map as needing updating.
material.map.needsUpdate = true;
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.01;
renderer.render( scene, camera );
}