提供Verge3D教程和Web3D开发技术服务

【verge3D】多渲染窗口(小窗口)的实现

实现如下效果:

在浏览器中打开

https://zjbcool.com/static/app/camera_ctl/camera_ctl.html

步骤:

1.blender中添加新相机命名为camera1,设置相机尺寸为1024*1024

2.在html css中定义渲染窗口的大小和位置

  1. <div id=“camera_view”></div>
  1. #camera_view {
  2. positionabsolute;
  3. rightright0px;
  4. bottombottom0px;
  5. width200px;
  6. height200px;
  7. border1px white solid;
  8. }

3.v3d创建工程,默认设置,在生成的app.js中写入代码:

  1. function runCode() {
  2. // add your code here, e.g. console.log(‘Hello, World!’);
  3. var container1;
  4. var widthheight;
  5. var camera1,renderer1;
  6. container1 = document.getElementById(‘camera_view’);
  7. width = container1.clientWidth;
  8. height = container1.clientHeight;
  9. camera1 = app.scene.getObjectByName(“Camera1”);
  10. renderer1 = new v3d.WebGLRenderer( { antialias: true } );
  11. renderer1.setPixelRatio( window.devicePixelRatio );
  12. renderer1.setSize( widthheight );
  13. container1.appendChild(renderer1.domElement);
  14. animate();
  15. function animate(){
  16.     renderer1.render(app.scene,camera1);
  17.     requestAnimationFrame( animate );
  18.     }
  19. }

 

 

zjbcool

zjbcool
关闭菜单
×
×

产品入口: 产品添加到购物车