将webGl渲染更改为Canvas渲染

时间:2012-08-21 09:59:13

标签: three.js

要制作边界框我使用此代码:

  'vtk_bounding_box': function(data) {  
                    if ((browser == 'explorer') ||(THIS_IS_TOUCH_DEVICE)) return;
                    var geometry = new THREE.Geometry();
                    var material = new THREE.MeshBasicMaterial({color: 0xFF0000,wireframe: true});
                    box_info = '';

                    for (var i = 0; i < 8; i++){
                        box_info += i+': x:'+ data[i].x +'y:'+ data[i].y +'z:'+ data[i].z
                        geometry.vertices.push( new THREE.Vector3( data[i].x - FocalPoint[0],  data[i].y - FocalPoint[1], data[i].z - FocalPoint[2]));                
                    }                   

                    //Making Bounding Box
                    geometry.faces.push( new THREE.Face4(0,1,2,3));                   
                    geometry.faces.push( new THREE.Face4(2,3,4,7)); 
                    geometry.faces.push( new THREE.Face4(4,5,6,7)); 
                    geometry.faces.push( new THREE.Face4(5,6,1,0));
                    geometry.faces.push( new THREE.Face4(1,2,7,6)); 
                    geometry.faces.push( new THREE.Face4(0,3,4,5));

                    mesh = new THREE.Mesh( geometry, material);                 
                    scene.add( mesh );
                },

当我将渲染类型从webGl更改为画布时?当我旋转它时,部分模型会在某个时候消失。我想说它可以显示完整模型吗?但经过一些轮换后,只能投入几行

1 个答案:

答案 0 :(得分:1)

要使其在CanvasRenderer中有效,您需要将材料制作成双面。在r.50中,你这样做:

var material = new THREE.MeshBasicMaterial( { color: 0xFF0000, wireframe: true, side: THREE.DoubleSide } );