3D drawing

シーンの作成

シーン、カメラ、レンダラーを初めて作成します.
注意:https://threejs.org/docs/index.html#manual/ko/introduction/Creating-a-scene

function init() {
		scene = new THREE.Scene(); 
		// scene.background = new THREE.Color( 0xEEFFEE );
	
		camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 20000);
		camera.position.set(0, 0, 10);

		renderer = new THREE.WebGLRenderer({ antialias:true });
		renderer.setSize(window.innerWidth, window.innerHeight);
		document.body.appendChild(renderer.domElement);
	
		controls = new OrbitControls(camera, renderer.domElement);

		raycaster = new THREE.Raycaster();
	}

raycaster

これはraycastingを支援するために作成されます.複数のオブジェクトでマウス選択(マウスが3 d空間のオブジェクト上で動作)を使用する機能.
注意:https://threejs.org/docs/#api/ko/core/Raycaster

ルータの作成

	function render() {
		requestAnimationFrame(render);

		controls.update();

		renderer.render(scene, camera);
	}

イベントリスナー

function listener() {
		window.addEventListener('load', function () {
			gui.addColor(params, 'color').onChange();
			gui.add(params, 'linewidth', 1, 10).onChange();
		});

		document.addEventListener("mousemove", event => {

			refreshMousePosition(event, camera, scene.position, raycaster, mousePos);

			if (isDrawing) {
				// addPosition(user_id, mousePos);

				socket.emit('drawing', {
					user_id: user_id,
					mousePos: {
						x: mousePos.x,
						y: mousePos.y,
						z: mousePos.z,
					}
				});
			}
		});
		
		document.addEventListener("keydown", event => {
			let key = event.key || event.keyCode;

			keysPressed[key] = true;

			if ((key === ' ' || key === 32) && !isDrawing) {
				isDrawing = true;
				
				// createLineInScene(user_id, {
				// 	width: params.linewidth,
				// 	color: params.color,
				// 	geo: createLineGeometry(user_id, mousePos)
				// }, scene);

				socket.emit('draw start', {
					user_id: user_id,
					linewidth: params.linewidth,
					color: params.color,
					mousePos: {
						x: mousePos.x,
						y: mousePos.y,
						z: mousePos.z,
					}
				});
			}
			
			if (keysPressed['Control'] && event.key == 'z' && !event.repeat) {
				removeLastLine(user_id, scene);
			}
		});

		document.addEventListener("keyup", event => {
			let key = event.key || event.keyCode;
			
			delete keysPressed[key];
		
			if ((key === ' ' || key === 32)) {
				isDrawing = false;
			}
		});
	}

マウスの移動

図形描画時に移動するマウスの現在の座標を取得

		document.addEventListener("mousemove", event => {

			refreshMousePosition(event, camera, scene.position, raycaster, mousePos);

			if (isDrawing) {
				// addPosition(user_id, mousePos);

				socket.emit('drawing', {
					user_id: user_id,
					mousePos: {
						x: mousePos.x,
						y: mousePos.y,
						z: mousePos.z,
					}
				});
			}
		});

図面の実行

マウスの位置に沿って、スペースキーを押して描画します.
削除が必要な場合ctrl+Z

		document.addEventListener("keydown", event => {
			let key = event.key || event.keyCode;

			keysPressed[key] = true;

			if ((key === ' ' || key === 32) && !isDrawing) {
				isDrawing = true;
				
				// createLineInScene(user_id, {
				// 	width: params.linewidth,
				// 	color: params.color,
				// 	geo: createLineGeometry(user_id, mousePos)
				// }, scene);

				socket.emit('draw start', {
					user_id: user_id,
					linewidth: params.linewidth,
					color: params.color,
					mousePos: {
						x: mousePos.x,
						y: mousePos.y,
						z: mousePos.z,
					}
				});
			}
			
			if (keysPressed['Control'] && event.key == 'z' && !event.repeat) {
				removeLastLine(user_id, scene);
			}
		});

図形描画の終了

		document.addEventListener("keyup", event => {
			let key = event.key || event.keyCode;
			
			delete keysPressed[key];
		
			if ((key === ' ' || key === 32)) {
				isDrawing = false;
			}
		});
	}

変数の宣言

const Scribubble = () => {
	// Three 기본 요소
	let scene, camera, renderer, controls, raycaster;

	// 그리고 있는지 여부
	let isDrawing = false;

	// 마우스 위치
	var mousePos = new THREE.Vector3();
	
	// 누르거나 누르고있는 키 들
	let keysPressed = {};		// 키 다중 입력 처리용

	const params = new Params();
	const gui = new GUI();

	let user_id = 'aaa';

GUIリファレンスソース:https://sbcode.net/threejs/dat-gui/

3 D drawingオープンソース

https://codepen.io/loktar00/pen/DphFg

2 D図面オープンソース

https://codepen.io/Devlose/pen/BjNXqB