So I have inevitably gone down the path of custom shaders in A-FRAME. When really researching this, and given I could be considered a newbie with this tech, I have bumped into all sorts of complicated and not-so clear solutions.
Examples like: https://rawgit.com/mrdoob/three.js/master/examples/webgl_materials_cubemap_balls_reflection.html , create even more questions than answers.
However, when I visited this example: https://stemkoski.github.io/Three.js/Reflection.html , I did notice a different approach which seemed a bit more simplified.
This lead me to research more about CubeCameras and how threejs can use it as a shader in order to simulate reflectivity.
//Create cube camera
var cubeCamera = new THREE.CubeCamera( 1, 100000, 128 );
scene.add( cubeCamera );
//Create car
var chromeMaterial = new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: cubeCamera.renderTarget } );
var car = new Mesh( carGeometry, chromeMaterial );
scene.add( car );
//Update the render target cube
car.setVisible( false );
cubeCamera.position.copy( car.position );
cubeCamera.updateCubeMap( renderer, scene );
//Render the scene
car.setVisible( true );
renderer.render( scene, camera );
Now the question is, how can I translate that into A-FRAME? I tried the following:
AFRAME.registerComponent('chromeThing', {
schema: {
???
},
init: function () {
var el = this.el; // Entity.
var cubeCam = document.querySelector('#cubeCam'); //There is an <a-entity camera id="cubeCam">
var mirrorCubeMaterial = new THREE.MeshBasicMaterial( { envMap: cubeCam.renderTarget } );
mirrorCube = new THREE.Mesh( el, mirrorCubeMaterial );
el.setObject3D('mesh', mirrorCube);
}
});
As you might notice, I'm not sure what the scheme of this would be. Also, should this be a shader or a component? (how could I use this best)
EDIT: After @ngokevin reply, I've come up with this code which is still not giving me the desired results.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chrome box</title>
<meta name="description" content="Physically-Based Materials - A-Frame">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
<script src="https://rawgit.com/ngokevin/kframe/master/dist/kframe.min.js"></script>
<script src="https://rawgit.com/ngokevin/kframe/master/components/reverse-look-controls/index.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<img id="equi1" crossorigin src="https://rawgit.com/aframevr/aframe/master/examples/boilerplate/panorama/puydesancy.jpg" preload="auto">
</a-assets>
<!-- MAIN CAMERA -->
<a-entity id="mainCam" camera="userHeight: 1.6" reverse-look-controls wasd-controls></a-entity>
<!-- CMAERA FOR TEXTURE (?) -->
<a-entity id="cubecamera" camera near="0.1" far="5000" fov="512"></a-entity>
<!-- SKY DOME TO REFLECT ON BOX -->
<a-sky src="#equi1"></sky>
<!-- MAKE THIS BOX CHROME -->
<a-box id="theCube" camera-envmap-material="#cubecamera" color="tomato" depth="2" height="4" width="5" position="0 0 -3" materials=""></a-box>
<!-- THIS BOX IS MOVING AND SHOULD REFLECT ON THE CHROME BOX -->
<a-box id="reflector" color="red" position="0 0 20">
<a-animation attribute="rotation" dur="10000" fill="forwards" to="0 360 0" repeat="indefinite"></a-animation>
</a-box>
</a-scene>
</body>
<script>
AFRAME.registerComponent('camera-envmap-material', {
dependencies: ['material'],
// Selector type so we do `<a-entity camera-envmap-material="#cubecamera">`.
schema: {
type: 'selector'
},
init: function () {
var cameraEl = this.data;
var material = this.el.getObject3D('mesh').material;
// Set envmap on existing material.
// This assumes you have a CubeCamera component that does `setObject3D('cube-camera', new THREE.CubeCamera)`.
material.envMap = cameraEl.getObject3D('camera').renderTarget;
material.needsUpdate = true;
}
});
</script>
</html>
UPDATE #2
After recommendations from @ngokevin here is where I'm at, however, I can't get component to update. The problem seems to be the passing of variables to the tick:function(), I keep getting Uncaught TypeError: Cannot read property 'renderTarget' of undefined
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chrome box</title>
<meta name="description" content="Physically-Based Materials - A-Frame">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
<script src="https://rawgit.com/ngokevin/kframe/master/dist/kframe.min.js"></script>
<script src="https://rawgit.com/ngokevin/kframe/master/components/reverse-look-controls/index.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<img id="equi1" crossorigin src="https://rawgit.com/aframevr/aframe/master/examples/boilerplate/panorama/puydesancy.jpg" preload="auto">
</a-assets>
<!-- MAIN CAMERA -->
<a-entity id="mainCam" camera="userHeight: 1.6" reverse-look-controls wasd-controls></a-entity>
<!-- SKY DOME TO REFLECT ON BOX -->
<a-sky src="#equi1"></sky>
<!-- MAKE THIS BOX CHROME -->
<a-box id="theCube" camera-envmap-material depth="2" height="4" width="5" position="0 0 -3" metalness="1">
</a-box>
<!-- MAKE THIS ROTATE AND REFLECT ON CHROME -->
<a-box id="reflector" color="red" position="0 0 10">
<a-animation attribute="rotation" dur="10000" fill="forwards" to="0 360 0" repeat="indefinite"></a-animation>
</a-box>
</a-scene>
</body>
<script>
AFRAME.registerComponent('camera-envmap-material', {
dependencies: ['material'],
init: function(data) {
this.cameraEl = this.data;
this.material = this.el.getObject3D('mesh').material;
this.theElement = this.el;
this.theScene = this.theElement.sceneEl;
if (!this.theScene.renderStarted) {
this.theScene.addEventListener('renderstart', this.init.bind(this));
return;
}
this.cubeCamera = new THREE.CubeCamera( 0.1, 5000, 512);
this.cubeCamera.position.set(5, 2, 4);
this.cubeCamera.updateCubeMap( this.theScene.renderer, this.theScene.object3D );
this.theElement.setObject3D('cube-camera', this.cubeCamera);
this.material.envMap = this.cubeCamera.renderTarget;
this.material.needsUpdate = true;
},
tick:function(){
this.material.envMap = this.cubeCamera.renderTarget;
this.material.needsUpdate = true;
}
});
</script>
</html>
A component would be okay to set properties on an existing material. A shader is more for registering shaders/materials, but A-Frame already has basic/standard materials. And you want the selector property in the schema.:
AFRAME.registerComponent('camera-envmap-material', {
dependencies: ['material'],
// Selector type so we do `<a-entity camera-envmap-material="#cubecamera">`.
schema: {
type: 'selector'
},
init: function () {
var cameraEl = this.data;
var material = this.el.getObject3D('mesh').material;
// Set envmap on existing material.
// This assumes you have a CubeCamera component that does `setObject3D('cube-camera', new THREE.CubeCamera)`.
material.envMap = cameraEl.getObject3D('camera').renderTarget;
material.needsUpdate = true;
}
});
AFRAME.registerComponent('camera-envmap-material', {
dependencies: ['material'],
init: function () {
var cameraEl = this.data;
var material = this.el.getObject3D('mesh').material;
if (!this.el.sceneEl.renderStarted) {
this.el.sceneEl.addEventListener('renderstart', this.init.bind(this));
return;
}
var cubeCamera = new THREE.CubeCamera( 1, 100000, 128 );
cubeCamera.position.set(5, 2, 4);
cubeCamera.updateCubeMap( this.el.sceneEl.renderer, this.el.sceneEl.object3D );
this.el.setObject3D('cube-camera', cubeCamera);
material.envMap = cubeCamera.renderTarget;
material.needsUpdate = true;
}
});