| 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/public_html/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, AR Cube!</title>
<!-- include three.js library -->
<script src='js/three.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>
</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;
var arToolkitSource, arToolkitContext;
var patternArray, markerRootArray, markerGroupArray;
var sceneGroup;
initialize();
animate();
function initialize()
{
scene = new THREE.Scene();
let ambientLight = new THREE.AmbientLight( 0xcccccc, 0.5 );
scene.add( ambientLight );
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;
////////////////////////////////////////////////////////////
// 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 onReady(){
onResize()
});
// handle resize event
window.addEventListener('resize', function(){
onResize()
});
////////////////////////////////////////////////////////////
// setup arToolkitContext
////////////////////////////////////////////////////////////
// create atToolkitContext
arToolkitContext = new THREEx.ArToolkitContext({
cameraParametersUrl: 'data/camera_para.dat',
detectionMode: 'mono'
});
// copy projection matrix to camera when initialization complete
arToolkitContext.init( function onCompleted(){
camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
});
////////////////////////////////////////////////////////////
// setup markerRoots
////////////////////////////////////////////////////////////
markerRootArray = [];
markerGroupArray = [];
patternArray = ["letterA", "letterB", "letterC", "letterD", "letterF", "kanji"];
let rotationArray = [ new THREE.Vector3(-Math.PI/2,0,0), new THREE.Vector3(0,-Math.PI/2,Math.PI/2), new THREE.Vector3(Math.PI/2, 0, Math.PI),
new THREE.Vector3(-Math.PI/2,Math.PI/2,0), new THREE.Vector3(Math.PI,0,0), new THREE.Vector3(0,0,0) ];
for (let i = 0; i < 6; i++)
{
let markerRoot = new THREE.Group();
markerRootArray.push( markerRoot );
scene.add(markerRoot);
let markerControls = new THREEx.ArMarkerControls(arToolkitContext, markerRoot, {
type : 'pattern', patternUrl : "data/" + patternArray[i] + ".patt",
});
let markerGroup = new THREE.Group();
markerGroupArray.push( markerGroup );
markerGroup.position.y = -1.25/2;
markerGroup.rotation.setFromVector3( rotationArray[i] );
markerRoot.add( markerGroup );
}
////////////////////////////////////////////////////////////
// setup scene
////////////////////////////////////////////////////////////
sceneGroup = new THREE.Group();
// a 1x1x1 cube model with scale factor 1.25 fills up the physical cube
sceneGroup.scale.set(1.25/2, 1.25/2, 1.25/2);
let loader = new THREE.TextureLoader();
/*
// a simple cube
let materialArray = [
new THREE.MeshBasicMaterial( { map: loader.load("images/xpos.png") } ),
new THREE.MeshBasicMaterial( { map: loader.load("images/xneg.png") } ),
new THREE.MeshBasicMaterial( { map: loader.load("images/ypos.png") } ),
new THREE.MeshBasicMaterial( { map: loader.load("images/yneg.png") } ),
new THREE.MeshBasicMaterial( { map: loader.load("images/zpos.png") } ),
new THREE.MeshBasicMaterial( { map: loader.load("images/zneg.png") } ),
];
let mesh = new THREE.Mesh( new THREE.CubeGeometry(1,1,1), materialArray );
sceneGroup.add( mesh );
*/
let tileTexture = loader.load("images/tiles.jpg");
// reversed cube
sceneGroup.add(
new THREE.Mesh(
new THREE.BoxGeometry(2,2,2),
new THREE.MeshBasicMaterial({
map: tileTexture,
side: THREE.BackSide,
})
)
);
// cube vertices
let sphereGeometry = new THREE.SphereGeometry(0.20, 6,6);
let sphereCenters = [
new THREE.Vector3(-1,-1,-1), new THREE.Vector3(-1,-1,1), new THREE.Vector3(-1,1,-1), new THREE.Vector3(-1,1,1),
new THREE.Vector3( 1,-1,-1), new THREE.Vector3( 1,-1,1), new THREE.Vector3( 1,1,-1), new THREE.Vector3( 1,1,1),
];
let sphereColors = [ 0x444444, 0x0000ff, 0x00ff00, 0x00ffff, 0xff0000, 0xff00ff, 0xffff00, 0xffffff ];
for (let i = 0; i < 8; i++)
{
let sphereMesh = new THREE.Mesh(
sphereGeometry,
new THREE.MeshLambertMaterial({
map: tileTexture,
color: sphereColors[i]
})
);
sphereMesh.position.copy( sphereCenters[i] );
sceneGroup.add(sphereMesh);
}
// cube edges
let edgeGeometry = new THREE.CylinderGeometry( 0.05, 0.05, 2, 32 );
let edgeCenters = [
new THREE.Vector3(0, -1, -1), new THREE.Vector3(0, 1, -1), new THREE.Vector3(0, -1, 1), new THREE.Vector3(0, 1, 1),
new THREE.Vector3(-1, 0, -1), new THREE.Vector3(1, 0, -1), new THREE.Vector3(-1, 0, 1), new THREE.Vector3(1, 0, 1),
new THREE.Vector3(-1, -1, 0), new THREE.Vector3(1, -1, 0), new THREE.Vector3(-1, 1, 0), new THREE.Vector3(1, 1, 0)
];
let edgeRotations = [
new THREE.Vector3(0,0,Math.PI/2), new THREE.Vector3(0,0,Math.PI/2), new THREE.Vector3(0,0,Math.PI/2), new THREE.Vector3(0,0,Math.PI/2),
new THREE.Vector3(0,0,0), new THREE.Vector3(0,0,0), new THREE.Vector3(0,0,0), new THREE.Vector3(0,0,0),
new THREE.Vector3(Math.PI/2,0,0), new THREE.Vector3(Math.PI/2,0,0), new THREE.Vector3(Math.PI/2,0,0), new THREE.Vector3(Math.PI/2,0,0)
];
let edgeColors = [
0x880000, 0x880000, 0x880000, 0x880000,
0x008800, 0x008800, 0x008800, 0x008800,
0x000088, 0x000088, 0x000088, 0x000088
];
for (let i = 0; i < 12; i++)
{
let edge = new THREE.Mesh(
edgeGeometry,
new THREE.MeshLambertMaterial({
map: tileTexture,
color: edgeColors[i]
})
);
edge.position.copy( edgeCenters[i] );
edge.rotation.setFromVector3( edgeRotations[i] );
sceneGroup.add(edge);
}
sceneGroup.add(
new THREE.Mesh(
new THREE.TorusKnotGeometry(0.5, 0.1),
new THREE.MeshNormalMaterial()
)
);
let pointLight = new THREE.PointLight( 0xffffff, 1, 50 );
pointLight.position.set(0.5,3,2);
scene.add( pointLight );
}
function update()
{
// update artoolkit on every frame
if ( arToolkitSource.ready !== false )
arToolkitContext.update( arToolkitSource.domElement );
for (let i = 0; i < 6; i++)
{
if ( markerRootArray[i].visible )
{
markerGroupArray[i].add( sceneGroup );
console.log("visible: " + patternArray[i]);
break;
}
}
}
function render()
{
renderer.render( scene, camera );
}
function animate()
{
requestAnimationFrame(animate);
deltaTime = clock.getDelta();
totalTime += deltaTime;
update();
render();
}
</script>
</body>
</html>