Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CameraHelper: Add setColors(). #24235

Merged
merged 1 commit into from
Jun 15, 2022
Merged

CameraHelper: Add setColors(). #24235

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions docs/api/en/helpers/CameraHelper.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,11 @@ <h3>[method:undefined dispose]()</h3>
Disposes of the internally-created [page:Line.material material] and [page:Line.geometry geometry] used by this helper.
</p>

<h3>[method:this setColors]( [param:Color frustum], [param:Color cone], [param:Color up], [param:Color target], [param:Color cross] )</h3>
<p>
Defines the colors of the helper.
</p>

<h3>[method:undefined update]()</h3>
<p>Updates the helper based on the projectionMatrix of the camera.</p>

Expand Down
12 changes: 9 additions & 3 deletions docs/api/zh/helpers/CameraHelper.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,12 +63,18 @@ <h3>[property:Object matrixAutoUpdate]</h3>
</p>





<h2>方法</h2>
<p>请到基类 [page:LineSegments] 页面查看公共方法.</p>

<h3>[method:undefined dispose]()</h3>
<p>
Disposes of the internally-created [page:Line.material material] and [page:Line.geometry geometry] used by this helper.
</p>

<h3>[method:this setColors]( [param:Color frustum], [param:Color cone], [param:Color up], [param:Color target], [param:Color cross] )</h3>
<p>
Defines the colors of the helper.
</p>

