-
Notifications
You must be signed in to change notification settings - Fork 0
/
a-decal.html
106 lines (89 loc) · 4.26 KB
/
a-decal.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<html>
<head>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
<script src="https://unpkg.com/[email protected]/examples/js/geometries/DecalGeometry.js"></script>
<script src="https://unpkg.com/[email protected]/examples/js/controls/OrbitControls.js"></script>
</head>
<body>
<a-scene three-click>
<a-assets>
<a-asset-item id="swan-statue" src="https://cdn.glitch.global/a5690e54-af54-41cd-85d9-b745739e4a11/nude_woman_with_swan_statue.glb?v=1664607421738"></a-asset-item>
</a-assets>
<a-sky color="white"></a-sky>
<a-light type="ambient" color="#222222" position="20 20 20"></a-light>
<a-light type="directional" color="#ffffff" position="20 20 0"></a-light>
<a-entity rotation="0 0 0" position="0 0 6">
<a-camera
camera="fov:40;aspect:window.innerWidth / window.innerHeight;near:1;far:1000;"
>
<a-entity
cursor
raycaster="objects: .can-add-poster;"
position="0 0 -1"
material="color: black; shader: flat"
geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03">
</a-entity>
</a-camera>
</a-entity>
<!-- works on gltf's too -->
<a-entity position="0 0 -2.5" class="can-add-poster" gltf-model="#swan-statue" scale=".1 .1 .1"></a-entity>
<!-- some shapes -->
<a-torus class="can-add-poster" radius-tubular=".1" radius=".5" color="red" position="1.7 .75 -2" rotation="0 -45 0"></a-torus>
<a-cylinder class="can-add-poster" radius=".4" color="yellow" position="1.5 .5 -5" ></a-cylinder>
<a-box class="can-add-poster" color="green" height="1" position="-1.3 .5 -3" rotation="0 45 0"></a-box>
<a-entity class="can-add-poster"
id="sphere"
position="0 1 -5"
geometry="primitive:sphere;radius:1;segmentsWidth:12;segmentsHeight:8;"
material="flatShading:true;color:#00ffff;"
></a-entity>
<a-plane class="can-add-poster" position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
</a-scene>
</body>
<script>
AFRAME.registerComponent('three-click', {
init() {
let sphereMesh = document.querySelector('#sphere').object3D.children[0];
let helper = new THREE.Object3D();
let decalMaterial = new THREE.MeshBasicMaterial( {
// color: 'red',
depthWrite: false,
polygonOffset: true,
polygonOffsetFactor: - 4,
map: new THREE.TextureLoader().load('https://cdn.glitch.global/a5690e54-af54-41cd-85d9-b745739e4a11/00055.png?v=1664334108075'),
});
let scene = AFRAME.scenes[0].object3D;
let mouse = new THREE.Vector2();
function onClick( event ) {
event.preventDefault();
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
console.log(event, event.detail.intersection.object)
// raycaster.setFromCamera( mouse, camera );
// var intersects = raycaster.intersectObject( mesh );
let intersects = [];
if (event.detail.intersection) {
// has face, faceIndex, distance
intersects.push(event.detail.intersection);
}
if ( intersects.length > 0 ) {
var n = intersects[ 0 ].face.normal.clone();
// n.transformDirection( sphereMesh.matrixWorld );
n.transformDirection( intersects[0].object.matrixWorld );
n.add( intersects[ 0 ].point );
helper.position.copy( intersects[ 0 ].point );
helper.lookAt( n );
var position = intersects[ 0 ].point;
let s = Math.random()
var size = new THREE.Vector3(s,s,s );
var decalGeometry = new THREE.DecalGeometry( intersects[0].object, position, helper.rotation, size );
var decal = new THREE.Mesh( decalGeometry, decalMaterial );
scene.add( decal );
}
}
document.addEventListener( 'click', onClick );
}
})
</script>
</html>