Сообщение от 3dartmax
|
|
А подробнее можно? с примером? как работает?
|
А может сам попробуешь хоть что нибудь сделать?
Ну вот небольшой простой пример для начала
https://threejs.org/examples/webgl_m...re_canvas.html
Если его немного обработать напильником получится
<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>#drawing-canvas {position: absolute;background-color: #000000;top: 0px;right: 0px;z-index: 3000;cursor: crosshair;}</style>
</head><body><canvas id="drawing-canvas" height="512" width="512"></canvas><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/90/three.min.js"></script>
<script>var camera, scene, renderer, mesh, material,texEnvMap;var 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.MeshPhongMaterial({"color": 0xf7c644,"emissive":0x59520b,"specular": 0x111111,
"type": "MeshPhongMaterial","shininess": 30,"reflectivity": 0.6,"depthFunc": 3,"depthTest": true,"depthWrite": true});
var dataStr = "https://c1.staticflickr.com/9/8873/18598400202_3af67ef38f_q.jpg";
tmp = new THREE.CubeTextureLoader().setPath( '' ).load( [ dataStr, dataStr, dataStr, dataStr, dataStr, dataStr ] );
material.envMap = tmp;var light = new THREE.PointLight( 0xff0000, 1, 400 );light.position.set( 110, 50, 150 );var bcolor = new THREE.Color( 0xdadada );
scene.background = bcolor;scene.add( light );mesh = new THREE.Mesh( new THREE.TorusGeometry( 110, 10, 22, 64,6.8 ), material );
var TorusToRingMatrix = {};TorusToRingMatrix.elements = [1.28,0,0,0,0,0.17,-1.3,0,0,4,0.8,0,0,1.9,-5.8,1];mesh.geometry.applyMatrix ( TorusToRingMatrix );
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,false );}
function setupCanvasDrawing(){var drawingCanvas = document.getElementById( 'drawing-canvas' );var drawingContext = drawingCanvas.getContext( '2d' );
drawingContext.fillStyle = "#FFFFFF";drawingContext.fillRect( 0, 0, 512, 512 );drawingContext.fillStyle = "#000000";drawingContext.font = "48px Arial";
drawingContext.fillText("Hello World",30,270);material.bumpMap = material.map = new THREE.Texture( drawingCanvas );
material.map.needsUpdate = true;var paint = false;drawingCanvas.addEventListener( 'mousedown', function( e ) {paint = true;drawStartPos.set( e.offsetX, e.offsetY );
});drawingCanvas.addEventListener('mousemove',function(e) {if(paint){draw( drawingContext, e.offsetX, e.offsetY );}});drawingCanvas.addEventListener( 'mouseup',
function(e){paint = false;});drawingCanvas.addEventListener( 'mouseleave', function( e ) {paint = false;});}function draw( drawContext, x, y ) {
drawContext.moveTo( drawStartPos.x, drawStartPos.y );drawContext.strokeStyle = '#000000';drawContext.lineTo( x, y );drawContext.stroke();
drawStartPos.set( x, y );material.map.needsUpdate = true;}function onWindowResize() {camera.aspect = 512 / 512;camera.updateProjectionMatrix();renderer.setSize(
512,512);}onWindowResize();function animate(){requestAnimationFrame(animate);mesh.rotation.x += 0.01;mesh.rotation.y += 0.01;renderer.render( scene, camera );};
</script><canvas width="512" height="512" style="width: 512px; height: 512px;" stule="float:left"></canvas></body></html>