Так что я неизбежно пошел по пути пользовательских шейдеров в A-FRAME. Когда я действительно исследовал это, и учитывая, что меня можно считать новичком в этой технологии, я наткнулся на всевозможные сложные и не очень понятные решения.
Например: https://rawgit.com/mrdoob/three.js/master/examples/webgl_materials_cubemap_balls_reflection.html создайте больше вопросов, чем ответов.
Однако, когда я посетил этот пример: https://stemkoski.github.io/Three.js/Reflection.html , я заметил другой подход, который казался более упрощенным.
Это побудило меня больше узнать о CubeCameras и о том, как threejs может использовать их в качестве шейдера для имитации отражения.
//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 );
Теперь вопрос в том, как я могу перевести это в A-FRAME? Я пробовал следующее:
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);
}
});
Как вы могли заметить, я не уверен, какова будет схема этого. Кроме того, это должен быть шейдер или компонент? (как я мог бы использовать это лучше всего)
РЕДАКТИРОВАТЬ: после ответа @ngokevin я придумал этот код, который все еще не дает мне желаемых результатов.
<!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>
ОБНОВЛЕНИЕ №2
После рекомендаций от @ngokevin вот где я нахожусь, однако я не могу обновить компонент. Кажется, проблема заключается в передаче переменных в tick:function(), я продолжаю получать 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>
