Skip to content

A
AR.js

cqiang1993 / AR.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
A
AR.js

体验新版 GitCode，发现更多精彩内容 >>

提交 45ea143a 编写于 作者: N nicolo.carpignoli
浏览文件
操作

Merge branch 'dev'

上级 366f06fa 853f7677
展开全部 隐藏空白更改
内联 并排
Showing with 98029 addition and 251858 deletion
.gitignore
浏览文件 @ 45ea143a
.DS_Store
\ No newline at end of file
.DS_Store
.atom-live-server.json
CHANGELOG.md
浏览文件 @ 45ea143a
# 1.7.2
- updated `three.js` dependency to `r103` version
- minor documentation fixes
- replace all rawgit URLs (learn more at https://rawgit.com/)
# 1.7.1
- added possibility to change border marker color in marker generator
......@@ -15,7 +21,7 @@
# 1.6.2
- Adds TravisCI config with NPM deployment configured - thanks @joestrong -
- Adds TravisCI config with NPM deployment configured - thanks @joestrong -
[#344](https://github.com/jeromeetienne/AR.js/pull/344)
# 1.6.1
......
README.md
浏览文件 @ 45ea143a
......@@ -75,7 +75,7 @@ More details about markers:
<!doctype HTML>
<html>
<script src="https://aframe.io/releases/0.9.1/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.7.1/aframe/build/aframe-ar.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.7.2/aframe/build/aframe-ar.js"></script>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs>
<a-marker preset="hiro">
......
aframe/build/aframe-ar.js
浏览文件 @ 45ea143a
......@@ -5044,7 +5044,7 @@ var THREEx = THREEx || {}
THREEx.ArMarkerHelper = function(markerControls){
this.object3d = new THREE.Group
var mesh = new THREE.AxisHelper()
var mesh = new THREE.AxesHelper()
this.object3d.add(mesh)
var text = markerControls.id
......@@ -5069,14 +5069,14 @@ THREEx.ArMarkerHelper = function(markerControls){
// var geometry = new THREE.CubeGeometry(1, 1, 1)
var geometry = new THREE.PlaneGeometry(1, 1)
var material = new THREE.MeshBasicMaterial({
map: texture,
map: texture,
transparent: true
});
var mesh = new THREE.Mesh(geometry, material)
mesh.rotation.x = -Math.PI/2
this.object3d.add(mesh)
}
var THREEx = THREEx || {}
......@@ -5308,7 +5308,7 @@ Object.assign( ARjs.Context.prototype, THREE.EventDispatcher.prototype );
// ARjs.Context.baseURL = '../'
// default to github page
ARjs.Context.baseURL = 'https://jeromeetienne.github.io/AR.js/three.js/'
ARjs.Context.REVISION = '1.7.1';
ARjs.Context.REVISION = '1.7.2';
/**
* Create a default camera for this trackingBackend
aframe/build/aframe-ar.min.js
浏览文件 @ 45ea143a
此差异已折叠。
aframe/demos/demo-aframe-logo/aframe-logo-model.html
浏览文件 @ 45ea143a
......@@ -14,8 +14,8 @@
</div>
<!-- <a-scene embedded arjs='sourceType: video; sourceUrl:../../data/videos/headtracking.mp4;'> -->
<a-scene embedded arjs='sourceType: webcam'>
<!-- <a-scene embedded arjs='sourceType: webcam; sourceWidth: 240; sourceHeight: 180;'> -->
<!-- <a-scene embedded arjs='sourceType: webcam; sourceWidth: 240; sourceHeight: 180;'> -->
<!-- <a-scene arjs='sourceType: image; sourceUrl:../../data/images/screenshot.png'> -->
<!-- <a-scene embedded arjs='sourceType: image; sourceUrl:../../data/images/armchair.jpg;'> -->
......
aframe/demos/demo-hatsune-miku/index.html
浏览文件 @ 45ea143a
<!-- include a-frame -->
<script src='../vendor/aframe/build/aframe.min.js'></script>
<script src='vendor/a-mmd.js'></script>
<!--<script src='../vendor/aframe/build/aframe.min.js'></script>-->
<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
<script src='https://cdn.rawgit.com/takahirox/a-mmd/v1.0.3/build/a-mmd.min.js'></script>
<!-- include ar.js for aframe -->
<script src='../../build/aframe-ar.js'></script>
......@@ -14,9 +14,9 @@
<!-- add some info at the top of the page -->
<div style='position: fixed; top: 10px; width:100%; text-align: center; z-index: 1;'>
<a href='https://github.com/jeromeetienne/AR.js/' target='_blank'>AR.js</a> - A-Frame
<a href='https://github.com/mrdoob/three.js/tree/dev/examples/models/mmd#readme'>hatsune miku</a> with
<a href='https://github.com/mrdoob/three.js/tree/dev/examples/models/mmd#readme'>hatsune miku</a> with
<a href='https://github.com/takahirox/a-mmd' target="blank">mmd</a>
by
by
<a href='https://twitter.com/jerome_etienne' target='_blank'>@takahirox</a>
</div>
<!-- Define your scene -->
......@@ -25,7 +25,7 @@
<a-entity
light="type: ambient; color: #333">
</a-entity>
<!-- Create a anchor to attach your augmented reality -->
<a-anchor hit-testing-enabled='true' shadow="type: pcfsoft">
<a-entity scale='0.08 0.08 0.08' mmd>
......@@ -35,8 +35,8 @@
</a-entity>
</a-entity>
<a-entity
light="type: directional; color: #888; intensity: 0.9; castShadow:true; shadowCameraVisible: false; shadowMapWidth:2048; shadowMapHeight:2048;"
<a-entity
light="type: directional; color: #888; intensity: 0.9; castShadow:true; shadowCameraVisible: false; shadowMapWidth:2048; shadowMapHeight:2048;"
position="-5 20 5">
</a-entity>
<!-- add shadow only ground -->
......@@ -48,7 +48,7 @@
width="15"
shadow="receive:true">
</a-plane> -->
<!-- <a-circle
<!-- <a-circle
rotation='-90 0 0'
opacity='0.5'
src='url(../demo-firefox/images/UV_Grid_Sm.jpg)'
......@@ -56,7 +56,7 @@
radius='1'
shadow='receive:true'>
</a-circle> -->
<!-- <a-entity
<!-- <a-entity
rotation='-90 0 0'
opacity="0.5"
src='url(../demo-firefox/images/transparent-texture.png)'
......
aframe/demos/demo-hatsune-miku/old-hatsune.html
浏览文件 @ 45ea143a
......@@ -4,7 +4,7 @@
<!-- hatsune miku -->
<script src="https://cdn.rawgit.com/kripken/ammo.js/dcab07bf0e7f2b4b64c01dc45da846344c8f50be/builds/ammo.js"></script>
<script src="https://cdn.rawgit.com/takahirox/a-mmd/master/build/a-mmd.js"></script>
<script src="https://cdn.rawgit.com/takahirox/a-mmd/v1.0.3/build/a-mmd.min.js"></script>
<!-- include aframe-ar.js -->
<script src="../../build/aframe-ar.js"></script>
......@@ -16,9 +16,9 @@
</div>
<!-- <a-scene embedded arjs='sourceType: image; sourceUrl:../../data/images/armchair.jpg' antialias="true"> -->
<a-scene embedded arjs='sourceType: webcam; sourceWidth: 240; sourceHeight: 180;' antialias="true" outline>
<!-- <a-marker type='unknown' size='1'> -->
<a-marker preset='hiro' size='1'>
<a-marker preset='hiro' size='1'>
<!-- add an hatsune miku -->
<a-entity scale="0.08 0.08 0.08">
<a-entity mmd='outline: true' afterglow:2.0;>
......@@ -31,7 +31,7 @@
<!-- <a-entity mmd="audio:https://cdn.rawgit.com/mrdoob/three.js/dev/examples/models/mmd/audios/wavefile_short.mp3;
audioDelayTime:5.333333333333333; afterglow:2.0;"> -->
</a-entity>
<!-- <a-plane rotation="-90 0 0"
color="rgba(0,0,0, 0)"
height="2"
......
aframe/demos/demo-minecraft-launch-demo/minecraft-launch-demo-old.html
浏览文件 @ 45ea143a
<!DOCTYPE html>
<!-- include aframe -->
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
<!-- include aframe-ar.js -->
<script src="../../build/aframe-ar.js"></script>
......
aframe/demos/demo-minecraft-launch-demo/minecraft.html
浏览文件 @ 45ea143a
<!DOCTYPE html>
<!-- include aframe -->
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
<!-- include aframe-ar.js -->
<script src="../../build/aframe-ar.js"></script>
......@@ -14,7 +14,7 @@
<br/>
Contact me any time at <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
</div>
<a-scene embedded arjs='sourceType: image; sourceUrl:../../../data/images/armchair.jpg; detectionMode: mono_and_matrix;' antialias="true">
<a-scene embedded arjs='sourceType: image; sourceUrl:../../../data/images/armchair.jpg; detectionMode: mono_and_matrix;' antialias="true">
<a-marker type='unknown' min-confidence='0'>
<!-- <a-marker type='pattern' url='../../data/data/patt.hiro' size='1'> -->
......
aframe/examples/basic.html
浏览文件 @ 45ea143a
......@@ -20,8 +20,8 @@
<!-- Add your augmented reality here -->
<a-box position='0 0.5 0' material='opacity: 0.5; side:double; color:red;'>
<a-torus-knot radius='0.26' radius-tubular='0.05'>
<a-animation attribute="rotation" to="360 0 0" dur="5000" easing='linear' repeat="indefinite"></a-animation>
<a-torus-knot radius='0.26' radius-tubular='0.05'
animation="property: rotation; to:360 0 0; dur: 5000; easing: linear; loop: true">
</a-torus-knot>
</a-box>
......
aframe/examples/dev.html
浏览文件 @ 45ea143a
......@@ -4,11 +4,11 @@
<script src='../../three.js/vendor/jsartoolkit5/build/artoolkit.min.js'></script>
<script src='../../three.js/vendor/jsartoolkit5/js/artoolkit.api.js'></script>
<!-- include for aruco trackingBackend -->
<script src='../../three.js/vendor/js-aruco/src/svd.js'></script>
<script src='../../three.js/vendor/js-aruco/src/posit1.js'></script>
<script src='../../three.js/vendor/js-aruco/src/cv.js'></script>
<script src='../../three.js/vendor/js-aruco/src/aruco.js'></script>
<script src='../../three.js/src/threex/threex-aruco/threex-arucocontext.js'></script>
<script src='../../three.js/vendor/js-aruco/src/svd.js'></script>
<script src='../../three.js/vendor/js-aruco/src/posit1.js'></script>
<script src='../../three.js/vendor/js-aruco/src/cv.js'></script>
<script src='../../three.js/vendor/js-aruco/src/aruco.js'></script>
<script src='../../three.js/src/threex/threex-aruco/threex-arucocontext.js'></script>
<script src='../../three.js/src/threex/threex-aruco/threex-arucodebug.js'></script>
<!-- include for tango trackingBackend -->
<script src='../../three.js/vendor/chromium-tango/THREE.WebAR.js'></script>
......@@ -53,8 +53,8 @@
<!-- Add your augmented reality here -->
<a-box position='0 0.5 0' material='opacity: 0.5; side:double; color:red;'>
<a-torus-knot radius='0.26' radius-tubular='0.05'>
<a-animation attribute="rotation" to="360 0 0" dur="5000" easing='linear' repeat="indefinite"></a-animation>
<a-torus-knot radius='0.26' radius-tubular='0.05'
animation="property: rotation; to:360 0 0; dur: 5000; easing: linear; loop: true">
</a-torus-knot>
</a-box>
......
aframe/examples/marker-events.html
浏览文件 @ 45ea143a
......@@ -34,8 +34,8 @@
as defined in the inline script above -->
<a-marker preset='hiro' id='marker-hiro' registerevents>
<a-box position='0 0.5 0' material='opacity: 0.5; side: double;color:blue;'>
<a-torus-knot radius='0.26' radius-tubular='0.05'>
<a-animation attribute="rotation" to="360 0 0" dur="5000" easing='linear' repeat="indefinite"></a-animation>
<a-torus-knot radius='0.26' radius-tubular='0.05'
animation="property: rotation; to:360 0 0; dur: 5000; easing: linear; loop: true">
</a-torus-knot>
</a-box>
</a-marker>
......@@ -47,10 +47,10 @@
the 'registerevents' in the inline script above -->
<a-marker type='barcode' value='5' id='marker-barcode-5'>
<a-box position='0 0.5 0' material='opacity: 0.5; side: double;color:red;'>
<a-torus-knot radius='0.26' radius-tubular='0.05'>
<a-animation attribute="rotation" to="360 0 0" dur="5000" easing='linear' repeat="indefinite"></a-animation>
<a-torus-knot radius='0.26' radius-tubular='0.05'
animation="property: rotation; to:360 0 0; dur: 5000; easing: linear; loop: true">
</a-torus-knot>
</a-box>
</a-box>
</a-marker>
<!-- add a simple camera -->
......
aframe/examples/minimal.html
浏览文件 @ 45ea143a
<!-- Augmented Reality on the Web in 10 lines of html! https://github.com/jeromeetienne/ar.js -->
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<!-- Augmented Reality on the Web in 10 lines of html! https://github.com/jeromeetienne/ar.js -->
<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
<script src="../build/aframe-ar.min.js"></script>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs='sourceType: webcam;'>
......
aframe/examples/mobile-performance.html
浏览文件 @ 45ea143a
......@@ -14,8 +14,8 @@
<!-- define the object which gonna be put on this marker -->
<a-box position='0 0.5 0' material='opacity: 0.5; side: double'>
<a-torus-knot radius='0.26' radius-tubular='0.05'>
<a-animation attribute="rotation" to="360 0 0" dur="3000" easing='linear' repeat="indefinite"></a-animation>
<a-torus-knot radius='0.26' radius-tubular='0.05'
animation="property: rotation; to:360 0 0; dur: 5000; easing: linear; loop: true">
</a-torus-knot>
</a-box>
......
aframe/examples/multiple-independent-markers.html
浏览文件 @ 45ea143a
......@@ -17,8 +17,8 @@
<!-- handle hiro marker -->
<a-marker preset='hiro'>
<a-box position='0 0.5 0' material='opacity: 0.5; side: double;color:red;'>
<a-torus-knot radius='0.26' radius-tubular='0.05'>
<a-animation attribute="rotation" to="360 0 0" dur="5000" easing='linear' repeat="indefinite"></a-animation>
<a-torus-knot radius='0.26' radius-tubular='0.05'
animation="property: rotation; to:360 0 0; dur: 5000; easing: linear; loop: true">
</a-torus-knot>
</a-box>
</a-marker>
......@@ -26,21 +26,21 @@
<!-- handle matrix marker -->
<a-marker type='barcode' value='5'>
<a-box position='0 0.5 0' material='opacity: 0.5; side: double;color:pink;'>
<a-torus-knot radius='0.26' radius-tubular='0.05'>
<a-animation attribute="rotation" to="360 0 0" dur="5000" easing='linear' repeat="indefinite"></a-animation>
<a-torus-knot radius='0.26' radius-tubular='0.05'
animation="property: rotation; to:360 0 0; dur: 5000; easing: linear; loop: true">
</a-torus-knot>
</a-box>
</a-marker>
<!-- handle kanji marker -->
<a-marker preset='kanji'>
<a-box position='0 0.5 0' material='opacity: 0.5; side: double;color:green;'>
<a-torus-knot radius='0.26' radius-tubular='0.05'>
<a-animation attribute="rotation" to="360 0 0" dur="5000" easing='linear' repeat="indefinite"></a-animation>
<a-torus-knot radius='0.26' radius-tubular='0.05'
animation="property: rotation; to:360 0 0; dur: 5000; easing: linear; loop: true">
</a-torus-knot>
</a-box>
</a-marker>
<!-- add a simple camera -->
<a-entity camera></a-entity>
</a-scene>
......
package.json
浏览文件 @ 45ea143a
{
"name": "ar.js",
"version": "1.7.1",
"version": "1.7.2",
"description": "Efficient Augmented Reality for the Web",
"main": "",
"scripts": {
......
test/package-lock.json
浏览文件 @ 45ea143a
此差异已折叠。
three.js/README.md
浏览文件 @ 45ea143a
......@@ -3,7 +3,7 @@
threex.artookit is the three.js extension to easily handle [artoolkit](https://github.com/artoolkit/jsartoolkit5).
It is the main part of my [AR.js effort](http://github.com/jeromeetienne/AR.js)
# Architechture
# Architecture
threex.artoolkit is composed of 3 classes
......@@ -41,7 +41,7 @@ var parameters = {
}
```
### THREEx.ArMarkerContext
### THREEx.ArToolkitContext
```javascript
var parameters = {
......@@ -51,6 +51,8 @@ var parameters = {
detectionMode: 'color_and_matrix',
// type of matrix code - valid iif detectionMode end with 'matrix' - [3x3, 3x3_HAMMING63, 3x3_PARITY65, 4x4, 4x4_BCH_13_9_3, 4x4_BCH_13_5_5]
matrixCodeType: '3x3',
// Pattern ratio for custom markers
patternRatio: 0.5
// url of the camera parameters
cameraParametersUrl: 'parameters/camera_para.dat',
......@@ -67,7 +69,7 @@ var parameters = {
}
```
### THREEx.ArMarkerSource
### THREEx.ArToolkitSource
```javascript
var parameters = {
......
three.js/build/ar.js
浏览文件 @ 45ea143a
......@@ -5044,7 +5044,7 @@ var THREEx = THREEx || {}
THREEx.ArMarkerHelper = function(markerControls){
this.object3d = new THREE.Group
var mesh = new THREE.AxisHelper()
var mesh = new THREE.AxesHelper()
this.object3d.add(mesh)
var text = markerControls.id
......@@ -5069,14 +5069,14 @@ THREEx.ArMarkerHelper = function(markerControls){
// var geometry = new THREE.CubeGeometry(1, 1, 1)
var geometry = new THREE.PlaneGeometry(1, 1)
var material = new THREE.MeshBasicMaterial({
map: texture,
map: texture,
transparent: true
});
var mesh = new THREE.Mesh(geometry, material)
mesh.rotation.x = -Math.PI/2
this.object3d.add(mesh)
}
var THREEx = THREEx || {}
......@@ -5308,7 +5308,7 @@ Object.assign( ARjs.Context.prototype, THREE.EventDispatcher.prototype );
// ARjs.Context.baseURL = '../'
// default to github page
ARjs.Context.baseURL = 'https://jeromeetienne.github.io/AR.js/three.js/'
ARjs.Context.REVISION = '1.7.1';
ARjs.Context.REVISION = '1.7.2';
/**
* Create a default camera for this trackingBackend
three.js/build/ar.lean.js
浏览文件 @ 45ea143a
......@@ -2310,7 +2310,7 @@ var THREEx = THREEx || {}
THREEx.ArMarkerHelper = function(markerControls){
this.object3d = new THREE.Group
var mesh = new THREE.AxisHelper()
var mesh = new THREE.AxesHelper()
this.object3d.add(mesh)
var text = markerControls.id
......@@ -2335,14 +2335,14 @@ THREEx.ArMarkerHelper = function(markerControls){
// var geometry = new THREE.CubeGeometry(1, 1, 1)
var geometry = new THREE.PlaneGeometry(1, 1)
var material = new THREE.MeshBasicMaterial({
map: texture,
map: texture,
transparent: true
});
var mesh = new THREE.Mesh(geometry, material)
mesh.rotation.x = -Math.PI/2
this.object3d.add(mesh)
}
var THREEx = THREEx || {}
......@@ -2574,7 +2574,7 @@ Object.assign( ARjs.Context.prototype, THREE.EventDispatcher.prototype );
// ARjs.Context.baseURL = '../'
// default to github page
ARjs.Context.baseURL = 'https://jeromeetienne.github.io/AR.js/three.js/'
ARjs.Context.REVISION = '1.7.1';
ARjs.Context.REVISION = '1.7.2';
/**
* Create a default camera for this trackingBackend
......
three.js/build/ar.lean.min.js
浏览文件 @ 45ea143a
此差异已折叠。
three.js/build/ar.min.js
浏览文件 @ 45ea143a
此差异已折叠。
three.js/contribs/npm-obsolete/build/ar.js
浏览文件 @ 45ea143a
......@@ -2162,7 +2162,7 @@ var THREEx = THREEx || {}
THREEx.ArMarkerHelper = function(markerControls){
this.object3d = new THREE.Group
var mesh = new THREE.AxisHelper()
var mesh = new THREE.AxesHelper()
this.object3d.add(mesh)
var text = markerControls.id
......
three.js/demos/liquid-marker/index.html
浏览文件 @ 45ea143a
......@@ -45,24 +45,24 @@
</style>
<div id="controls" style='display:none'>
<div>
<label>Stiffness (<span id="k_slider_label">-20</span> kg / s<sup>2</sup>)</label>
<label>Stiffness (<span id="k_slider_label">-20</span> kg / s<sup>2</sup>)</label>
<input id="k_slider" type="range" min=0 max=100 value=20></input>
</div>
<div>
<label>Damping (<span id="b_slider_label">-0.5</span> kg / s)</label>
<label>Damping (<span id="b_slider_label">-0.5</span> kg / s)</label>
<input id="b_slider" type="range" min=0 max=10 value=0.5 step=0.1></input>
</div>
<div>
<label>Frequency (<span id="f_slider_label">0</span>) Hz</label>
<label>Frequency (<span id="f_slider_label">0</span>) Hz</label>
<input id="f_slider" type="range" min=0 max=10 value=0 step=0.1></input>
</div>
<div>
<label>Mass (<span id="m_slider_label">0.5</span>) kg</label>
<label>Mass (<span id="m_slider_label">0.5</span>) kg</label>
<input id="m_slider" type="range" min=0.1 max=5 value=0.5 step=0.1></input>
</div>
</div>
<script>
//////////////////////////////////////////////////////////////////////////////////
// Init
......@@ -95,7 +95,7 @@
var directionalLight = new THREE.DirectionalLight( 0x887766 );
directionalLight.position.set( -1, 1, 1 ).normalize();
scene.add( directionalLight );
//////////////////////////////////////////////////////////////////////////////////
// Initialize a basic camera
//////////////////////////////////////////////////////////////////////////////////
......@@ -103,7 +103,7 @@
// Create a camera
var camera = new THREE.Camera();
scene.add(camera);
var listener = new THREE.AudioListener();
camera.add( listener );
......@@ -115,38 +115,38 @@
// boingSound.setLoop(true);
boingSound.setVolume(0.5);
});
////////////////////////////////////////////////////////////////////////////////
// handle arToolkitSource
////////////////////////////////////////////////////////////////////////////////
var arToolkitSource = new THREEx.ArToolkitSource({
// to read from the webcam
// to read from the webcam
sourceType : 'webcam',
//
//
// to read from an image
// sourceType : 'image',
// sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/images/img.jpg',
// sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/images/img.jpg',
// to read from a video
// sourceType : 'video',
// sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/videos/headtracking.mp4',
// sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/videos/headtracking.mp4',
})
arToolkitSource.init(function onReady(){
// handle resize of renderer
arToolkitSource.onResize(renderer.domElement)
arToolkitSource.onResizeElement(renderer.domElement)
})
// handle resize
window.addEventListener('resize', function(){
// handle arToolkitSource resize
arToolkitSource.onResize(renderer.domElement)
arToolkitSource.onResizeElement(renderer.domElement)
})
////////////////////////////////////////////////////////////////////////////////
// initialize arToolkitContext
////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
// create atToolkitContext
var arToolkitContext = new THREEx.ArToolkitContext({
......@@ -169,12 +169,12 @@
arToolkitContext.update( arToolkitSource.domElement )
})
////////////////////////////////////////////////////////////////////////////////
// Create a ArMarkerControls
////////////////////////////////////////////////////////////////////////////////
var markerRoot = new THREE.Group
scene.add(markerRoot)
var artoolkitMarker = new THREEx.ArMarkerControls(arToolkitContext, markerRoot, {
......@@ -186,14 +186,14 @@
//////////////////////////////////////////////////////////////////////////////////
// build videoTexture
//////////////////////////////////////////////////////////////////////////////////
// get videoTexture
if( arToolkitSource.domElement.nodeName === 'VIDEO' ){
var videoTexture = new THREE.VideoTexture(arToolkitSource.domElement)
// arToolkitSource.domElement.pause()
}else if( arToolkitSource.domElement.nodeName === 'IMG' ){
var videoTexture = new THREE.Texture(arToolkitSource.domElement)
videoTexture.needsUpdate = true
videoTexture.needsUpdate = true
}else console.assert(false)
// TODO to remove if webgl2 - better visual ?
videoTexture.minFilter = THREE.NearestFilter
......@@ -205,18 +205,18 @@
var liquidMarker = new THREEx.ArLiquidMarker(videoTexture);
markerRoot.add(liquidMarker.object3d)
// liquidMarker.object3d.visible = false
onRenderFcts.push(function(){
liquidMarker.update()
})
//////////////////////////////////////////////////////////////////////////////
// Code Separator
//////////////////////////////////////////////////////////////////////////////
;(function(){
var globalIntensity = liquidMarker.object3d.material.uniforms.globalIntensity
// mass spring system by the great @bkanber - standalone - a few line in a jsfiddle 😍 https://jsfiddle.net/bkanber/pDngH/
// mass spring system by the great @bkanber - standalone - a few line in a jsfiddle 😍 https://jsfiddle.net/bkanber/pDngH/
/* Spring stiffness, in kg / s^2 */
var k = -70;
......@@ -228,7 +228,7 @@
/* Block position and velocity. */
var block = {x: 0, v: 0, mass: 0.2};
var wall = {x: 30, lx: 30, v: 0, t: 0, frequency: 0};
var period = 1/60
setInterval(function(){
/* Move the wall. */
......@@ -250,16 +250,16 @@
var globalIntensity = liquidMarker.object3d.material.uniforms.globalIntensity
globalIntensity.value = (block.x - 210)/210
globalIntensity.value = (block.x - 210)/210
}, 1000*period)
function triggerBoing(){
block.x -= 200
boingSound.play()
boingSound.play()
}
document.body.addEventListener('click', triggerBoing)
document.body.addEventListener('keypress', triggerBoing)
// bind event for parameters tuning
// document.querySelector('#controls').style.display = ''
document.getElementById('k_slider').onchange = function() {
......@@ -267,25 +267,25 @@
k = -1 * parseInt(this.value);
document.getElementById('k_slider_label').innerHTML = k;
};
document.getElementById('b_slider').onchange = function() {
this.innerHTML = this.value;
b = -1 * parseFloat(this.value);
document.getElementById('b_slider_label').innerHTML = b;
};
document.getElementById('f_slider').onchange = function() {
this.innerHTML = this.value;
wall.frequency = parseFloat(this.value);
document.getElementById('f_slider_label').innerHTML = wall.frequency;
};
document.getElementById('m_slider').onchange = function() {
this.innerHTML = this.value;
block.mass = parseFloat(this.value);
document.getElementById('m_slider_label').innerHTML = block.mass;
};
})()
;(function(){
......@@ -297,8 +297,8 @@ return
texture.anisotropy = renderer.getMaxAnisotropy()
texture.repeat.set(50,50)
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
// var material = new THREE.MeshBasicMaterial({
// map: texture,
// color: 0x01BE00,
......@@ -315,25 +315,25 @@ return
uniform float opacity;
uniform float globalIntensity;
uniform float time;
void main(void){
vec2 repeat = vec2(30.0);
vec4 color = texture2D( texture, vUv*repeat ).rgba;
color.a += 0.5;
color.a = globalIntensity;
// vec4 color = vec4(1.0);
float radius = length(vPosition);
color *= 1.0-radius*1.6;
color.rgb *= 5.0;
//
//
// // float circleWidth
// if( mod(radius-time/5.0, 0.1) < 0.01 ){
// color *= 10.0 * intensity + 1.0;
// }else{
// color.rgb *= 1.0;
// }
gl_FragColor = color;
}
`,
......@@ -342,7 +342,7 @@ return
value: texture
},
globalIntensity: {
value: 1.0
value: 1.0
},
time: {
value: 0
......@@ -359,8 +359,8 @@ return
onRenderFcts.push(function(){
mesh.material.uniforms.globalIntensity.value = liquidMarker.object3d.material.uniforms.globalIntensity.value
mesh.material.uniforms.time.value = performance.now()/1000 - startedAt
})
})
// create the mesh
var mesh = new THREE.Mesh( geometry, material );
mesh.rotation.x = -Math.PI/2
......@@ -372,7 +372,7 @@ return
//////////////////////////////////////////////////////////////////////////////
// opacity animation
//////////////////////////////////////////////////////////////////////////////
// // animation opacity
// var targetWaveHeight = 1.0
// onRenderFcts.push(function(delta){
......@@ -384,7 +384,7 @@ return
// globalIntensity.value = targetWaveHeight
// }
// }
//
//
// if( globalIntensity.value < targetWaveHeight ){
// globalIntensity.value += speed
// if( globalIntensity.value > targetWaveHeight ){
......@@ -393,7 +393,7 @@ return
// }
// // console.log(intensity.value)
// })
//
//
// // toggleCloak on click/keypress
// function toggleCloak(){
// if( targetWaveHeight === 1.0 ){
......@@ -412,9 +412,9 @@ return
// document.body.appendChild( stats.dom );
// render the scene
onRenderFcts.push(function(){
renderer.clear();
renderer.render( scene, camera );
// stats.update();
......
three.js/demos/shadow.html
浏览文件 @ 45ea143a
......@@ -16,7 +16,7 @@
<body style='margin : 0px; overflow: hidden; font-family: Monospace;'><div style='position: absolute; top: 10px; width:100%; text-align: center; z-index: 1;'>
<a href="https://github.com/jeromeetienne/AR.js/" target="_blank">AR.js</a> - three.js mobile performance
<br/>
Code by <a href="https://twitter.com/snigelpaogat" target='_blank'>Fredrik Blomqvist</a> and
Code by <a href="https://twitter.com/snigelpaogat" target='_blank'>Fredrik Blomqvist</a> and
<a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
</div><script>
//////////////////////////////////////////////////////////////////////////////////
......@@ -90,17 +90,17 @@ renderer.shadowMap.enabled = true;
arToolkitSource.init(function onReady(){
onResize()
})
// handle resize
window.addEventListener('resize', function(){
onResize()
})
function onResize(){
arToolkitSource.onResize()
arToolkitSource.copySizeTo(renderer.domElement)
arToolkitSource.onResizeElement()
arToolkitSource.copyElementSizeTo(renderer.domElement)
if( arToolkitContext.arController !== null ){
arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)
}
arToolkitSource.copyElementSizeTo(arToolkitContext.arController.canvas)
}
}
////////////////////////////////////////////////////////////////////////////////
// initialize arToolkitContext
......@@ -126,7 +126,7 @@ renderer.shadowMap.enabled = true;
if( arToolkitSource.ready === false ) return
arToolkitContext.update( arToolkitSource.domElement )
// update scene.visible if the marker is seen
scene.visible = camera.visible
})
......@@ -152,7 +152,7 @@ renderer.shadowMap.enabled = true;
var markerRoot = new THREE.Group
scene.add(markerRoot)
// add a torus knot
// var geometry = new THREE.CubeGeometry(1,1,1);
// var material = new THREE.MeshNormalMaterial({
......
three.js/examples/arjs-session.html
浏览文件 @ 45ea143a
......@@ -45,28 +45,28 @@
<br/>
<a href='../../three.js/examples/multi-markers/markers-page/' target='_blank'>Markers page</a>
<br/>
<strong>Tracking Backend:</strong>
<strong>Tracking Backend:</strong>
<a href='?artoolkit'>artoolkit</a>
/
/
<a href='?aruco'>aruco</a>
/
/
<a href='?area-artoolkit'>area artoolkit</a>
/
/
<a href='?area-aruco'>area aruco</a>
/
/
<a href='?tango'>tango</a>
/
/
<a href='?best'>best</a>
</div><script>
;(function(){
// get tracking method from location.search
var trackingMethod = location.search.substring(1) ? location.search.substring(1) : 'best'
//////////////////////////////////////////////////////////////////////////////////
// Init
//////////////////////////////////////////////////////////////////////////////////
// init renderer
var renderer = new THREE.WebGLRenderer({
antialias : true,
......@@ -79,20 +79,20 @@
renderer.domElement.style.top = '0px'
renderer.domElement.style.left = '0px'
document.body.appendChild( renderer.domElement );
// array of functions for the rendering loop
var onRenderFcts= [];
// init scene and camera
var scene = new THREE.Scene();
//////////////////////////////////////////////////////////////////////////////////
// Initialize the camera
//////////////////////////////////////////////////////////////////////////////////
var camera = ARjs.Utils.createDefaultCamera(trackingMethod)
scene.add(camera)
////////////////////////////////////////////////////////////////////////////////
// Set up Arjs.Profile
////////////////////////////////////////////////////////////////////////////////
......@@ -119,12 +119,12 @@
renderer: renderer,
camera: camera,
sourceParameters: arProfile.sourceParameters,
contextParameters: arProfile.contextParameters
contextParameters: arProfile.contextParameters
})
onRenderFcts.push(function(){
arSession.update()
})
////////////////////////////////////////////////////////////////////////////////
// Create a ARjs.Anchor
////////////////////////////////////////////////////////////////////////////////
......@@ -137,7 +137,7 @@
//////////////////////////////////////////////////////////////////////////////
// handle Hit Tester
//////////////////////////////////////////////////////////////////////////////
var hitTesting = new ARjs.HitTesting(arSession)
onRenderFcts.push(function(){
hitTesting.update(camera, arAnchor.object3d, arAnchor.parameters.changeMatrixMode)
......@@ -155,7 +155,7 @@
//////////////////////////////////////////////////////////////////////////////
// tango specifics
//////////////////////////////////////////////////////////////////////////////
if( arProfile.contextParameters.trackingBackend === 'tango' ){
// init tangoVideoMesh
var tangoVideoMesh = new ARjs.TangoVideoMesh(arSession)
......@@ -169,28 +169,28 @@
var tangoPointCloud = new ARjs.TangoPointCloud(arSession)
scene.add(tangoPointCloud.object3d)
}
//////////////////////////////////////////////////////////////////////////////////
// add an object to the arAnchor
//////////////////////////////////////////////////////////////////////////////////
var arWorldRoot = arAnchor.object3d
var mesh = new THREE.AxisHelper()
var mesh = new THREE.AxesHelper()
arWorldRoot.add(mesh)
// add a torus knot
// add a torus knot
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshNormalMaterial({
transparent : true,
opacity: 0.5,
side: THREE.DoubleSide
});
});
var mesh = new THREE.Mesh( geometry, material );
mesh.position.y = geometry.parameters.height/2
arWorldRoot.add( mesh );
var geometry = new THREE.TorusKnotGeometry(0.3,0.1,64,16);
var material = new THREE.MeshNormalMaterial();
var material = new THREE.MeshNormalMaterial();
var mesh = new THREE.Mesh( geometry, material );
mesh.position.y = 0.5
arWorldRoot.add( mesh );
......@@ -198,7 +198,7 @@
onRenderFcts.push(function(delta){
mesh.rotation.x += Math.PI*delta
})
//////////////////////////////////////////////////////////////////////////////
// DebugUI
//////////////////////////////////////////////////////////////////////////////
......@@ -221,26 +221,26 @@
//////////////////////////////////////////////////////////////////////////////////
// render the whole thing on the page
//////////////////////////////////////////////////////////////////////////////////
// render the scene
onRenderFcts.push(function(){
// Render the see through camera scene
renderer.clear()
// render tangoVideoMesh
if( arProfile.contextParameters.trackingBackend === 'tango' ){
tangoVideoMesh.render()
}
// render hitTesting pickingPlane - for debug
var renderHitTestingPickingPlane = true
var renderHitTestingPickingPlane = true
if( renderHitTestingPickingPlane && hitTesting._hitTestingPlane){
hitTesting._hitTestingPlane.renderDebug(renderer)
}
renderer.render( scene, camera );
})
// run the rendering loop
var lastTimeMsec= null
requestAnimationFrame(function animate(nowMsec){
......
three.js/examples/basic.html
浏览文件 @ 45ea143a
......@@ -32,7 +32,7 @@
// init scene and camera
var scene = new THREE.Scene();
//////////////////////////////////////////////////////////////////////////////////
// Initialize a basic camera
//////////////////////////////////////////////////////////////////////////////////
......@@ -46,37 +46,37 @@
////////////////////////////////////////////////////////////////////////////////
var arToolkitSource = new THREEx.ArToolkitSource({
// to read from the webcam
// to read from the webcam
sourceType : 'webcam',
// // to read from an image
// sourceType : 'image',
// sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/images/img.jpg',
// sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/images/img.jpg',
// to read from a video
// sourceType : 'video',
// sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/videos/headtracking.mp4',
// sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/videos/headtracking.mp4',
})
arToolkitSource.init(function onReady(){
onResize()
})
// handle resize
window.addEventListener('resize', function(){
onResize()
})
function onResize(){
arToolkitSource.onResize()
arToolkitSource.copySizeTo(renderer.domElement)
arToolkitSource.onResizeElement()
arToolkitSource.copyElementSizeTo(renderer.domElement)
if( arToolkitContext.arController !== null ){
arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)
}
arToolkitSource.copyElementSizeTo(arToolkitContext.arController.canvas)
}
}
////////////////////////////////////////////////////////////////////////////////
// initialize arToolkitContext
////////////////////////////////////////////////////////////////////////////////
// create atToolkitContext
var arToolkitContext = new THREEx.ArToolkitContext({
......@@ -94,15 +94,15 @@
if( arToolkitSource.ready === false ) return
arToolkitContext.update( arToolkitSource.domElement )
// update scene.visible if the marker is seen
scene.visible = camera.visible
})
////////////////////////////////////////////////////////////////////////////////
// Create a ArMarkerControls
////////////////////////////////////////////////////////////////////////////////
// init controls for camera
var markerControls = new THREEx.ArMarkerControls(arToolkitContext, camera, {
type : 'pattern',
......@@ -118,23 +118,23 @@
// add an object in the scene
//////////////////////////////////////////////////////////////////////////////////
// add a torus knot
// add a torus knot
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshNormalMaterial({
transparent : true,
opacity: 0.5,
side: THREE.DoubleSide
});
});
var mesh = new THREE.Mesh( geometry, material );
mesh.position.y = geometry.parameters.height/2
scene.add( mesh );
var geometry = new THREE.TorusKnotGeometry(0.3,0.1,64,16);
var material = new THREE.MeshNormalMaterial();
var material = new THREE.MeshNormalMaterial();
var mesh = new THREE.Mesh( geometry, material );
mesh.position.y = 0.5
scene.add( mesh );
onRenderFcts.push(function(delta){
mesh.rotation.x += Math.PI*delta
})
......
three.js/examples/default-thinner-border.html
浏览文件 @ 45ea143a
......@@ -69,10 +69,10 @@
onResize()
})
function onResize(){
arToolkitSource.onResize()
arToolkitSource.copySizeTo(renderer.domElement)
arToolkitSource.onResizeElement()
arToolkitSource.copyElementSizeTo(renderer.domElement)
if( arToolkitContext.arController !== null ){
arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)
arToolkitSource.copyElementSizeTo(arToolkitContext.arController.canvas)
}
}
......@@ -128,7 +128,7 @@
var markerScene = new THREE.Scene()
smoothedGroup.add(markerScene)
var mesh = new THREE.AxisHelper()
var mesh = new THREE.AxesHelper()
markerScene.add(mesh)
// add a torus knot
......
three.js/examples/default.html
浏览文件 @ 45ea143a
......@@ -15,7 +15,7 @@
</script>
<body style='margin : 0px; overflow: hidden; font-family: Monospace;'><div style='position: absolute; top: 10px; width:100%; text-align: center;z-index:1';>
<a href='https://github.com/jeromeetienne/AR.js/' target='_blank'>AR.js</a> - default setting - webcam + hiro + profile + lerp
<a href='https://github.com/jeromeetienne/AR.js/' target='_blank'>AR.js</a> - default setting - webcam + hiro + profile + lerp
<br/>
Contact me any time at <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
</div><script>
......@@ -64,22 +64,22 @@
arToolkitSource.init(function onReady(){
onResize()
})
// handle resize
window.addEventListener('resize', function(){
onResize()
})
function onResize(){
arToolkitSource.onResize()
arToolkitSource.copySizeTo(renderer.domElement)
arToolkitSource.onResizeElement()
arToolkitSource.copyElementSizeTo(renderer.domElement)
if( arToolkitContext.arController !== null ){
arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)
}
arToolkitSource.copyElementSizeTo(arToolkitContext.arController.canvas)
}
}
////////////////////////////////////////////////////////////////////////////////
// initialize arToolkitContext
////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
// create atToolkitContext
var arToolkitContext = new THREEx.ArToolkitContext(artoolkitProfile.contextParameters)
......@@ -95,12 +95,12 @@
arToolkitContext.update( arToolkitSource.domElement )
})
////////////////////////////////////////////////////////////////////////////////
// Create a ArMarkerControls
////////////////////////////////////////////////////////////////////////////////
var markerGroup = new THREE.Group
scene.add(markerGroup)
var markerControls = new THREEx.ArMarkerControls(arToolkitContext, markerGroup, {
......@@ -125,26 +125,26 @@
var markerScene = new THREE.Scene()
markerGroup.add(markerScene)
var mesh = new THREE.AxisHelper()
var mesh = new THREE.AxesHelper()
markerScene.add(mesh)
// add a torus knot
// add a torus knot
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshNormalMaterial({
transparent : true,
opacity: 0.5,
side: THREE.DoubleSide
});
});
var mesh = new THREE.Mesh( geometry, material );
mesh.position.y = geometry.parameters.height/2
markerScene.add(mesh)
var geometry = new THREE.TorusKnotGeometry(0.3,0.1,64,16);
var material = new THREE.MeshNormalMaterial();
var material = new THREE.MeshNormalMaterial();
var mesh = new THREE.Mesh( geometry, material );
mesh.position.y = 0.5
markerScene.add( mesh );
onRenderFcts.push(function(delta){
mesh.rotation.x += delta * Math.PI
})
......
three.js/examples/dev.html
浏览文件 @ 45ea143a
......@@ -49,7 +49,7 @@
var directionalLight = new THREE.DirectionalLight( 0x887766 );
directionalLight.position.set( -1, 1, 1 ).normalize();
scene.add( directionalLight );
//////////////////////////////////////////////////////////////////////////////////
// Initialize a basic camera
//////////////////////////////////////////////////////////////////////////////////
......@@ -63,38 +63,38 @@
////////////////////////////////////////////////////////////////////////////////
var arToolkitSource = new THREEx.ArToolkitSource({
// to read from the webcam
// to read from the webcam
sourceType : 'webcam',
// // to read from an image
// sourceType : 'image',
// sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/images/img.jpg',
// sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/images/armchair.jpg',
// sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/images/img.jpg',
// sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/images/armchair.jpg',
// to read from a video
// sourceType : 'video',
// sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/videos/headtracking.mp4',
// sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/videos/headtracking.mp4',
})
arToolkitSource.init(function onReady(){
onResize()
})
// handle resize
window.addEventListener('resize', function(){
onResize()
})
function onResize(){
arToolkitSource.onResizeElement()
arToolkitSource.copyElementSizeTo(renderer.domElement)
arToolkitSource.onResizeElement()
arToolkitSource.copyElementSizeTo(renderer.domElement)
if( arToolkitContext.arController !== null ){
arToolkitSource.copyElementSizeTo(arToolkitContext.arController.canvas)
}
arToolkitSource.copyElementSizeTo(arToolkitContext.arController.canvas)
}
}
////////////////////////////////////////////////////////////////////////////////
// initialize arToolkitContext
////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
// create atToolkitContext
var arToolkitContext = new THREEx.ArToolkitContext({
......@@ -123,17 +123,17 @@
arToolkitContext.update( arToolkitSource.domElement )
})
////////////////////////////////////////////////////////////////////////////////
// Create a ArMarkerControls
////////////////////////////////////////////////////////////////////////////////
var markerRoot = new THREE.Group
scene.add(markerRoot)
var markerControls = new THREEx.ArMarkerControls(arToolkitContext, markerRoot, {
// type: 'barcode',
// barcodeValue: 5,
type : 'pattern',
patternUrl : THREEx.ArToolkitContext.baseURL + 'examples/marker-training/examples/pattern-files/pattern-hiro.patt',
})
......@@ -151,8 +151,8 @@
})
onRenderFcts.push(function(delta){
smoothedControls.update(markerRoot)
})
})
// smoothedControls.addEventListener('becameVisible', function(){
// console.log('becameVisible event notified')
// })
......@@ -167,7 +167,7 @@
// var arWorldRoot = markerRoot
var arWorldRoot = smoothedRoot
var mesh = new THREE.AxisHelper()
var mesh = new THREE.AxesHelper()
// markerRoot.add(mesh)
arWorldRoot.add(mesh)
......@@ -182,14 +182,14 @@
mesh.position.y = geometry.parameters.height/2
// markerRoot.add( mesh );
arWorldRoot.add(mesh)
var geometry = new THREE.TorusKnotGeometry(0.3,0.1,64,16);
var material = new THREE.MeshNormalMaterial();
var material = new THREE.MeshNormalMaterial();
var mesh = new THREE.Mesh( geometry, material );
mesh.position.y = 0.5
// markerRoot.add( mesh );
arWorldRoot.add( mesh );
onRenderFcts.push(function(delta){
mesh.rotation.x += delta * Math.PI
})
......
three.js/examples/marker-training/examples/patternmarker-from-image.html
浏览文件 @ 45ea143a
......@@ -52,7 +52,7 @@
var directionalLight = new THREE.DirectionalLight( 0x887766 );
directionalLight.position.set( -1, 1, 1 ).normalize();
scene.add( directionalLight );
//////////////////////////////////////////////////////////////////////////////////
// Initialize a basic camera
//////////////////////////////////////////////////////////////////////////////////
......@@ -66,23 +66,23 @@
////////////////////////////////////////////////////////////////////////////////
var arToolkitSource = new THREEx.ArToolkitSource({
// to read from the webcam
// to read from the webcam
sourceType : 'webcam',
// // to read from an image
// sourceType : 'image',
// sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/images/img.jpg',
// sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/images/img.jpg',
// to read from a video
// sourceType : 'video',
// sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/videos/headtracking.mp4',
// sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/videos/headtracking.mp4',
})
arToolkitSource.init(function onReady(){
// handle resize of renderer
arToolkitSource.onResize([renderer.domElement, arToolkitContext.arController.canvas])
arToolkitSource.onResize([renderer.domElement, arToolkitContext.arController.canvas])
})
// handle resize
window.addEventListener('resize', function(){
// handle arToolkitSource resize
......@@ -91,7 +91,7 @@
////////////////////////////////////////////////////////////////////////////////
// initialize arToolkitContext
////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
// create atToolkitContext
var arToolkitContext = new THREEx.ArToolkitContext({
......@@ -112,12 +112,12 @@
arToolkitContext.update( arToolkitSource.domElement )
})
////////////////////////////////////////////////////////////////////////////////
// Create a ArMarkerControls
////////////////////////////////////////////////////////////////////////////////
var markerRoot = new THREE.Group
scene.add(markerRoot)
......@@ -130,7 +130,7 @@
type : 'pattern',
patternUrl : THREEx.ArToolkitContext.baseURL + 'examples/marker-training/examples/pattern-files/pattern-hiro.patt',
patternUrl : patternURL,
})
})
})
// build a smoothedControls
......@@ -142,8 +142,8 @@
})
onRenderFcts.push(function(delta){
smoothedControls.update(markerRoot)
})
})
// smoothedControls.addEventListener('becameVisible', function(){
// console.log('becameVisible event notified')
// })
......@@ -156,29 +156,29 @@
//////////////////////////////////////////////////////////////////////////////////
var mesh = new THREE.AxisHelper()
var mesh = new THREE.AxesHelper()
// markerRoot.add(mesh)
smoothedRoot.add(mesh)
// add a torus knot
// add a torus knot
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshNormalMaterial({
transparent : true,
opacity: 0.5,
side: THREE.DoubleSide
});
});
var mesh = new THREE.Mesh( geometry, material );
mesh.position.y = geometry.parameters.height/2
// markerRoot.add( mesh );
smoothedRoot.add(mesh)
var geometry = new THREE.TorusKnotGeometry(0.3,0.1,64,16);
var material = new THREE.MeshNormalMaterial();
var material = new THREE.MeshNormalMaterial();
var mesh = new THREE.Mesh( geometry, material );
mesh.position.y = 0.5
// markerRoot.add( mesh );
smoothedRoot.add( mesh );
onRenderFcts.push(function(delta){
mesh.rotation.x += delta * Math.PI
})
......
three.js/examples/markerroot.html
浏览文件 @ 45ea143a
......@@ -52,36 +52,36 @@
////////////////////////////////////////////////////////////////////////////////
var arToolkitSource = new THREEx.ArToolkitSource({
// to read from the webcam
// to read from the webcam
// sourceType : 'webcam',
// to read from an image
// sourceType : 'image',
// sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/images/img.jpg',
// sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/images/img.jpg',
// to read from a video
sourceType : 'video',
sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/videos/headtracking.mp4',
sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/videos/headtracking.mp4',
})
arToolkitSource.init(function onReady(){
onResize()
})
// handle resize
window.addEventListener('resize', function(){
onResize()
})
function onResize(){
arToolkitSource.onResize()
arToolkitSource.copySizeTo(renderer.domElement)
arToolkitSource.onResizeElement()
arToolkitSource.copyElementSizeTo(renderer.domElement)
if( arToolkitContext.arController !== null ){
arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)
}
arToolkitSource.copyElementSizeTo(arToolkitContext.arController.canvas)
}
}
////////////////////////////////////////////////////////////////////////////////
// initialize arToolkitContext
////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
// create atToolkitContext
var arToolkitContext = new THREEx.ArToolkitContext({
......@@ -100,12 +100,12 @@
arToolkitContext.update( arToolkitSource.domElement )
})
////////////////////////////////////////////////////////////////////////////////
// Create a ArMarkerControls
////////////////////////////////////////////////////////////////////////////////
var markerRoot = new THREE.Group
scene.add(markerRoot)
var artoolkitMarker = new THREEx.ArMarkerControls(arToolkitContext, markerRoot, {
......@@ -118,23 +118,23 @@
// add an object in the scene
//////////////////////////////////////////////////////////////////////////////////
// add a torus knot
// add a torus knot
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshNormalMaterial({
transparent : true,
opacity: 0.5,
side: THREE.DoubleSide
});
});
var mesh = new THREE.Mesh( geometry, material );
mesh.position.y = geometry.parameters.height/2
markerRoot.add( mesh );
var geometry = new THREE.TorusKnotGeometry(0.3,0.1,64,16);
var material = new THREE.MeshNormalMaterial();
var material = new THREE.MeshNormalMaterial();
var mesh = new THREE.Mesh( geometry, material );
mesh.position.y = 0.5
markerRoot.add( mesh );
onRenderFcts.push(function(){
mesh.rotation.x += 0.1
})
......
three.js/examples/measure-it.html
浏览文件 @ 45ea143a
......@@ -53,36 +53,36 @@
////////////////////////////////////////////////////////////////////////////////
var arToolkitSource = new THREEx.ArToolkitSource({
// to read from the webcam
// to read from the webcam
sourceType : 'webcam',
// to read from an image
// sourceType : 'image',
// sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/images/img.jpg',
// sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/images/img.jpg',
// to read from a video
// sourceType : 'video',
// sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/videos/headtracking.mp4',
// sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/videos/headtracking.mp4',
})
arToolkitSource.init(function onReady(){
onResize()
})
// handle resize
window.addEventListener('resize', function(){
onResize()
})
function onResize(){
arToolkitSource.onResize()
arToolkitSource.copySizeTo(renderer.domElement)
arToolkitSource.onResizeElement()
arToolkitSource.copyElementSizeTo(renderer.domElement)
if( arToolkitContext.arController !== null ){
arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)
}
arToolkitSource.copyElementSizeTo(arToolkitContext.arController.canvas)
}
}
////////////////////////////////////////////////////////////////////////////////
// initialize arToolkitContext
////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
// create atToolkitContext
var arToolkitContext = new THREEx.ArToolkitContext({
......@@ -101,9 +101,9 @@
arToolkitContext.update( arToolkitSource.domElement )
})
;(function(){
//////////////////////////////////////////////////////////////////////////////
// markerRoot1
//////////////////////////////////////////////////////////////////////////////
......@@ -122,7 +122,7 @@
var geometry = new THREE.OctahedronGeometry( 0.1, 0 )
var material = new THREE.MeshNormalMaterial({
wireframe: true
});
});
var mesh = new THREE.Mesh( geometry, material );
markerRoot1.add( mesh );
......@@ -144,7 +144,7 @@
var geometry = new THREE.OctahedronGeometry( 0.1, 0 )
var material = new THREE.MeshNormalMaterial({
wireframe: true
});
});
var mesh = new THREE.Mesh( geometry, material );
markerRoot2.add( mesh );
})()
......@@ -153,7 +153,7 @@
;(function(){
var markerRoot1 = scene.getObjectByName('marker1')
var markerRoot2 = scene.getObjectByName('marker2')
var container = new THREE.Group
scene.add(container)
......@@ -167,7 +167,7 @@
document.querySelector('.scanningSpinner').style.display = ''
}
})
//////////////////////////////////////////////////////////////////////////////
// build lineMesh
//////////////////////////////////////////////////////////////////////////////
......@@ -189,8 +189,8 @@
geometry.verticesNeedUpdate = true
geometry.computeBoundingSphere();
geometry.computeLineDistances();
lineMesh.computeLineDistances();
var length = markerRoot1.position.distanceTo(markerRoot2.position)
lineMesh.material.scale = length * 10
lineMesh.material.needsUpdate = true
......@@ -210,8 +210,8 @@
// build sprite
var material = new THREE.SpriteMaterial({
map: texture,
color: 0xffffff,
map: texture,
color: 0xffffff,
});
var sprite = new THREE.Sprite( material );
sprite.scale.multiplyScalar(0.5)
......@@ -225,7 +225,7 @@
// get the text to display
var length = markerRoot1.position.distanceTo(markerRoot2.position)
var text = length.toFixed(2)
// put the text in the sprite
context.font = '40px monospace';
context.clearRect( 0, 0, canvas.width, canvas.height );
......@@ -233,7 +233,7 @@
context.fillText(text, canvas.width/4, 3*canvas.height/4 )
sprite.material.map.needsUpdate = true
})
})()
//////////////////////////////////////////////////////////////////////////////////
// render the whole thing on the page
......@@ -287,7 +287,7 @@
height: 100%;
width: 6px;
display: inline-block;
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
animation: sk-stretchdelay 1.2s infinite ease-in-out;
}
......@@ -303,16 +303,16 @@
}
@-webkit-keyframes sk-stretchdelay {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
}
@keyframes sk-stretchdelay {
0%, 40%, 100% {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
}
20% {
20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
......
three.js/examples/mobile-performance.html
浏览文件 @ 45ea143a
......@@ -34,7 +34,7 @@
// init scene and camera
var scene = new THREE.Scene();
//////////////////////////////////////////////////////////////////////////////////
// Initialize a basic camera
//////////////////////////////////////////////////////////////////////////////////
......@@ -48,37 +48,37 @@
////////////////////////////////////////////////////////////////////////////////
var arToolkitSource = new THREEx.ArToolkitSource({
// to read from the webcam
// to read from the webcam
sourceType : 'webcam',
// to read from an image
// sourceType : 'image',
// sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/images/img.jpg',
// sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/images/img.jpg',
// to read from a video
// sourceType : 'video',
// sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/videos/headtracking.mp4',
// sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/videos/headtracking.mp4',
})
arToolkitSource.init(function onReady(){
onResize()
})
// handle resize
window.addEventListener('resize', function(){
onResize()
})
function onResize(){
arToolkitSource.onResize()
arToolkitSource.copySizeTo(renderer.domElement)
arToolkitSource.onResizeElement()
arToolkitSource.copyElementSizeTo(renderer.domElement)
if( arToolkitContext.arController !== null ){
arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)
}
arToolkitSource.copyElementSizeTo(arToolkitContext.arController.canvas)
}
}
////////////////////////////////////////////////////////////////////////////////
// initialize arToolkitContext
////////////////////////////////////////////////////////////////////////////////
// create atToolkitContext
var arToolkitContext = new THREEx.ArToolkitContext({
......@@ -100,12 +100,12 @@
arToolkitContext.update( arToolkitSource.domElement )
})
////////////////////////////////////////////////////////////////////////////////
// Create a ArMarkerControls
////////////////////////////////////////////////////////////////////////////////
var markerRoot = new THREE.Group
scene.add(markerRoot)
var artoolkitMarker = new THREEx.ArMarkerControls(arToolkitContext, markerRoot, {
......@@ -131,23 +131,23 @@
var arWorldRoot = smoothedRoot
// add a torus knot
var geometry = new THREE.CubeGeometry(1,1,1);
// add a torus knot
var geometry = new THREE.BoxGeometry(1,1,1);
var material = new THREE.MeshNormalMaterial({
transparent : true,
opacity: 0.5,
side: THREE.DoubleSide
});
});
var mesh = new THREE.Mesh( geometry, material );
mesh.position.y = geometry.parameters.height/2
arWorldRoot.add( mesh );
var geometry = new THREE.TorusKnotGeometry(0.3,0.1,64,16);
var material = new THREE.MeshNormalMaterial();
var material = new THREE.MeshNormalMaterial();
var mesh = new THREE.Mesh( geometry, material );
mesh.position.y = 0.5
arWorldRoot.add( mesh );
onRenderFcts.push(function(){
mesh.rotation.x += 0.1
})
......
three.js/examples/multi-markers/examples/player.html
浏览文件 @ 45ea143a
......@@ -7,11 +7,11 @@
<script src='../../../vendor/jsartoolkit5/build/artoolkit.min.js'></script>
<script src='../../../vendor/jsartoolkit5/js/artoolkit.api.js'></script>
<!-- aruco -->
<script src='../../../vendor/js-aruco/src/svd.js'></script>
<script src='../../../vendor/js-aruco/src/posit1.js'></script>
<script src='../../../vendor/js-aruco/src/cv.js'></script>
<script src='../../../vendor/js-aruco/src/aruco.js'></script>
<script src='../../../src/threex/threex-aruco/threex-arucocontext.js'></script>
<script src='../../../vendor/js-aruco/src/svd.js'></script>
<script src='../../../vendor/js-aruco/src/posit1.js'></script>
<script src='../../../vendor/js-aruco/src/cv.js'></script>
<script src='../../../vendor/js-aruco/src/aruco.js'></script>
<script src='../../../src/threex/threex-aruco/threex-arucocontext.js'></script>
<script src='../../../src/threex/threex-aruco/threex-arucodebug.js'></script>
<!-- include threex.artoolkit -->
<script src='../../../src/threex/threex-artoolkitsource.js'></script>
......@@ -36,7 +36,7 @@
</div>
<!-- info at the top of page -->
<div style='position: fixed; bottom: 10px; width:100%; text-align: center;z-index:1';>
tracking backend:
tracking backend:
<a href='javascript:void(0)' onclick='trackingBackendSet("artoolkit")'>artoolkit</a>
/
<a href='javascript:void(0)' onclick='trackingBackendSet("aruco")'>aruco</a>
......@@ -119,28 +119,28 @@
arToolkitSource.init(function onReady(){
onResize()
})
// handle resize
window.addEventListener('resize', function(){
onResize()
})
function onResize(){
arToolkitSource.onResizeElement()
arToolkitSource.copyElementSizeTo(renderer.domElement)
arToolkitSource.copyElementSizeTo(renderer.domElement)
if( urlOptions.trackingBackend === 'artoolkit' ){
if( arToolkitContext.arController !== null ){
arToolkitSource.copyElementSizeTo(arToolkitContext.arController.canvas)
}
arToolkitSource.copyElementSizeTo(arToolkitContext.arController.canvas)
}
}else if( urlOptions.trackingBackend === 'aruco' ){
arToolkitSource.copyElementSizeTo(arToolkitContext.arucoContext.canvas)
arToolkitSource.copyElementSizeTo(arToolkitContext.arucoContext.canvas)
camera.aspect = renderer.domElement.width / renderer.domElement.height;
camera.updateProjectionMatrix();
camera.updateProjectionMatrix();
}else console.assert(false)
}
////////////////////////////////////////////////////////////////////////////////
// initialize arToolkitContext
////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
// create atToolkitContext
var arToolkitContext = new ARjs.Context(artoolkitProfile.contextParameters)
......@@ -148,7 +148,7 @@
arToolkitContext.init(function onCompleted(){
// if artoolkit, copy projection matrix to camera
if( arToolkitContext.parameters.trackingBackend === 'artoolkit' ){
camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
}
})
......@@ -162,12 +162,12 @@
//////////////////////////////////////////////////////////////////////////////
// get multiMarkerFile
//////////////////////////////////////////////////////////////////////////////
// if no localStorage.ARjsMultiMarkerFile, then write one with default marker
if( localStorage.getItem('ARjsMultiMarkerFile') === null ){
THREEx.ArMultiMarkerUtils.storeDefaultMultiMarkerFile(urlOptions.trackingBackend)
}
// get multiMarkerFile from localStorage
console.assert( localStorage.getItem('ARjsMultiMarkerFile') !== null )
var multiMarkerFile = localStorage.getItem('ARjsMultiMarkerFile')
......@@ -178,7 +178,7 @@
// build a markerRoot
var markerRoot = new THREE.Group()
scene.add(markerRoot)
// build a multiMarkerControls
var multiMarkerControls = THREEx.ArMultiMarkerControls.fromJSON(arToolkitContext, scene, markerRoot, multiMarkerFile)
......@@ -203,11 +203,11 @@
// add an helper to visuable each sub-marker
var markerHelper = new THREEx.ArMarkerHelper(subMarkerControls)
markerHelpers.push(markerHelper)
subMarkerControls.object3d.add( markerHelper.object3d )
subMarkerControls.object3d.add( markerHelper.object3d )
})
function markerHelpersToggleVisibility(){
var wasVisible = markerHelpers[0].object3d.visible
var wasVisible = markerHelpers[0].object3d.visible
markerHelpers.forEach(function(markerHelper){
markerHelper.object3d.visible = wasVisible ? false : true
})
......@@ -223,23 +223,23 @@
THREEx.ArMultiMarkerUtils.navigateToLearnerPage('learner.html', urlOptions.trackingBackend)
})
window.resetMarkerFile = function(){
THREEx.ArMultiMarkerUtils.storeDefaultMultiMarkerFile(urlOptions.trackingBackend)
location.reload()
}
function trackingBackendSet(trackingBackend){
THREEx.ArMultiMarkerUtils.storeDefaultMultiMarkerFile(trackingBackend)
urlOptions.trackingBackend = trackingBackend
urlOptionsUpdate()
location.reload()
}
window.trackingBackendSet = trackingBackendSet
//////////////////////////////////////////////////////////////////////////////////
// Add simple object on smoothedRoot
//////////////////////////////////////////////////////////////////////////////////
......@@ -247,7 +247,7 @@
;(function(){
var arWorldRoot = new THREE.Group()
var averageMatrix = THREEx.ArMultiMarkerControls.computeCenter(multiMarkerFile)
averageMatrix.decompose(arWorldRoot.position, arWorldRoot.quaternion, arWorldRoot.scale)
averageMatrix.decompose(arWorldRoot.position, arWorldRoot.quaternion, arWorldRoot.scale)
smoothedRoot.add(arWorldRoot)
// markerRoot.add(arWorldRoot)
......@@ -255,29 +255,29 @@
// var screenAsPortal = new THREEx.ScreenAsPortal(multiMarkerFile)
// arWorldRoot.add(screenAsPortal.object3d)
var mesh = new THREE.AxisHelper()
var mesh = new THREE.AxesHelper()
arWorldRoot.add(mesh)
// add a torus knot
// add a torus knot
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshNormalMaterial({
transparent : true,
opacity: 0.5,
side: THREE.DoubleSide
});
});
var mesh = new THREE.Mesh( geometry, material );
mesh.position.y = geometry.parameters.height/2
arWorldRoot.add(mesh)
var geometry = new THREE.TorusKnotGeometry(0.3,0.1,64,16);
var material = new THREE.MeshNormalMaterial();
var material = new THREE.MeshNormalMaterial();
var mesh = new THREE.Mesh( geometry, material );
mesh.position.y = 0.5
arWorldRoot.add( mesh );
onRenderFcts.push(function(delta){
mesh.rotation.x += delta * Math.PI
})
})
})()
//////////////////////////////////////////////////////////////////////////////////
......
three.js/examples/multi-markers/examples/tmp/default.html
浏览文件 @ 45ea143a
......@@ -16,7 +16,7 @@
<script>THREEx.ArToolkitContext.baseURL = '../../../'</script>
<body style='margin : 0px; overflow: hidden; font-family: Monospace;'><div style='position: absolute; top: 10px; width:100%; text-align: center;z-index:1';>
<a href='https://github.com/jeromeetienne/AR.js/' target='_blank'>AR.js</a> - default setting - webcam + hiro + profile + lerp
<a href='https://github.com/jeromeetienne/AR.js/' target='_blank'>AR.js</a> - default setting - webcam + hiro + profile + lerp
<br/>
Contact me any time at <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
</div><script>
......@@ -64,9 +64,9 @@
arToolkitSource.init(function onReady(){
// handle resize of renderer
arToolkitSource.onResize([renderer.domElement, arToolkitContext.arController.canvas])
arToolkitSource.onResize([renderer.domElement, arToolkitContext.arController.canvas])
})
// handle resize
window.addEventListener('resize', function(){
// handle arToolkitSource resize
......@@ -75,7 +75,7 @@
////////////////////////////////////////////////////////////////////////////////
// initialize arToolkitContext
////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
// create atToolkitContext
var arToolkitContext = new THREEx.ArToolkitContext(artoolkitProfile.contextParameters)
......@@ -91,12 +91,12 @@
arToolkitContext.update( arToolkitSource.domElement )
})
////////////////////////////////////////////////////////////////////////////////
// Create a ArMarkerControls
////////////////////////////////////////////////////////////////////////////////
var markerRoot = new THREE.Group
scene.add(markerRoot)
var markerControls = new THREEx.ArMarkerControls(arToolkitContext, markerRoot, {
......@@ -118,29 +118,29 @@
//////////////////////////////////////////////////////////////////////////////////
var mesh = new THREE.AxisHelper()
var mesh = new THREE.AxesHelper()
// markerRoot.add(mesh)
smoothedRoot.add(mesh)
// add a torus knot
// add a torus knot
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshNormalMaterial({
transparent : true,
opacity: 0.5,
side: THREE.DoubleSide
});
});
var mesh = new THREE.Mesh( geometry, material );
mesh.position.y = geometry.parameters.height/2
// markerRoot.add( mesh );
smoothedRoot.add(mesh)
var geometry = new THREE.TorusKnotGeometry(0.3,0.1,64,16);
var material = new THREE.MeshNormalMaterial();
var material = new THREE.MeshNormalMaterial();
var mesh = new THREE.Mesh( geometry, material );
mesh.position.y = 0.5
// markerRoot.add( mesh );
smoothedRoot.add( mesh );
onRenderFcts.push(function(delta){
mesh.rotation.x += delta * Math.PI
})
......
three.js/examples/parameters-tunning.html
浏览文件 @ 45ea143a
......@@ -280,13 +280,13 @@ body {
arToolkitSource.init(function onReady(){
// handle resize of renderer
arToolkitSource.onResize(renderer.domElement)
arToolkitSource.onResizeElement(renderer.domElement)
})
// handle resize
window.addEventListener('resize', function(){
// handle arToolkitSource resize
arToolkitSource.onResize(renderer.domElement)
arToolkitSource.onResizeElement(renderer.domElement)
})
////////////////////////////////////////////////////////////////////////////////
......@@ -331,7 +331,7 @@ body {
//////////////////////////////////////////////////////////////////////////////////
var mesh = new THREE.AxisHelper()
var mesh = new THREE.AxesHelper()
markerRoot.add(mesh)
// add a torus knot
......
three.js/examples/profile.html
浏览文件 @ 45ea143a
......@@ -22,8 +22,8 @@
<div style='position: absolute;bottom: 0;right: 0;background-color: rgba(255,255,255,0.4); padding: 1em; z-index: 1;'>
<label title='Select the profile you like'>Profile :
<select id='artoolkitProfile'>
<option value="desktop-fast">desktop-fast</option>
<option value="desktop-normal">desktop-normal</option>
<option value="desktop-fast">desktop-fast</option>
<option value="desktop-normal">desktop-normal</option>
<option value="phone-normal">phone-normal</option>
<option value="phone-slow">phone-slow</option>
<option value="dynamic" selected>dynamic</option>
......@@ -60,7 +60,7 @@
var directionalLight = new THREE.DirectionalLight( 0x887766 );
directionalLight.position.set( -1, 1, 1 ).normalize();
scene.add( directionalLight );
//////////////////////////////////////////////////////////////////////////////////
// Initialize a basic camera
//////////////////////////////////////////////////////////////////////////////////
......@@ -68,7 +68,7 @@
// Create a camera
var camera = new THREE.Camera();
scene.add(camera);
//////////////////////////////////////////////////////////////////////////////
// handle profile ui
//////////////////////////////////////////////////////////////////////////////
......@@ -90,11 +90,11 @@
var artoolkitProfile = new THREEx.ArToolkitProfile()
artoolkitProfile.sourceWebcam().hiroMarker()
artoolkitProfile.sourceWebcam()
// artoolkitProfile.sourceVideo(THREEx.ArToolkitContext.baseURL + '../data/videos/headtracking.mp4').kanjiMarker();
// artoolkitProfile.sourceImage(THREEx.ArToolkitContext.baseURL + '../data/images/img.jpg').hiroMarker()
// artoolkitProfile.performance('desktop-fast')
if( localStorage.getItem('artoolkitPerformanceProfile') !== null ){
var label = localStorage.getItem('artoolkitPerformanceProfile')
console.log('Using stored profile', label)
......@@ -111,22 +111,22 @@
arToolkitSource.init(function onReady(){
onResize()
})
// handle resize
window.addEventListener('resize', function(){
onResize()
})
function onResize(){
arToolkitSource.onResize()
arToolkitSource.copySizeTo(renderer.domElement)
arToolkitSource.onResizeElement()
arToolkitSource.copyElementSizeTo(renderer.domElement)
if( arToolkitContext.arController !== null ){
arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)
}
arToolkitSource.copyElementSizeTo(arToolkitContext.arController.canvas)
}
}
////////////////////////////////////////////////////////////////////////////////
// initialize arToolkitContext
////////////////////////////////////////////////////////////////////////////////
// create atToolkitContext
var arToolkitContext = new THREEx.ArToolkitContext(artoolkitProfile.contextParameters)
......@@ -142,12 +142,12 @@
arToolkitContext.update( arToolkitSource.domElement )
})
////////////////////////////////////////////////////////////////////////////////
// Create a ArMarkerControls
////////////////////////////////////////////////////////////////////////////////
var markerRoot = new THREE.Group
scene.add(markerRoot)
var artoolkitMarker = new THREEx.ArMarkerControls(arToolkitContext, markerRoot, artoolkitProfile.defaultMarkerParameters)
......@@ -156,23 +156,23 @@
// add an object in the scene
//////////////////////////////////////////////////////////////////////////////////
// add a torus knot
// add a torus knot
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshNormalMaterial({
transparent : true,
opacity: 0.5,
side: THREE.DoubleSide
});
});
var mesh = new THREE.Mesh( geometry, material );
mesh.position.y = geometry.parameters.height/2
markerRoot.add( mesh );
var geometry = new THREE.TorusKnotGeometry(0.3,0.1,64,16);
var material = new THREE.MeshNormalMaterial();
var material = new THREE.MeshNormalMaterial();
var mesh = new THREE.Mesh( geometry, material );
mesh.position.y = 0.5
markerRoot.add( mesh );
onRenderFcts.push(function(){
mesh.rotation.x += 0.1
})
......
three.js/examples/test-runner.html
浏览文件 @ 45ea143a
......@@ -46,28 +46,28 @@
<br/>
<a href='../../three.js/examples/multi-markers/markers-page/' target='_blank'>Markers page</a>
<br/>
<strong>Tracking Backend:</strong>
<strong>Tracking Backend:</strong>
<a href='?artoolkit'>artoolkit</a>
/
/
<a href='?aruco'>aruco</a>
/
/
<a href='?area-artoolkit'>area artoolkit</a>
/
/
<a href='?area-aruco'>area aruco</a>
/
/
<a href='?tango'>tango</a>
/
/
<a href='?best'>best</a>
</div><script>
// ;(function(){
// get tracking method from location.search
var trackingMethod = location.search.substring(1) ? location.search.substring(1) : 'best'
//////////////////////////////////////////////////////////////////////////////////
// Init
//////////////////////////////////////////////////////////////////////////////////
// init renderer
var renderer = new THREE.WebGLRenderer({
antialias : true,
......@@ -80,20 +80,20 @@
renderer.domElement.style.top = '0px'
renderer.domElement.style.left = '0px'
document.body.appendChild( renderer.domElement );
// array of functions for the rendering loop
var onRenderFcts= [];
// init scene and camera
var scene = new THREE.Scene();
//////////////////////////////////////////////////////////////////////////////////
// Initialize the camera
//////////////////////////////////////////////////////////////////////////////////
var camera = ARjs.Utils.createDefaultCamera(trackingMethod)
scene.add(camera)
////////////////////////////////////////////////////////////////////////////////
// Set up Arjs.Profile
////////////////////////////////////////////////////////////////////////////////
......@@ -113,7 +113,7 @@
arProfile.defaultMarker()
// .changeMatrixMode('modelViewMatrix')
// .changeMatrixMode('cameraTransformMatrix')
// arProfile.performance('desktop-fast')
// arProfile.contextParameters.maxDetectionRate = 60
......@@ -123,7 +123,7 @@
if( arProfile.contextParameters.trackingBackend === 'tango' ){
arProfile.changeMatrixMode('cameraTransformMatrix')
}
arProfile.checkIfValid()
//////////////////////////////////////////////////////////////////////////////
......@@ -131,19 +131,19 @@
//////////////////////////////////////////////////////////////////////////////
ARjs.AnchorDebugUI.MarkersAreaLearnerURL = ARjs.Context.baseURL + 'examples/multi-markers/examples/learner-testrunner.html'
var arSession = new ARjs.Session({
scene: scene,
renderer: renderer,
camera: camera,
sourceParameters: arProfile.sourceParameters,
contextParameters: arProfile.contextParameters
contextParameters: arProfile.contextParameters
})
onRenderFcts.push(function(){
arSession.update()
})
////////////////////////////////////////////////////////////////////////////////
// Create a ARjs.Anchor
////////////////////////////////////////////////////////////////////////////////
......@@ -156,7 +156,7 @@
//////////////////////////////////////////////////////////////////////////////
// handle Hit Tester
//////////////////////////////////////////////////////////////////////////////
var hitTesting = new ARjs.HitTesting(arSession)
onRenderFcts.push(function(){
hitTesting.update(camera, arAnchor.object3d, arAnchor.parameters.changeMatrixMode)
......@@ -170,11 +170,11 @@
var hitTestResult = hitTestResults[0]
hitTestResult.apply(arAnchor.object3d)
})
//////////////////////////////////////////////////////////////////////////////
// tango specifics
//////////////////////////////////////////////////////////////////////////////
if( arProfile.contextParameters.trackingBackend === 'tango' ){
// init tangoVideoMesh
var tangoVideoMesh = new ARjs.TangoVideoMesh(arSession)
......@@ -188,36 +188,36 @@
var tangoPointCloud = new ARjs.TangoPointCloud(arSession)
scene.add(tangoPointCloud.object3d)
}
//////////////////////////////////////////////////////////////////////////////////
// add an object to the arAnchor
//////////////////////////////////////////////////////////////////////////////////
var arWorldRoot = arAnchor.object3d
var mesh = new THREE.AxisHelper()
var mesh = new THREE.AxesHelper()
arWorldRoot.add(mesh)
// add a torus knot
// add a torus knot
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshNormalMaterial({
transparent : true,
opacity: 0.5,
side: THREE.DoubleSide
});
});
var mesh = new THREE.Mesh( geometry, material );
mesh.position.y = geometry.parameters.height/2
arWorldRoot.add( mesh );
// var geometry = new THREE.TorusKnotGeometry(0.3,0.1,64,16);
// var material = new THREE.MeshNormalMaterial();
// var material = new THREE.MeshNormalMaterial();
// var mesh = new THREE.Mesh( geometry, material );
// mesh.position.y = 0.5
// arWorldRoot.add( mesh );
//
//
// onRenderFcts.push(function(delta){
// mesh.rotation.x += Math.PI*delta
// })
//////////////////////////////////////////////////////////////////////////////
// DebugUI
//////////////////////////////////////////////////////////////////////////////
......@@ -240,26 +240,26 @@
//////////////////////////////////////////////////////////////////////////////////
// render the whole thing on the page
//////////////////////////////////////////////////////////////////////////////////
// render the scene
onRenderFcts.push(function(){
// Render the see through camera scene
renderer.clear()
// render tangoVideoMesh
if( arProfile.contextParameters.trackingBackend === 'tango' ){
tangoVideoMesh.render()
}
// render hitTesting pickingPlane - for debug
var renderHitTestingPickingPlane = false
var renderHitTestingPickingPlane = false
if( renderHitTestingPickingPlane && hitTesting._hitTestingPlane){
hitTesting._hitTestingPlane.renderDebug(renderer)
}
renderer.render( scene, camera );
})
// run the rendering loop
var lastTimeMsec= null
requestAnimationFrame(function animate(nowMsec){
......
three.js/examples/trackingbackend-switch.html
浏览文件 @ 45ea143a
......@@ -2,17 +2,17 @@
<meta name='viewport' content='width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0'>
<!-- three.js library -->
<script src='../examples/vendor/three.js/build/three.js'></script>
<!-- include for artoolkit trackingBackend -->
<!-- include for artoolkit trackingMethod -->
<script src='../vendor/jsartoolkit5/build/artoolkit.min.js'></script>
<script src='../vendor/jsartoolkit5/js/artoolkit.api.js'></script>
<!-- include for aruco trackingBackend -->
<script src='../vendor/js-aruco/src/svd.js'></script>
<script src='../vendor/js-aruco/src/posit1.js'></script>
<script src='../vendor/js-aruco/src/cv.js'></script>
<script src='../vendor/js-aruco/src/aruco.js'></script>
<script src='../src/threex/threex-aruco/threex-arucocontext.js'></script>
<!-- include for aruco trackingMethod -->
<script src='../vendor/js-aruco/src/svd.js'></script>
<script src='../vendor/js-aruco/src/posit1.js'></script>
<script src='../vendor/js-aruco/src/cv.js'></script>
<script src='../vendor/js-aruco/src/aruco.js'></script>
<script src='../src/threex/threex-aruco/threex-arucocontext.js'></script>
<script src='../src/threex/threex-aruco/threex-arucodebug.js'></script>
<!-- include for tango trackingBackend -->
<!-- include for tango trackingMethod -->
<script src='../vendor/chromium-tango/THREE.WebAR.js'></script>
<!-- include ar.js -->
<script src='../src/new-api/arjs-utils.js'></script>
......@@ -29,50 +29,50 @@
<a href='https://github.com/jeromeetienne/AR.js/' target='_blank'>AR.js</a> - switching between backend
by <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
<br/>
Marker image
Marker image
<a href='../../data/images/hiro.jpg' target='_blank'>hiro for artoolkit</a>
/
<a href='../../three.js/threex/threex-aruco/examples/images/1001.png' target='_blank'>1001 for aruco</a>
<br/>
<strong>Tracking Backend:</strong> <span id='currentTracking'>unknown</span>
-
Switch to :
-
Switch to :
<a href='?artoolkit'>artoolkit</a>
/
/
<a href='?aruco'>aruco</a>
/
/
<a href='?tango'>tango</a>
</div><script>
var trackingBackend = location.search.substring(1) ? location.search.substring(1) : 'artoolkit'
document.querySelector('#currentTracking').innerHTML = trackingBackend
// if we are running on tango device, ensure trackingBackend is 'tango'
if( trackingBackend !== 'tango' && ARjs.Utils.isTango() === true ){
var trackingMethod = location.search.substring(1) ? location.search.substring(1) : 'artoolkit'
document.querySelector('#currentTracking').innerHTML = trackingMethod
// if we are running on tango device, ensure trackingMethod is 'tango'
if( trackingMethod !== 'tango' && ARjs.Utils.isTango() === true ){
location.search = '#tango'
location.reload()
}
// TODO make the multi-markers too
// - aruco-area
// - artoolkit-area
// - trackingMethod=
// - trackingBackend=
//
// - trackingMethod=
//
// - thus you got the whole stack available here
// - it dramatically reduce the boilerplate
// - it is the base of the aframe ar.js, the base of webar-playground
// - maybe put all that in a class
// - this is the base of a typical AR.js application - aka support all tracking transparantly
//
//
// TODO is that required ?
var changeMatrixMode = 'cameraTransformMatrix'
// var changeMatrixMode = 'modelViewMatrix'
//////////////////////////////////////////////////////////////////////////////////
// Init
//////////////////////////////////////////////////////////////////////////////////
// init renderer
var renderer = new THREE.WebGLRenderer({
antialias: true,
......@@ -85,69 +85,69 @@
renderer.domElement.style.top = '0px'
renderer.domElement.style.left = '0px'
document.body.appendChild( renderer.domElement );
// array of functions for the rendering loop
var onRenderFcts= [];
// init scene and camera
var scene = new THREE.Scene();
//////////////////////////////////////////////////////////////////////////////////
// Initialize the camera
//////////////////////////////////////////////////////////////////////////////////
var camera = ARjs.Utils.createDefaultCamera(trackingBackend)
var camera = ARjs.Utils.createDefaultCamera(trackingMethod)
scene.add(camera);
////////////////////////////////////////////////////////////////////////////////
// handle arToolkitSource
////////////////////////////////////////////////////////////////////////////////
var arProfile = new THREEx.ArToolkitProfile()
.sourceWebcam()
.trackingBackend(trackingBackend)
.defaultMarker(trackingBackend)
.trackingMethod(trackingMethod)
.defaultMarker(trackingMethod)
// FIXME temporary placeholder - to reevaluate later
if( trackingBackend === 'tango' ){
if( trackingMethod === 'tango' ){
arProfile.sourceImage(THREEx.ArToolkitContext.baseURL + '../data/images/img.jpg')
}
var arToolkitSource = new THREEx.ArToolkitSource(arProfile.sourceParameters)
}
var arToolkitSource = new THREEx.ArToolkitSource(arProfile.sourceParameters)
arToolkitSource.init(function onReady(){
arToolkitSource.onResize(arContext, renderer, camera)
})
// handle resize
window.addEventListener('resize', function(){
arToolkitSource.onResize(arContext, renderer, camera)
})
////////////////////////////////////////////////////////////////////////////////
// initialize arContext
////////////////////////////////////////////////////////////////////////////////
// create atToolkitContext
var arContext = new THREEx.ArToolkitContext(arProfile.contextParameters)
// initialize it
arContext.init()
arContext.addEventListener('initialized', function(event){
arToolkitSource.onResize(arContext, renderer, camera)
})
// update artoolkit on every frame
onRenderFcts.push(function(){
if( arToolkitSource.ready === false ) return
arContext.update( arToolkitSource.domElement )
})
////////////////////////////////////////////////////////////////////////////////
// Create a ArMarkerControls
////////////////////////////////////////////////////////////////////////////////
// honor changeMatrixMode
arProfile.defaultMarkerParameters.changeMatrixMode = changeMatrixMode
......@@ -155,7 +155,7 @@
scene.add(markerRoot)
if( changeMatrixMode === 'modelViewMatrix' ){
var markerControls = new THREEx.ArMarkerControls(arContext, markerRoot, arProfile.defaultMarkerParameters)
var markerControls = new THREEx.ArMarkerControls(arContext, markerRoot, arProfile.defaultMarkerParameters)
}else if( changeMatrixMode === 'cameraTransformMatrix' ){
var markerControls = new THREEx.ArMarkerControls(arContext, camera, arProfile.defaultMarkerParameters)
}else console.assert(false)
......@@ -172,7 +172,7 @@
arWorldRoot.visible = smoothedRoot.visible
})
}
// build a smoothedControls
var smoothedRoot = new THREE.Group()
scene.add(smoothedRoot)
......@@ -190,15 +190,15 @@
//////////////////////////////////////////////////////////////////////////////
// handle videoMesh for tango
//////////////////////////////////////////////////////////////////////////////
if( trackingBackend === 'tango' ){
if( trackingMethod === 'tango' ){
// Create the see through camera scene and camera
var sceneVideoMesh = new THREE.Scene()
var cameraVideoMesh = new THREE.OrthographicCamera( -1, 1, 1, -1, 0, 100 )
var cameraVideoMesh = new THREE.OrthographicCamera( -1, 1, 1, -1, 0, 100 )
// tango only - init cameraMesh
arContext.addEventListener('initialized', function(event){
// sanity check
console.assert( arContext.parameters.trackingBackend === 'tango' )
console.assert( arContext.parameters.trackingMethod === 'tango' )
// variable declaration
var vrDisplay = arContext._tangoContext.vrDisplay
console.assert(vrDisplay, 'vrDisplay MUST be defined')
......@@ -209,14 +209,14 @@
sceneVideoMesh.add(videoMesh)
onRenderFcts.push(function(){
// Make sure that the camera is correctly displayed depending on the device and camera orientations.
THREE.WebAR.updateCameraMeshOrientation(vrDisplay, videoMesh)
THREE.WebAR.updateCameraMeshOrientation(vrDisplay, videoMesh)
})
})
}
// tango only - picking to set object position
renderer.domElement.addEventListener("click", function(event) {
if( arContext.parameters.trackingBackend !== 'tango' ) return
if( arContext.parameters.trackingMethod !== 'tango' ) return
var mousePosition = new THREE.Vector3();
mousePosition.x = event.pageX / window.innerWidth;
......@@ -229,54 +229,54 @@
arWorldRoot.quaternion.copy(result.quaternion)
arWorldRoot.scale.set(1,1,1).multiplyScalar(0.1)
})
//////////////////////////////////////////////////////////////////////////////////
// add an object in the scene
//////////////////////////////////////////////////////////////////////////////////
var mesh = new THREE.AxisHelper()
var mesh = new THREE.AxesHelper()
arWorldRoot.add(mesh)
// add a torus knot
// add a torus knot
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshNormalMaterial({
transparent : true,
opacity: 0.5,
side: THREE.DoubleSide
});
});
var mesh = new THREE.Mesh( geometry, material );
mesh.position.y = geometry.parameters.height/2
arWorldRoot.add( mesh );
var geometry = new THREE.TorusKnotGeometry(0.3,0.1,64,16);
var material = new THREE.MeshNormalMaterial();
var material = new THREE.MeshNormalMaterial();
var mesh = new THREE.Mesh( geometry, material );
mesh.position.y = 0.5
arWorldRoot.add( mesh );
onRenderFcts.push(function(delta){
mesh.rotation.x += Math.PI*delta
})
//////////////////////////////////////////////////////////////////////////////////
// render the whole thing on the page
//////////////////////////////////////////////////////////////////////////////////
// render the scene
onRenderFcts.push(function(){
// Render the see through camera scene
renderer.clear()
// render videoMesh for tango
if( arContext.parameters.trackingBackend === 'tango'){
if( arContext.parameters.trackingMethod === 'tango'){
renderer.render( sceneVideoMesh, cameraVideoMesh )
// Render the perspective scene
renderer.clearDepth()
}
renderer.render( scene, camera );
})
// run the rendering loop
var lastTimeMsec= null
requestAnimationFrame(function animate(nowMsec){
......
three.js/examples/vendor/three.js/build/three.js 100644 → 100755
浏览文件 @ 45ea143a
此差异已折叠。
three.js/examples/webvr-for-ar.html
浏览文件 @ 45ea143a
......@@ -19,9 +19,9 @@
<script>THREEx.ArToolkitContext.baseURL = '../'</script>
<body style='margin : 0px; overflow: hidden; font-family: Monospace;'><div style='position: absolute; top: 10px; width:100%; text-align: center;z-index:1';>
<a href="https://github.com/jeromeetienne/AR.js/" target="_blank">AR.js</a> - WebVR for AR
<a href="https://github.com/jeromeetienne/AR.js/" target="_blank">AR.js</a> - WebVR for AR
- <a href="https://medium.com/arjs/webvr-for-augmented-reality-f1e69a505902" target="_blank">Blog Post</a>
- by <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
- by <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
<br/>
Useful for phone-in-hmd usecase - work in progress
- Press p to toggle webvr present
......@@ -55,7 +55,7 @@
var directionalLight = new THREE.DirectionalLight( 0x887766 );
directionalLight.position.set( -1, 1, 1 ).normalize();
scene.add( directionalLight );
//////////////////////////////////////////////////////////////////////////////////
// Initialize a basic camera
//////////////////////////////////////////////////////////////////////////////////
......@@ -65,7 +65,7 @@
// scene.add(camera);
// Create a three.js camera.
var camera = new THREE.PerspectiveCamera(42, window.innerWidth / window.innerHeight, 0.1, 100);
var camera = new THREE.PerspectiveCamera(42, window.innerWidth / window.innerHeight, 0.1, 100);
scene.add(camera);
//////////////////////////////////////////////////////////////////////////////
......@@ -89,7 +89,7 @@
window.addEventListener('vrdisplaypresentchange', function onVRDisplayPresentChange() {
onResize();
});
function togglePresent(){
if( vrDisplay.capabilities.canPresent === false ){
alert('You vr display can not present!')
......@@ -113,19 +113,19 @@
function onResize() {
// handle arToolkitSource resize
arToolkitSource.onResize(renderer.domElement)
arToolkitSource.onResizeElement(renderer.domElement)
// get width/height from arToolkitSource.domElement
var elementWidth = parseFloat( arToolkitSource.domElement.style.width.replace(/px$/,''), 10 )
var elementHeight = parseFloat( arToolkitSource.domElement.style.height.replace(/px$/,''), 10 )
if( vrEffect !== null ){
vrEffect.setSize(elementWidth, elementHeight);
}
if( camera instanceof THREE.PerspectiveCamera === true ){
camera.aspect = elementWidth / elementHeight;
camera.updateProjectionMatrix();
camera.updateProjectionMatrix();
}
}
////////////////////////////////////////////////////////////////////////////////
......@@ -133,25 +133,25 @@
////////////////////////////////////////////////////////////////////////////////
var arToolkitSource = new THREEx.ArToolkitSource({
// to read from the webcam
// to read from the webcam
sourceType : 'webcam',
// // to read from an image
// sourceType : 'image',
// sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/images/img.jpg',
// sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/images/img.jpg',
// // to read from a video
// sourceType : 'video',
// sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/videos/headtracking.mp4',
// sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/videos/headtracking.mp4',
})
arToolkitSource.init(function onReady(){
onResize()
})
////////////////////////////////////////////////////////////////////////////////
// initialize arToolkitContext
////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
// create atToolkitContext
var arToolkitContext = new THREEx.ArToolkitContext({
......@@ -165,7 +165,7 @@
arToolkitContext.init(function onCompleted(){
if( camera instanceof THREE.PerspectiveCamera === false ){
// copy projection matrix to camera
camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
}
})
......@@ -175,12 +175,12 @@
arToolkitContext.update( arToolkitSource.domElement )
})
////////////////////////////////////////////////////////////////////////////////
// Create a ArMarkerControls
////////////////////////////////////////////////////////////////////////////////
var markerRoot = new THREE.Group
scene.add(markerRoot)
var artoolkitMarker = new THREEx.ArMarkerControls(arToolkitContext, markerRoot, {
......@@ -192,14 +192,14 @@
//////////////////////////////////////////////////////////////////////////////////
// build videoTexture
//////////////////////////////////////////////////////////////////////////////////
// get videoTexture
if( arToolkitSource.domElement.nodeName === 'VIDEO' ){
var videoTexture = new THREE.VideoTexture(arToolkitSource.domElement)
// arToolkitSource.domElement.pause()
}else if( arToolkitSource.domElement.nodeName === 'IMG' ){
var videoTexture = new THREE.Texture(arToolkitSource.domElement)
videoTexture.needsUpdate = true
videoTexture.needsUpdate = true
}else console.assert(false)
// TODO to remove if webgl2 - better visual ?
videoTexture.minFilter = THREE.NearestFilter
......@@ -209,7 +209,7 @@
// plane always in front of the camera, exactly as big as the viewport
//////////////////////////////////////////////////////////////////////////////
var videoInWebgl = new THREEx.ArVideoInWebgl(videoTexture)
scene.add(videoInWebgl.object3d);
scene.add(videoInWebgl.object3d);
arToolkitSource.domElement.style.visibility = 'hidden'
// TODO extract the fov from the projectionMatrix
......@@ -223,22 +223,22 @@
// Code Separator
//////////////////////////////////////////////////////////////////////////////
// var video = arToolkitSource.domElement;
//
//
// window.addEventListener('resize', function(){
// updateSeeThruAspectUv(seethruPlane)
// updateSeeThruAspectUv(seethruPlane)
// })
// video.addEventListener('canplaythrough', function(){
// updateSeeThruAspectUv(seethruPlane)
// })
// function updateSeeThruAspectUv(plane){
//
//
// // if video isnt yet ready to play
// if( video.videoWidth === 0 || video.videoHeight === 0 ) return
//
//
// var faceVertexUvs = plane.geometry.faceVertexUvs[0]
// var screenAspect = window.innerWidth / window.innerHeight
// var videoAspect = video.videoWidth / video.videoHeight
//
//
// plane.geometry.uvsNeedUpdate = true
// if( screenAspect >= videoAspect ){
// var actualHeight = videoAspect / screenAspect;
......@@ -256,7 +256,7 @@
// faceVertexUvs[0][0].x = 0.5 - actualWidth/2
// faceVertexUvs[0][1].x = 0.5 - actualWidth/2
// faceVertexUvs[1][0].x = 0.5 - actualWidth/2
//
//
// // faceVertexUvs x 1
// faceVertexUvs[0][2].x = 0.5 + actualWidth/2
// faceVertexUvs[1][1].x = 0.5 + actualWidth/2
......@@ -269,23 +269,23 @@
// add an object in the scene
//////////////////////////////////////////////////////////////////////////////////
// add a torus knot
// add a torus knot
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshNormalMaterial({
transparent : true,
opacity: 0.5,
side: THREE.DoubleSide
});
});
var mesh = new THREE.Mesh( geometry, material );
mesh.position.y = geometry.parameters.height/2
markerRoot.add( mesh );
var geometry = new THREE.TorusKnotGeometry(0.3,0.1,64,16);
var material = new THREE.MeshNormalMaterial();
var material = new THREE.MeshNormalMaterial();
var mesh = new THREE.Mesh( geometry, material );
mesh.position.y = 0.5
markerRoot.add( mesh );
onRenderFcts.push(function(){
mesh.rotation.x += 0.1
})
......
three.js/experiments/deadreckoning.html
浏览文件 @ 45ea143a
......@@ -49,7 +49,7 @@
var directionalLight = new THREE.DirectionalLight( 0x887766 );
directionalLight.position.set( -1, 1, 1 ).normalize();
scene.add( directionalLight );
//////////////////////////////////////////////////////////////////////////////////
// Initialize a basic camera
//////////////////////////////////////////////////////////////////////////////////
......@@ -63,32 +63,32 @@
////////////////////////////////////////////////////////////////////////////////
var arToolkitSource = new THREEx.ArToolkitSource({
// to read from the webcam
// to read from the webcam
sourceType : 'webcam',
// to read from an image
// sourceType : 'image',
// sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/images/img.jpg',
// sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/images/img.jpg',
// to read from a video
// sourceType : 'video',
// sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/videos/headtracking.mp4',
// sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/videos/headtracking.mp4',
})
arToolkitSource.init(function onReady(){
// handle resize of renderer
arToolkitSource.onResize(renderer.domElement)
arToolkitSource.onResizeElement()
})
// handle resize
window.addEventListener('resize', function(){
// handle arToolkitSource resize
arToolkitSource.onResize(renderer.domElement)
arToolkitSource.onResizeElement()
})
////////////////////////////////////////////////////////////////////////////////
// initialize arToolkitContext
////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
// create atToolkitContext
var arToolkitContext = new THREEx.ArToolkitContext({
......@@ -110,12 +110,12 @@
arToolkitContext.update( arToolkitSource.domElement )
})
////////////////////////////////////////////////////////////////////////////////
// Create a ArMarkerControls
////////////////////////////////////////////////////////////////////////////////
var markerRoot = new THREE.Group
scene.add(markerRoot)
......@@ -125,7 +125,7 @@ if( false ){
patternUrl : THREEx.ArToolkitContext.baseURL + '../data/data/patt.hiro',
// patternUrl : THREEx.ArToolkitContext.baseURL + '../data/data/patt.kanji',
})
}else{
}else{
var deadReckoningControls = new THREEx.DeadReckoningControls(markerRoot)
onRenderFcts.push(function(){
deadReckoningControls.update()
......@@ -139,7 +139,7 @@ if( false ){
patternUrl : THREEx.ArToolkitContext.baseURL + '../data/data/patt.hiro',
// patternUrl : THREEx.ArToolkitContext.baseURL + '../data/data/patt.kanji',
})
artoolkitMarker.addEventListener('markerFound', function(event){
deadReckoningControls.setKnownPose(knownPositionMesh.position, knownPositionMesh.quaternion, knownPositionMesh.scale)
})
......@@ -154,22 +154,22 @@ if( false ){
//////////////////////////////////////////////////////////////////////////////////
var mesh = new THREE.AxisHelper()
var mesh = new THREE.AxesHelper()
markerRoot.add(mesh)
// add a torus knot
// add a torus knot
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshNormalMaterial({
transparent : true,
opacity: 0.5,
side: THREE.DoubleSide
});
});
var mesh = new THREE.Mesh( geometry, material );
mesh.position.y = geometry.parameters.height/2
markerRoot.add( mesh );
var geometry = new THREE.TorusKnotGeometry(0.3,0.1,64,16);
var material = new THREE.MeshNormalMaterial();
var material = new THREE.MeshNormalMaterial();
var mesh = new THREE.Mesh( geometry, material );
mesh.position.y = 0.5
markerRoot.add( mesh );
......
three.js/experiments/magic-book/logo.html
浏览文件 @ 45ea143a
......@@ -77,7 +77,7 @@
var directionalLight = new THREE.DirectionalLight( 'white' );
directionalLight.position.set( -1, 1, 1 ).normalize();
scene.add( directionalLight );
//////////////////////////////////////////////////////////////////////////////////
// Initialize a basic camera
//////////////////////////////////////////////////////////////////////////////////
......@@ -91,13 +91,13 @@
////////////////////////////////////////////////////////////////////////////////
var arToolkitSource = new THREEx.ArToolkitSource({
// to read from the webcam
// to read from the webcam
sourceType : 'webcam',
// to read from an image
// sourceType : 'image',
// sourceUrl : 'images/magic-book.jpg',
// sourceUrl : 'images/magic-book2.png',
// sourceUrl : 'images/magic-book.jpg',
// sourceUrl : 'images/magic-book2.png',
// to read from a video
// sourceType : 'video',
......@@ -106,9 +106,9 @@
arToolkitSource.init(function onReady(){
// handle resize of renderer
arToolkitSource.onResize([renderer.domElement, arToolkitContext.arController.canvas])
arToolkitSource.onResize([renderer.domElement, arToolkitContext.arController.canvas])
})
// handle resize
window.addEventListener('resize', function(){
// handle arToolkitSource resize
......@@ -117,7 +117,7 @@
////////////////////////////////////////////////////////////////////////////////
// initialize arToolkitContext
////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
// create atToolkitContext
var arToolkitContext = new THREEx.ArToolkitContext({
......@@ -138,12 +138,12 @@
arToolkitContext.update( arToolkitSource.domElement )
})
////////////////////////////////////////////////////////////////////////////////
// Create a ArMarkerControls
////////////////////////////////////////////////////////////////////////////////
var markerRoot = new THREE.Group
scene.add(markerRoot)
var markerControls = new THREEx.ArMarkerControls(arToolkitContext, markerRoot, {
......@@ -157,9 +157,9 @@
//////////////////////////////////////////////////////////////////////////////////
var mesh = new THREE.AxisHelper()
var mesh = new THREE.AxesHelper()
markerRoot.add(mesh)
// build a smoothedControls
var smoothedRoot = new THREE.Group()
scene.add(smoothedRoot)
......@@ -169,34 +169,34 @@
})
onRenderFcts.push(function(delta){
smoothedControls.update(markerRoot)
})
})
var bookRoot = new THREE.Group
smoothedRoot.add(bookRoot)
bookRoot.position.x = -1.15
bookRoot.position.y = 1.5
bookRoot.position.z = 1.5
bookRoot.rotation.x = -Math.PI/2
// // add a torus knot
// // add a torus knot
// var geometry = new THREE.CubeGeometry(1,1,1);
// var material = new THREE.MeshNormalMaterial({
// transparent : true,
// opacity: 0.5,
// side: THREE.DoubleSide
// });
// });
// var mesh = new THREE.Mesh( geometry, material );
// mesh.position.y = geometry.parameters.height/2
// markerRoot.add( mesh );
//
//
// var geometry = new THREE.TorusKnotGeometry(0.3,0.1,64,16);
// var material = new THREE.MeshNormalMaterial();
// var material = new THREE.MeshNormalMaterial();
// var mesh = new THREE.Mesh( geometry, material );
// mesh.position.y = 0.5
// markerRoot.add( mesh );
//
//
// onRenderFcts.push(function(delta){
// mesh.rotation.x += delta * Math.PI
// })
......@@ -283,7 +283,7 @@
var parent = new THREE.Object3D();
markerRoot.add(parent)
parent.scale.set(1,1,1).multiplyScalar(0.4)
var COLOR1 = new THREE.Color('red')
var COLOR2 = new THREE.Color('pink')
var COLOR1 = new THREE.Color(0x77bbff);
......@@ -318,15 +318,15 @@
var glyph2 = new THREE.Mesh( geometry, material )
glyph2.position.y = 0.5
parent.add( glyph2 );
// GLYPHE2 WIREFRAME
var material = new THREE.MeshBasicMaterial({
color: COLOR2,
wireframe: true,
wireframeLinewidth: 4,
blending : THREE.AdditiveBlending,
// depthTest: false,
blending : THREE.AdditiveBlending,
// depthTest: false,
opacity: 1,
transparent : true,
})
......@@ -335,10 +335,10 @@
glyph2wf.position.copy( glyph2.position )
glyph2wf.rotation.copy( glyph2.rotation )
glyph2wf.scale.copy(glyph2.scale).multiplyScalar(1.00)
parent.add( glyph2wf );
parent.add( glyph2wf );
// GLYPHE2 GLOW OCCLUDER
var glyph2oc = new THREE.Mesh(
var glyph2oc = new THREE.Mesh(
glyph2.geometry.clone(),
new THREE.MeshPhongMaterial({
color: 0x000000,
......@@ -357,15 +357,15 @@
onRenderFcts.push(function(delta, now){
glyph.rotation.x += 0.004;
glyph.rotation.z -= 0.003;
glyph2.rotation.x -= 0.004;
glyph2.rotation.z += 0.003;
glyph2.rotation.z += 0.003;
glyph2wf.rotation.x -= 0.004;
glyph2wf.rotation.z += 0.003;
glyph2wf.rotation.z += 0.003;
glyph2oc.rotation.x -= 0.004;
glyph2oc.rotation.z += 0.003;
glyph2oc.rotation.z += 0.003;
})
})()
......@@ -374,18 +374,18 @@
var COLOR1 = new THREE.Color(0x77bbff);
var COLOR2 = new THREE.Color(0x8ec5e5);
var COLOR3 = new THREE.Color(0x97a8ba);
// CUBE PARTICLES
var material = new THREE.PointsMaterial({
map : THREE.ImageUtils.loadTexture( "images/pixel.png" ),
blending : THREE.AdditiveBlending,
depthTest: false,
map : THREE.ImageUtils.loadTexture( "images/pixel.png" ),
blending : THREE.AdditiveBlending,
depthTest: false,
transparent : true,
color: COLOR1,
color: COLOR1,
size: 0.4,
opacity : 1.4,
});
var height = 1
var geometry = new THREE.Geometry();
......@@ -397,8 +397,8 @@
vector3.x = Math.cos(angle)
vector3.z = Math.sin(angle)
var radius = 0.6 + 0.1*(Math.random()-0.5)
var radius = 0.6 + 0.1*(Math.random()-0.5)
vector3.setLength( radius )
vector3.y = (Math.random()-0.5) * height
vertices.push( vector3 )
......@@ -407,9 +407,9 @@
var cube = new THREE.Points( geometry, material );
cube.position.y = height/2
smoothedRoot.add( cube );
var speeds = [];
for( i = 0; i < vertices.length; i++ ){
for( i = 0; i < vertices.length; i++ ){
speeds[i] = Math.random()*0.2+0.02;
}
......
three.js/experiments/magic-book/magic-book.html
浏览文件 @ 45ea143a
......@@ -76,7 +76,7 @@
var directionalLight = new THREE.DirectionalLight( 0x887766 );
directionalLight.position.set( -1, 1, 1 ).normalize();
scene.add( directionalLight );
//////////////////////////////////////////////////////////////////////////////////
// Initialize a basic camera
//////////////////////////////////////////////////////////////////////////////////
......@@ -90,13 +90,13 @@
////////////////////////////////////////////////////////////////////////////////
var arToolkitSource = new THREEx.ArToolkitSource({
// to read from the webcam
// to read from the webcam
sourceType : 'webcam',
// to read from an image
// sourceType : 'image',
// sourceUrl : 'images/magic-book.jpg',
// sourceUrl : 'images/magic-book2.png',
// sourceUrl : 'images/magic-book.jpg',
// sourceUrl : 'images/magic-book2.png',
// to read from a video
// sourceType : 'video',
......@@ -105,9 +105,9 @@
arToolkitSource.init(function onReady(){
// handle resize of renderer
arToolkitSource.onResize([renderer.domElement, arToolkitContext.arController.canvas])
arToolkitSource.onResize([renderer.domElement, arToolkitContext.arController.canvas])
})
// handle resize
window.addEventListener('resize', function(){
// handle arToolkitSource resize
......@@ -116,7 +116,7 @@
////////////////////////////////////////////////////////////////////////////////
// initialize arToolkitContext
////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
// create atToolkitContext
var arToolkitContext = new THREEx.ArToolkitContext({
......@@ -137,12 +137,12 @@
arToolkitContext.update( arToolkitSource.domElement )
})
////////////////////////////////////////////////////////////////////////////////
// Create a ArMarkerControls
////////////////////////////////////////////////////////////////////////////////
var markerRoot = new THREE.Group
scene.add(markerRoot)
var markerControls = new THREEx.ArMarkerControls(arToolkitContext, markerRoot, {
......@@ -156,9 +156,9 @@
//////////////////////////////////////////////////////////////////////////////////
var mesh = new THREE.AxisHelper()
var mesh = new THREE.AxesHelper()
markerRoot.add(mesh)
// build a smoothedControls
var smoothedRoot = new THREE.Group()
scene.add(smoothedRoot)
......@@ -168,12 +168,12 @@
})
onRenderFcts.push(function(delta){
smoothedControls.update(markerRoot)
})
})
var bookRoot = new THREE.Group
smoothedRoot.add(bookRoot)
bookRoot.position.x = -1.15
bookRoot.position.y = 1.5
bookRoot.position.z = 1.5
......@@ -245,7 +245,7 @@
var parent = new THREE.Object3D();
markerRoot.add(parent)
parent.scale.set(1,1,1).multiplyScalar(0.4)
var COLOR1 = new THREE.Color('red')
var COLOR2 = new THREE.Color('pink')
var COLOR1 = new THREE.Color(0x77bbff);
......@@ -280,15 +280,15 @@
var glyph2 = new THREE.Mesh( geometry, material )
glyph2.position.y = 0.5
parent.add( glyph2 );
// GLYPHE2 WIREFRAME
var material = new THREE.MeshBasicMaterial({
color: COLOR2,
wireframe: true,
wireframeLinewidth: 4,
blending : THREE.AdditiveBlending,
// depthTest: false,
blending : THREE.AdditiveBlending,
// depthTest: false,
opacity: 1,
transparent : true,
})
......@@ -297,10 +297,10 @@
glyph2wf.position.copy( glyph2.position )
glyph2wf.rotation.copy( glyph2.rotation )
glyph2wf.scale.copy(glyph2.scale).multiplyScalar(1.00)
parent.add( glyph2wf );
parent.add( glyph2wf );
// GLYPHE2 GLOW OCCLUDER
var glyph2oc = new THREE.Mesh(
var glyph2oc = new THREE.Mesh(
glyph2.geometry.clone(),
new THREE.MeshPhongMaterial({
color: 0x000000,
......@@ -321,13 +321,13 @@
glyph.rotation.z -= 0.003;
glyph2.rotation.x -= 0.004;
glyph2.rotation.z += 0.003;
glyph2.rotation.z += 0.003;
glyph2wf.rotation.x -= 0.004;
glyph2wf.rotation.z += 0.003;
glyph2oc.rotation.x -= 0.004;
glyph2oc.rotation.z += 0.003;
glyph2oc.rotation.z += 0.003;
})
})()
......@@ -340,18 +340,18 @@
var COLOR1 = new THREE.Color(0x77bbff);
var COLOR2 = new THREE.Color(0x8ec5e5);
var COLOR3 = new THREE.Color(0x97a8ba);
// CUBE PARTICLES
var material = new THREE.PointsMaterial({
map : THREE.ImageUtils.loadTexture( "images/pixel.png" ),
blending : THREE.AdditiveBlending,
depthTest: false,
map : THREE.ImageUtils.loadTexture( "images/pixel.png" ),
blending : THREE.AdditiveBlending,
depthTest: false,
transparent : true,
color: COLOR1,
color: COLOR1,
size: 0.4,
opacity : 1.4,
});
var height = 2.5
var geometry = new THREE.Geometry();
......@@ -363,8 +363,8 @@
vector3.x = Math.cos(angle)
vector3.z = Math.sin(angle)
var radius = 0.3 + 0.1*(Math.random()-0.5)
var radius = 0.3 + 0.1*(Math.random()-0.5)
vector3.setLength( radius )
vector3.y = (Math.random()-0.5) * height
vertices.push( vector3 )
......@@ -373,9 +373,9 @@
var cube = new THREE.Points( geometry, material );
cube.position.y = height/2
bookRoot.add( cube );
var speeds = [];
for( i = 0; i < vertices.length; i++ ){
for( i = 0; i < vertices.length; i++ ){
speeds[i] = Math.random()*0.2+0.02;
}
......
three.js/experiments/show-gravity-webgl.html
浏览文件 @ 45ea143a
......@@ -27,7 +27,7 @@
// init scene and camera
var scene = new THREE.Scene();
//////////////////////////////////////////////////////////////////////////////////
// Initialize a basic camera
//////////////////////////////////////////////////////////////////////////////////
......@@ -39,31 +39,31 @@
window.addEventListener( 'resize', function() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}, false );
//////////////////////////////////////////////////////////////////////////////////
// add an object in the scene
//////////////////////////////////////////////////////////////////////////////////
// add a torus knot
// add a torus knot
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshNormalMaterial({
transparent : true,
opacity: 0.5,
side: THREE.DoubleSide
});
});
var meshCube = new THREE.Mesh( geometry, material );
scene.add( meshCube );
meshCube.add( new THREE.AxisHelper() )
meshCube.add( new THREE.AxesHelper() )
var geometry = new THREE.TorusKnotGeometry(0.3,0.1,64,16);
var material = new THREE.MeshNormalMaterial();
var material = new THREE.MeshNormalMaterial();
var mesh = new THREE.Mesh( geometry, material );
meshCube.add( mesh );
onRenderFcts.push(function(delta){
mesh.rotation.x += Math.PI*delta
})
......@@ -74,9 +74,9 @@
deviceEuler.y = event.gamma / 180 * Math.PI
deviceEuler.z = event.alpha / 180 * Math.PI
deviceEuler.order = "XZY"
var controllerQuaternion = new THREE.Quaternion().setFromEuler(deviceEuler).inverse()
meshCube.quaternion.copy(controllerQuaternion)
var controllerQuaternion = new THREE.Quaternion().setFromEuler(deviceEuler).inverse()
meshCube.quaternion.copy(controllerQuaternion)
});
......@@ -86,31 +86,31 @@
// deviceEuler.y = event.gamma / 180 * Math.PI
// deviceEuler.z = event.alpha / 180 * Math.PI
// deviceEuler.order = "XZY"
//
// var controllerQuaternion = new THREE.Quaternion().setFromEuler(deviceEuler).inverse()
// meshCube.quaternion.copy(controllerQuaternion)
//
// var controllerQuaternion = new THREE.Quaternion().setFromEuler(deviceEuler).inverse()
// meshCube.quaternion.copy(controllerQuaternion)
// });
//
//
// window.addEventListener("devicemotion", function onDeviceMotion(event) {
// // document.querySelector('#accelerationIncludingGravityX').innerHTML = event.accelerationIncludingGravity.x.toFixed(2)
// // document.querySelector('#accelerationIncludingGravityY').innerHTML = event.accelerationIncludingGravity.y.toFixed(2)
// // document.querySelector('#accelerationIncludingGravityZ').innerHTML = event.accelerationIncludingGravity.z.toFixed(2)
// //
// //
// // document.querySelector('#accelerationX').innerHTML = event.acceleration.x.toFixed(2)
// // document.querySelector('#accelerationY').innerHTML = event.acceleration.y.toFixed(2)
// // document.querySelector('#accelerationZ').innerHTML = event.acceleration.z.toFixed(2)
// //
// //
// // document.querySelector('#gravityX').innerHTML = (event.accelerationIncludingGravity.x - event.acceleration.x).toFixed(2)
// // document.querySelector('#gravityY').innerHTML = (event.accelerationIncludingGravity.y - event.acceleration.y).toFixed(2)
// // document.querySelector('#gravityZ').innerHTML = (event.accelerationIncludingGravity.z - event.acceleration.z).toFixed(2)
// //
// //
// var gravity = new THREE.Vector3()
// gravity.x = event.accelerationIncludingGravity.x - event.acceleration.x
// gravity.y = event.accelerationIncludingGravity.y - event.acceleration.y
// gravity.z = event.accelerationIncludingGravity.z - event.acceleration.z
//
//
// meshCube.lookAt(gravity)
// });
......
three.js/experiments/sketchfab/examples/viewer.html
浏览文件 @ 45ea143a
......@@ -61,9 +61,9 @@
var object3d = new THREE.DirectionalLight('white', 0.5*1)
object3d.position.set(3, 3, 2)
object3d.name = 'Fill light'
scene.add(object3d)
scene.add(object3d)
})()
//////////////////////////////////////////////////////////////////////////////////
// Initialize a basic camera
//////////////////////////////////////////////////////////////////////////////////
......@@ -77,23 +77,23 @@
////////////////////////////////////////////////////////////////////////////////
var arToolkitSource = new THREEx.ArToolkitSource({
// to read from the webcam
// to read from the webcam
sourceType : 'webcam',
// // to read from an image
// sourceType : 'image',
// sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/images/img.jpg',
// sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/images/img.jpg',
// to read from a video
// sourceType : 'video',
// sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/videos/headtracking.mp4',
// sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/videos/headtracking.mp4',
})
arToolkitSource.init(function onReady(){
// handle resize of renderer
arToolkitSource.onResize([renderer.domElement, arToolkitContext.arController.canvas])
arToolkitSource.onResize([renderer.domElement, arToolkitContext.arController.canvas])
})
// handle resize
window.addEventListener('resize', function(){
// handle arToolkitSource resize
......@@ -102,7 +102,7 @@
////////////////////////////////////////////////////////////////////////////////
// initialize arToolkitContext
////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
// create atToolkitContext
var arToolkitContext = new THREEx.ArToolkitContext({
......@@ -125,12 +125,12 @@
arToolkitContext.update( arToolkitSource.domElement )
})
////////////////////////////////////////////////////////////////////////////////
// Create a ArMarkerControls
////////////////////////////////////////////////////////////////////////////////
var markerRoot = new THREE.Group
scene.add(markerRoot)
var markerControls = new THREEx.ArMarkerControls(arToolkitContext, markerRoot, {
......@@ -149,8 +149,8 @@
})
onRenderFcts.push(function(delta){
smoothedControls.update(markerRoot)
})
})
// smoothedControls.addEventListener('becameVisible', function(){
// console.log('becameVisible event notified')
// })
......@@ -163,29 +163,29 @@
//////////////////////////////////////////////////////////////////////////////////
// var mesh = new THREE.AxisHelper()
// var mesh = new THREE.AxesHelper()
// // markerRoot.add(mesh)
// smoothedRoot.add(mesh)
// // add a torus knot
// // add a torus knot
// var geometry = new THREE.CubeGeometry(1,1,1);
// var material = new THREE.MeshNormalMaterial({
// transparent : true,
// opacity: 0.5,
// side: THREE.DoubleSide
// });
// });
// var mesh = new THREE.Mesh( geometry, material );
// mesh.position.y = geometry.parameters.height/2
// // markerRoot.add( mesh );
// smoothedRoot.add(mesh)
//
//
// var geometry = new THREE.TorusKnotGeometry(0.3,0.1,64,16);
// var material = new THREE.MeshNormalMaterial();
// var material = new THREE.MeshNormalMaterial();
// var mesh = new THREE.Mesh( geometry, material );
// mesh.position.y = 0.5
// // markerRoot.add( mesh );
// smoothedRoot.add( mesh );
//
//
// onRenderFcts.push(function(delta){
// mesh.rotation.x += delta * Math.PI
// })
......
three.js/src/threex/threex-armarkerhelper.js
浏览文件 @ 45ea143a
......@@ -3,7 +3,7 @@ var THREEx = THREEx || {}
THREEx.ArMarkerHelper = function(markerControls){
this.object3d = new THREE.Group
var mesh = new THREE.AxisHelper()
var mesh = new THREE.AxesHelper()
this.object3d.add(mesh)
var text = markerControls.id
......@@ -28,12 +28,12 @@ THREEx.ArMarkerHelper = function(markerControls){
// var geometry = new THREE.CubeGeometry(1, 1, 1)
var geometry = new THREE.PlaneGeometry(1, 1)
var material = new THREE.MeshBasicMaterial({
map: texture,
map: texture,
transparent: true
});
var mesh = new THREE.Mesh(geometry, material)
mesh.rotation.x = -Math.PI/2
this.object3d.add(mesh)
}
three.js/src/threex/threex-artoolkitcontext.js
浏览文件 @ 45ea143a
......@@ -76,7 +76,7 @@ Object.assign( ARjs.Context.prototype, THREE.EventDispatcher.prototype );
// ARjs.Context.baseURL = '../'
// default to github page
ARjs.Context.baseURL = 'https://jeromeetienne.github.io/AR.js/three.js/'
ARjs.Context.REVISION = '1.7.1';
ARjs.Context.REVISION = '1.7.2';
/**
* Create a default camera for this trackingBackend
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或