Pb_3D_visuPt_2

by spgoo

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/distrib/jsxgraphcore.js"></script>

<div id="box1" class="jxgbox" style="margin:0px 0px 0px 2px;width:550px; height:600px;">



   
</div>

CSS

.styled {
    font-family: cursive, sans-serif;
}

JavaScript

var board= JXG.JSXGraph.initBoard("box1", {pan: {enabled:false},boundingbox: [-2.5,6, 10,-1],withLines:true,
	keepaspectratio: true, axis:false,
	defaultAxes: {
    	x: { ticks: {visible: false},withLabel: true},
    	y: { ticks: {visible: false},withLabel: true}
  	},showNavigation:true,showInfobox: true,showCopyright:false});
	
	board.renderer.container.style.backgroundColor='#C5ADC5';
var box = [0, 10];
var view = board.create('view3d',
		[
			[-1, -2], [8, 8],
			[box, box, box]
		],
		{
		depthOrder: { enabled: false, },
		axesPosition: 'center',	projection:'parallel', 
});
// creation d'un point et d'un plan de construction 
let liste_pts={};
let liste_liens=[];
let Pt_defA= view.create('point3d', [2,2,4], { name:'ptA',size: 8 ,fixed:true,strokeColor:"red",fillColor:"red",opacity:1});
let Pt_defB= view.create('point3d', [6,4,4], { name:'ptB',size: 8 ,fixed:true,strokeColor:"blue",fillColor:"blue",opacity:1});
let Pt_defC= view.create('point3d', [4,6,4], { name:'ptC',size: 8 ,fixed:true,strokeColor:"yellow",fillColor:"yellow",opacity:1});
liste_pts["ptA"]=Pt_defA;
liste_pts["ptB"]=Pt_defB;
liste_pts["ptC"]=Pt_defC;
Pt_defA.element2D.on("up",function(event) {tire_liens('ptA');});
Pt_defB.element2D.on("up",function(event) {tire_liens('ptB');});
Pt_defC.element2D.on("up",function(event) {tire_liens('ptC');});

const tire_liens=function(PT) {
	console.log(PT);
	if (liste_liens.length>0) {
		liste_liens.forEach(s=>{board.removeObject(s)});

	}
  liste_liens=[];
	Object.keys(liste_pts).forEach(pt => {
		if (pt!=PT) {
			const lien=view.create('line3d', [liste_pts[pt],liste_pts[PT]],{dash:2});
			liste_liens.push(lien);
			console.log(pt);
		}
		board.update();
	})
}