【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. }

 

 

文章
BakeMyScan-为自动建模提供的模型优化工具

关于BakeMyScan BakeMyScan是一个免费的开源(GNU GPL v3)插件,基于blender2.79。该项目旨在为模型优化提供强大的工具箱,并可用于摄影测量和3D扫描,Sketchfab发布,游戏资产创建,雕刻,3D打印和 …

文章
3D美术的逆袭-从Web3D到桌面应用开发

如今前端技术真是无所不能,不仅能做前端网页开发,还涉足后端服务器、移动应用,甚至于桌面应用开发,简直有一统天下的气魄。对于移动端我还能理解,html5具有天然的跨平台优势,开发一些C/S架构的移动应用也属于正常现象,但是,对于桌面应用这方天 …

文章
【Verge3D】视频纹理

注:微信小程序无法正确显示代码,可点击右下角更多功能,阅读原文查看 1.在app管理中创建一个名为video的工程; 2.在video.blend文件中创建一个名为screen的面片,后面将在这个面片上呈现视频纹理; 3.在video.ht …