<h3>[method:undefined update]()</h3>
<p>基于相机的投影矩阵更新辅助对象.</p>
Expand Down
135 changes: 97 additions & 38 deletions src/helpers/CameraHelper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,72 +28,64 @@ class CameraHelper extends LineSegments {

const pointMap = {};

// colors

const colorFrustum = new Color( 0xffaa00 );
const colorCone = new Color( 0xff0000 );
const colorUp = new Color( 0x00aaff );
const colorTarget = new Color( 0xffffff );
const colorCross = new Color( 0x333333 );

// near

addLine( 'n1', 'n2', colorFrustum );
addLine( 'n2', 'n4', colorFrustum );
addLine( 'n4', 'n3', colorFrustum );
addLine( 'n3', 'n1', colorFrustum );
addLine( 'n1', 'n2' );
addLine( 'n2', 'n4' );
addLine( 'n4', 'n3' );
addLine( 'n3', 'n1' );

// far

addLine( 'f1', 'f2', colorFrustum );
addLine( 'f2', 'f4', colorFrustum );
addLine( 'f4', 'f3', colorFrustum );
addLine( 'f3', 'f1', colorFrustum );
addLine( 'f1', 'f2' );
addLine( 'f2', 'f4' );
addLine( 'f4', 'f3' );
addLine( 'f3', 'f1' );

// sides

addLine( 'n1', 'f1', colorFrustum );
addLine( 'n2', 'f2', colorFrustum );
addLine( 'n3', 'f3', colorFrustum );
addLine( 'n4', 'f4', colorFrustum );
addLine( 'n1', 'f1' );
addLine( 'n2', 'f2' );
addLine( 'n3', 'f3' );
addLine( 'n4', 'f4' );

// cone

addLine( 'p', 'n1', colorCone );
addLine( 'p', 'n2', colorCone );
addLine( 'p', 'n3', colorCone );
addLine( 'p', 'n4', colorCone );
addLine( 'p', 'n1' );
addLine( 'p', 'n2' );
addLine( 'p', 'n3' );
addLine( 'p', 'n4' );

// up

addLine( 'u1', 'u2', colorUp );
addLine( 'u2', 'u3', colorUp );
addLine( 'u3', 'u1', colorUp );
addLine( 'u1', 'u2' );
addLine( 'u2', 'u3' );
addLine( 'u3', 'u1' );

// target

addLine( 'c', 't', colorTarget );
addLine( 'p', 'c', colorCross );
addLine( 'c', 't' );
addLine( 'p', 'c' );

// cross

addLine( 'cn1', 'cn2', colorCross );
addLine( 'cn3', 'cn4', colorCross );
addLine( 'cn1', 'cn2' );
addLine( 'cn3', 'cn4' );

addLine( 'cf1', 'cf2', colorCross );
addLine( 'cf3', 'cf4', colorCross );
addLine( 'cf1', 'cf2' );
addLine( 'cf3', 'cf4' );

function addLine( a, b, color ) {
function addLine( a, b ) {

addPoint( a, color );
addPoint( b, color );
addPoint( a );
addPoint( b );

}

function addPoint( id, color ) {
function addPoint( id ) {

vertices.push( 0, 0, 0 );
colors.push( color.r, color.g, color.b );
colors.push( 0, 0, 0 );

if ( pointMap[ id ] === undefined ) {

Expand Down Expand Up @@ -122,6 +114,73 @@ class CameraHelper extends LineSegments {

this.update();

// colors

const colorFrustum = new Color( 0xffaa00 );
const colorCone = new Color( 0xff0000 );
const colorUp = new Color( 0x00aaff );
const colorTarget = new Color( 0xffffff );
const colorCross = new Color( 0x333333 );

this.setColors( colorFrustum, colorCone, colorUp, colorTarget, colorCross );

}

setColors( frustum, cone, up, target, cross ) {

const geometry = this.geometry;

const colorAttribute = geometry.getAttribute( 'color' );

// near

colorAttribute.setXYZ( 0, frustum.r, frustum.g, frustum.b ); colorAttribute.setXYZ( 1, frustum.r, frustum.g, frustum.b ); // n1, n2
colorAttribute.setXYZ( 2, frustum.r, frustum.g, frustum.b ); colorAttribute.setXYZ( 3, frustum.r, frustum.g, frustum.b ); // n2, n4
colorAttribute.setXYZ( 4, frustum.r, frustum.g, frustum.b ); colorAttribute.setXYZ( 5, frustum.r, frustum.g, frustum.b ); // n4, n3
colorAttribute.setXYZ( 6, frustum.r, frustum.g, frustum.b ); colorAttribute.setXYZ( 7, frustum.r, frustum.g, frustum.b ); // n3, n1

// far

colorAttribute.setXYZ( 8, frustum.r, frustum.g, frustum.b ); colorAttribute.setXYZ( 9, frustum.r, frustum.g, frustum.b ); // f1, f2
colorAttribute.setXYZ( 10, frustum.r, frustum.g, frustum.b ); colorAttribute.setXYZ( 11, frustum.r, frustum.g, frustum.b ); // f2, f4
colorAttribute.setXYZ( 12, frustum.r, frustum.g, frustum.b ); colorAttribute.setXYZ( 13, frustum.r, frustum.g, frustum.b ); // f4, f3
colorAttribute.setXYZ( 14, frustum.r, frustum.g, frustum.b ); colorAttribute.setXYZ( 15, frustum.r, frustum.g, frustum.b ); // f3, f1

// sides

colorAttribute.setXYZ( 16, frustum.r, frustum.g, frustum.b ); colorAttribute.setXYZ( 17, frustum.r, frustum.g, frustum.b ); // n1, f1
colorAttribute.setXYZ( 18, frustum.r, frustum.g, frustum.b ); colorAttribute.setXYZ( 19, frustum.r, frustum.g, frustum.b ); // n2, f2
colorAttribute.setXYZ( 20, frustum.r, frustum.g, frustum.b ); colorAttribute.setXYZ( 21, frustum.r, frustum.g, frustum.b ); // n3, f3
colorAttribute.setXYZ( 22, frustum.r, frustum.g, frustum.b ); colorAttribute.setXYZ( 23, frustum.r, frustum.g, frustum.b ); // n4, f4

// cone

colorAttribute.setXYZ( 24, cone.r, cone.g, cone.b ); colorAttribute.setXYZ( 25, cone.r, cone.g, cone.b ); // p, n1
colorAttribute.setXYZ( 26, cone.r, cone.g, cone.b ); colorAttribute.setXYZ( 27, cone.r, cone.g, cone.b ); // p, n2
colorAttribute.setXYZ( 28, cone.r, cone.g, cone.b ); colorAttribute.setXYZ( 29, cone.r, cone.g, cone.b ); // p, n3
colorAttribute.setXYZ( 30, cone.r, cone.g, cone.b ); colorAttribute.setXYZ( 31, cone.r, cone.g, cone.b ); // p, n4

// up

colorAttribute.setXYZ( 32, up.r, up.g, up.b ); colorAttribute.setXYZ( 33, up.r, up.g, up.b ); // u1, u2
colorAttribute.setXYZ( 34, up.r, up.g, up.b ); colorAttribute.setXYZ( 35, up.r, up.g, up.b ); // u2, u3
colorAttribute.setXYZ( 36, up.r, up.g, up.b ); colorAttribute.setXYZ( 37, up.r, up.g, up.b ); // u3, u1

// target

colorAttribute.setXYZ( 38, target.r, target.g, target.b ); colorAttribute.setXYZ( 39, target.r, target.g, target.b ); // c, t
colorAttribute.setXYZ( 40, cross.r, cross.g, cross.b ); colorAttribute.setXYZ( 41, cross.r, cross.g, cross.b ); // p, c

// cross

colorAttribute.setXYZ( 42, cross.r, cross.g, cross.b ); colorAttribute.setXYZ( 43, cross.r, cross.g, cross.b ); // cn1, cn2
colorAttribute.setXYZ( 44, cross.r, cross.g, cross.b ); colorAttribute.setXYZ( 45, cross.r, cross.g, cross.b ); // cn3, cn4

colorAttribute.setXYZ( 46, cross.r, cross.g, cross.b ); colorAttribute.setXYZ( 47, cross.r, cross.g, cross.b ); // cf1, cf2
colorAttribute.setXYZ( 48, cross.r, cross.g, cross.b ); colorAttribute.setXYZ( 49, cross.r, cross.g, cross.b ); // cf3, cf4

colorAttribute.needsUpdate = true;

}

update() {
Expand Down