| Server IP : 162.214.74.102 / Your IP : 216.73.216.139 Web Server : Apache System : Linux dedi-4363141.lrsys.com.br 3.10.0-1160.119.1.el7.tuxcare.els25.x86_64 #1 SMP Wed Oct 1 17:37:27 UTC 2025 x86_64 User : lrsys ( 1015) PHP Version : 5.6.40 Disable Function : exec,passthru,shell_exec,system MySQL : ON | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /home/lrsys/www/lrsys_apps/marisol/AR/ALT/ex/ |
Upload File : |
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<title>Hello, world!</title>
<!-- include three.js library -->
<script src='js/three.js'></script>
<script src='js/stats.min.js'></script>
<!-- include jsartookit -->
<script src="jsartoolkit5/artoolkit.min.js"></script>
<script src="jsartoolkit5/artoolkit.api.js"></script>
<!-- include threex.artoolkit -->
<script src="threex/threex-artoolkitsource.js"></script>
<script src="threex/threex-artoolkitcontext.js"></script>
<script src="threex/threex-arbasecontrols.js"></script>
<script src="threex/threex-armarkercontrols.js"></script>
<script src="threex/threex-arsmoothedcontrols.js"></script>
</head>
<body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
<!--
Example created by Lee Stemkoski: https://github.com/stemkoski
Based on the AR.js library and examples created by Jerome Etienne: https://github.com/jeromeetienne/AR.js/
-->
<script>
var scene, camera, renderer, clock, deltaTime, totalTime, stats;
var arToolkitSource, arToolkitContext;
var markerRoot1;
var material1, mesh1;
initialize();
animate();
function initialize()
{
scene = new THREE.Scene();
camera = new THREE.Camera();
scene.add(camera);
renderer = new THREE.WebGLRenderer({
antialias : true,
alpha: true
});
renderer.setClearColor(new THREE.Color('lightgrey'), 0)
renderer.setSize( 640, 480 );
renderer.domElement.style.position = 'absolute'
renderer.domElement.style.top = '0px'
renderer.domElement.style.left = '0px'
document.body.appendChild( renderer.domElement );
clock = new THREE.Clock();
deltaTime = 0;
totalTime = 0;
stats = new Stats();
document.body.appendChild( stats.dom );
// lights for the scene to make spheres look round
let sceneLight = new THREE.PointLight( 0xffffff, 0.5, 100 );
scene.add( sceneLight );
let ambientLight = new THREE.AmbientLight( 0x666666 );
scene.add( ambientLight );
////////////////////////////////////////////////////////////
// setup arToolkitSource
////////////////////////////////////////////////////////////
arToolkitSource = new THREEx.ArToolkitSource({
sourceType : 'webcam',
});
function onResize()
{
arToolkitSource.onResize()
arToolkitSource.copySizeTo(renderer.domElement)
if ( arToolkitContext.arController !== null )
{
arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)
}
}
arToolkitSource.init(function(){
onResize()
});
// handle resize event
window.addEventListener('resize', function(){
onResize()
});
////////////////////////////////////////////////////////////
// setup arToolkitContext
////////////////////////////////////////////////////////////
// create atToolkitContext
arToolkitContext = new THREEx.ArToolkitContext({
cameraParametersUrl: 'data/camera_para.dat',
maxDetectionRate: 60,
detectionMode: "mono_and_matrix",
matrixCodeType: "3x3",
canvasWidth: 640,
canvasHeight: 480
});
// copy projection matrix to camera when initialization complete
arToolkitContext.init( function onCompleted(){
camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
});
////////////////////////////////////////////////////////////
// setup markerRoots
////////////////////////////////////////////////////////////
let loader = new THREE.TextureLoader();
objectArray = [];
function makeObject( barcodeID, elementString, nucleusColorValue, nucleusRadius, electronCount )
{
let object = {};
objectArray.push(object);
let marker = new THREE.Group();
scene.add(marker);
let markerControls = new THREEx.ArMarkerControls(arToolkitContext, marker, {
type: 'barcode', barcodeValue: barcodeID
})
let sceneGroup = new THREE.Group();
scene.add(sceneGroup);
// smoothedControls adjusts position of sceneGroup
let smoothedControls = new THREEx.ArSmoothedControls(sceneGroup, {
lerpPosition: 0.6,
lerpQuaternion: 0.6,
lerpScale: 1,
minUnvisibleDelay: 0.25, // when marker not visible, time to wait until model disappears
});
let nucleusColor = new THREE.Color(nucleusColorValue);
let hsl = nucleusColor.getHSL();
let cardColor = new THREE.Color().setHSL( hsl.h, 0.3, 0.9 );
let electronColor = new THREE.Color().setHSL( hsl.h, 0.3, 0.3 );
// set up card to display text at bottom
let card = new THREE.Mesh(
new THREE.PlaneGeometry(1.25,1.25),
new THREE.MeshBasicMaterial({
color: cardColor,
map:loader.load("images/chemistry/card-" + elementString + ".png")
})
);
card.receiveShadow = true;
card.rotation.x = -Math.PI/2;
sceneGroup.add(card);
// nucleus
let nucleus = new THREE.Mesh(
new THREE.SphereGeometry(nucleusRadius, 16, 16),
new THREE.MeshLambertMaterial({
color: nucleusColor,
map:loader.load("images/chemistry/label-" + elementString + ".png")
})
);
nucleus.rotation.y = -Math.PI/2;
nucleus.position.y = 1;
nucleus.castShadow = true;
sceneGroup.add( nucleus );
// electrons
let electronRadius = 0.05;
let electronGroup = new THREE.Group();
sceneGroup.add(electronGroup);
let orbitRadius = nucleusRadius + 2 * electronRadius;
for (let n = 0; n < electronCount; n++)
{
let electron = new THREE.Mesh(
new THREE.SphereGeometry(electronRadius),
new THREE.MeshLambertMaterial({
color: electronColor
})
);
electron.position.set(orbitRadius * Math.cos(n * 6.283/8), 1, orbitRadius * Math.sin(n * 6.283/8));
electron.castShadow = true;
electronGroup.add(electron);
}
// faked shadows
// set up card to display text at bottom
let electronShadow = new THREE.Mesh(
new THREE.PlaneGeometry(1.025,1.025),
new THREE.MeshBasicMaterial({
map:loader.load("images/chemistry/shadow-" + electronCount + ".png"),
transparent: true,
opacity: 0.3,
side: THREE.DoubleSide // TODO: flip images to remove this
})
);
electronShadow.position.y = 0.02; // to reduce z-fighting
electronShadow.rotation.x = Math.PI/2;
sceneGroup.add(electronShadow);
let nucleusGlow = new THREE.Mesh(
new THREE.PlaneGeometry(nucleusRadius*3, nucleusRadius*3),
new THREE.MeshBasicMaterial({
color: 0xFFFF00,
map:loader.load("images/glow.png"),
transparent: true,
side: THREE.DoubleSide
})
);
// sceneGroup.add(nucleusGlow);
nucleusGlow.position.copy( nucleus.position );
object.update = function()
{
smoothedControls.update(marker);
if (marker.visible)
{
electronGroup.rotation.y += 0.02;
electronShadow.rotation.z -= 0.02; // TODO: flip images to reverse this, or set = rotation.y
// set rotation towards camera - (0,0,0)
//var q = new THREE.Quaternion();
//q.setFromUnitVectors( new THREE.Vector3(0,1,0), nucleus.getWorldPosition().clone().normalize() );
//nucleusGlow.quaternion.copy(q);
//console.log(q)
}
}
} // ---------------------------------------------------------------------
makeObject(0, "H", 0xFF6666, 0.20, 1 );
makeObject(1, "H", 0xFF6666, 0.20, 1 );
makeObject(2, "O", 0x6666FF, 0.27, 6 );
makeObject(3, "C", 0xFF8866, 0.30, 5 );
}
function update()
{
stats.update();
// update artoolkit on every frame
if ( arToolkitSource.ready !== false )
arToolkitContext.update( arToolkitSource.domElement );
for (let n = 0; n < objectArray.length; n++)
{
objectArray[n].update();
}
}
function render()
{
renderer.render( scene, camera );
}
function animate()
{
requestAnimationFrame(animate);
deltaTime = clock.getDelta();
totalTime += deltaTime;
update();
render();
}
</script>
</body>
</html>