Google VR Viewのコードに変更をかけてみる(PlaneGeometryの実装)


Google VR Viewのライブラリには方形(平面)を描画する関数(PlaneGeometry)がありません。

ライブラリ内のthree.jsはオリジナルに比べてコンパクトですし、Google独自のものもあるように思います。

実装してみます。

Googleコードはこちら(GitHub)

referenceページ

対象

vrview-master/build/three.js

vrview-master/build/embed.js

 

こんな感じ。


three.jsに機能追加

PlaneGeometryを実装

オリジナルはThree.jsのサイトから最新版を取ってくる

2017/04/18現在のバージョンは0.84.00(r84)です

src/geometries/PlaneGeometry.js

不要な部分を削除して、three.jsに2か所追加

/**
* @author xxxxxx
*/

function PlaneGeometry( width, height, widthSegments, heightSegments ) {

Geometry.call( this );

this.type = ‘PlaneGeometry’;

this.parameters = {
width: width,
height: height,
widthSegments: widthSegments,
heightSegments: heightSegments
};

this.fromBufferGeometry( new PlaneBufferGeometry( width, height, widthSegments, heightSegments ) );

}

PlaneGeometry.prototype = Object.create( Geometry.prototype );
PlaneGeometry.prototype.constructor = PlaneGeometry;

/**
* @author mrdoob / http://mrdoob.com/
* @author Mugen87 / https://github.com/Mugen87
*
* based on http://papervision3d.googlecode.com/svn/trunk/as3/trunk/src/org/papervision3d/objects/primitives/Plane.as
*/

function PlaneBufferGeometry( width, height, widthSegments, heightSegments ) {

BufferGeometry.call( this );

this.type = ‘PlaneBufferGeometry’;

this.parameters = {
width: width,
height: height,
widthSegments: widthSegments,
heightSegments: heightSegments
};

var width_half = width / 2;
var height_half = height / 2;

var gridX = Math.floor( widthSegments ) || 1;
var gridY = Math.floor( heightSegments ) || 1;

var gridX1 = gridX + 1;
var gridY1 = gridY + 1;

var segment_width = width / gridX;
var segment_height = height / gridY;

var ix, iy;

// buffers

var indices = [];
var vertices = [];
var normals = [];
var uvs = [];

// generate vertices, normals and uvs

for ( iy = 0; iy < gridY1; iy ++ ) {

var y = iy * segment_height – height_half;

for ( ix = 0; ix < gridX1; ix ++ ) {

var x = ix * segment_width – width_half;

vertices.push( x, – y, 0 );

normals.push( 0, 0, 1 );

uvs.push( ix / gridX );
uvs.push( 1 – ( iy / gridY ) );

}

}

// indices

for ( iy = 0; iy < gridY; iy ++ ) {

for ( ix = 0; ix < gridX; ix ++ ) {

var a = ix + gridX1 * iy;
var b = ix + gridX1 * ( iy + 1 );
var c = ( ix + 1 ) + gridX1 * ( iy + 1 );
var d = ( ix + 1 ) + gridX1 * iy;

// faces

indices.push( a, b, d );
indices.push( b, c, d );

}

}

// build geometry

this.setIndex( indices );
this.addAttribute( ‘position’, new Float32BufferAttribute( vertices, 3 ) );
this.addAttribute( ‘normal’, new Float32BufferAttribute( normals, 3 ) );
this.addAttribute( ‘uv’, new Float32BufferAttribute( uvs, 2 ) );

}

PlaneBufferGeometry.prototype = Object.create( BufferGeometry.prototype );
PlaneBufferGeometry.prototype.constructor = PlaneBufferGeometry;

 

exports.PlaneGeometry = PlaneGeometry;

 


embed.jsでの例

var innerGeometry = new THREE.PlaneGeometry(1,0.5);
var outerGeometry = new THREE.PlaneGeometry(1,0.5);

 


 

Be the first to comment

Leave a Reply

Your email address will not be published.


*