diff --git a/examples/ar_simplest/index.html b/examples/ar_simplest/index.html index d24897e..e26679d 100644 --- a/examples/ar_simplest/index.html +++ b/examples/ar_simplest/index.html @@ -82,6 +82,30 @@ } } + function AxesHelper( size ) { + size = size || 1; + + var vertices = [ + 0, 0, 0, size, 0, 0, + 0, 0, 0, 0, size, 0, + 0, 0, 0, 0, 0, size + ]; + + var colors = [ + 1, 0, 0, 1, 0.6, 0, + 0, 1, 0, 0.6, 1, 0, + 0, 0, 1, 0, 0.6, 1 + ]; + + var geometry = new THREE.BufferGeometry(); + geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) ); + geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) ); + + var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } ); + + return new THREE.LineSegments(geometry, material); + } + window.addEventListener('DOMContentLoaded', () => { setTimeout(() => { diff --git a/examples/face_tracking/index.html b/examples/face_tracking/index.html index bebe957..e1cfc4a 100644 --- a/examples/face_tracking/index.html +++ b/examples/face_tracking/index.html @@ -244,6 +244,30 @@ } } + function AxesHelper( size ) { + size = size || 1; + + var vertices = [ + 0, 0, 0, size, 0, 0, + 0, 0, 0, 0, size, 0, + 0, 0, 0, 0, 0, size + ]; + + var colors = [ + 1, 0, 0, 1, 0.6, 0, + 0, 1, 0, 0.6, 1, 0, + 0, 0, 1, 0, 0.6, 1 + ]; + + var geometry = new THREE.BufferGeometry(); + geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) ); + geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) ); + + var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } ); + + return new THREE.LineSegments(geometry, material); + } + window.addEventListener('DOMContentLoaded', () => { setTimeout(() => { diff --git a/examples/hit_test/index.html b/examples/hit_test/index.html index ed0c05b..a38a444 100644 --- a/examples/hit_test/index.html +++ b/examples/hit_test/index.html @@ -131,6 +131,30 @@ } } + function AxesHelper( size ) { + size = size || 1; + + var vertices = [ + 0, 0, 0, size, 0, 0, + 0, 0, 0, 0, size, 0, + 0, 0, 0, 0, 0, size + ]; + + var colors = [ + 1, 0, 0, 1, 0.6, 0, + 0, 1, 0, 0.6, 1, 0, + 0, 0, 1, 0, 0.6, 1 + ]; + + var geometry = new THREE.BufferGeometry(); + geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) ); + geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) ); + + var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } ); + + return new THREE.LineSegments(geometry, material); + } + window.addEventListener('DOMContentLoaded', () => { setTimeout(() => { diff --git a/examples/image_detection/index.html b/examples/image_detection/index.html index 80b8848..c46efa6 100644 --- a/examples/image_detection/index.html +++ b/examples/image_detection/index.html @@ -193,6 +193,30 @@ return context.getImageData(0, 0, img.width, img.height); } } + function AxesHelper( size ) { + size = size || 1; + + var vertices = [ + 0, 0, 0, size, 0, 0, + 0, 0, 0, 0, size, 0, + 0, 0, 0, 0, 0, size + ]; + + var colors = [ + 1, 0, 0, 1, 0.6, 0, + 0, 1, 0, 0.6, 1, 0, + 0, 0, 1, 0, 0.6, 1 + ]; + + var geometry = new THREE.BufferGeometry(); + geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) ); + geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) ); + + var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } ); + + return new THREE.LineSegments(geometry, material); + } + window.addEventListener('DOMContentLoaded', () => { diff --git a/examples/opencv-aruco/index.html b/examples/opencv-aruco/index.html index 93e4a95..009723b 100644 --- a/examples/opencv-aruco/index.html +++ b/examples/opencv-aruco/index.html @@ -343,6 +343,30 @@ console.log('OpenCV.js is ready'); openCVready = true } + function AxesHelper( size ) { + size = size || 1; + + var vertices = [ + 0, 0, 0, size, 0, 0, + 0, 0, 0, 0, size, 0, + 0, 0, 0, 0, 0, size + ]; + + var colors = [ + 1, 0, 0, 1, 0.6, 0, + 0, 1, 0, 0.6, 1, 0, + 0, 0, 1, 0, 0.6, 1 + ]; + + var geometry = new THREE.BufferGeometry(); + geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) ); + geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) ); + + var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } ); + + return new THREE.LineSegments(geometry, material); + } + window.addEventListener('DOMContentLoaded', () => { setTimeout(() => { diff --git a/examples/opencv-face/index.html b/examples/opencv-face/index.html index dd77948..6d63357 100644 --- a/examples/opencv-face/index.html +++ b/examples/opencv-face/index.html @@ -409,6 +409,31 @@ openCVready = true } + function AxesHelper( size ) { + size = size || 1; + + var vertices = [ + 0, 0, 0, size, 0, 0, + 0, 0, 0, 0, size, 0, + 0, 0, 0, 0, 0, size + ]; + + var colors = [ + 1, 0, 0, 1, 0.6, 0, + 0, 1, 0, 0.6, 1, 0, + 0, 0, 1, 0, 0.6, 1 + ]; + + var geometry = new THREE.BufferGeometry(); + geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) ); + geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) ); + + var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } ); + + return new THREE.LineSegments(geometry, material); + } + + window.addEventListener('DOMContentLoaded', () => { setTimeout(() => { try { diff --git a/examples/peoples/index.html b/examples/peoples/index.html index 6f74887..2780b71 100644 --- a/examples/peoples/index.html +++ b/examples/peoples/index.html @@ -271,6 +271,30 @@ return mesh } } + function AxesHelper( size ) { + size = size || 1; + + var vertices = [ + 0, 0, 0, size, 0, 0, + 0, 0, 0, 0, size, 0, + 0, 0, 0, 0, 0, size + ]; + + var colors = [ + 1, 0, 0, 1, 0.6, 0, + 0, 1, 0, 0.6, 1, 0, + 0, 0, 1, 0, 0.6, 1 + ]; + + var geometry = new THREE.BufferGeometry(); + geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) ); + geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) ); + + var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } ); + + return new THREE.LineSegments(geometry, material); + } + window.addEventListener('DOMContentLoaded', () => { setTimeout(() => { diff --git a/examples/simplecv/index.html b/examples/simplecv/index.html index 7de0148..947fdd8 100644 --- a/examples/simplecv/index.html +++ b/examples/simplecv/index.html @@ -257,6 +257,31 @@ } } + function AxesHelper( size ) { + size = size || 1; + + var vertices = [ + 0, 0, 0, size, 0, 0, + 0, 0, 0, 0, size, 0, + 0, 0, 0, 0, 0, size + ]; + + var colors = [ + 1, 0, 0, 1, 0.6, 0, + 0, 1, 0, 0.6, 1, 0, + 0, 0, 1, 0, 0.6, 1 + ]; + + var geometry = new THREE.BufferGeometry(); + geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) ); + geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) ); + + var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } ); + + return new THREE.LineSegments(geometry, material); + } + + window.addEventListener('DOMContentLoaded', () => { setTimeout(() => { try { diff --git a/examples/vr_simplest/index.html b/examples/vr_simplest/index.html index 59c0e43..ac64e54 100644 --- a/examples/vr_simplest/index.html +++ b/examples/vr_simplest/index.html @@ -86,6 +86,31 @@ } } + function AxesHelper( size ) { + size = size || 1; + + var vertices = [ + 0, 0, 0, size, 0, 0, + 0, 0, 0, 0, size, 0, + 0, 0, 0, 0, 0, size + ]; + + var colors = [ + 1, 0, 0, 1, 0.6, 0, + 0, 1, 0, 0.6, 1, 0, + 0, 0, 1, 0, 0.6, 1 + ]; + + var geometry = new THREE.BufferGeometry(); + geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) ); + geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) ); + + var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } ); + + return new THREE.LineSegments(geometry, material); + } + + window.addEventListener('DOMContentLoaded', () => { window.pageApp = new VRSimplestExample(document.getElementById('target'))