文章/答案/技术大牛

发布

社区首页 >问答首页 >在A帧中创建一个简化的反射式自定义着色器

问在A帧中创建一个简化的反射式自定义着色器
EN

Stack Overflow用户

提问于 2016-10-01 01:54:14

回答 1查看 1.6K关注 0票数 1

因此，我不可避免地在A框中走上了定制着色器的道路。当我真正地研究这个问题的时候，考虑到我可以被认为是这个技术的新手，我遇到了各种各样复杂而不那么清晰的解决方案。

例如：reflection.html，创建比答案更多的问题。

然而，当我访问这个例子：https://stemkoski.github.io/Three.js/Reflection.html时，我确实注意到了一种不同的方法，它看起来更简单一些。

这使我更多地研究了CubeCameras以及三个as如何使用它作为着色器来模拟反射率。

//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帧呢？我尝试了以下几点：

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>

webgl

shader

aframe

webvr

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-10-01 02:04:08

组件可以在现有材料上设置属性。着色器是更多的注册着色器/材料，但A-框架已经有基本/标准的材料。并且需要模式中的选择器属性。：

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;
  }
});

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/39802274

复制

相似问题

问在A帧中创建一个简化的反射式自定义着色器
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在A帧中创建一个简化的反射式自定义着色器EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在A帧中创建一个简化的反射式自定义着色器
EN