Skip to content

T
three.js

Ablesons / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

未验证 提交 0aeb8b53 编写于 作者: M Michael Herzog 提交者： GitHub
浏览文件
操作

ViewHelper: Use class syntax. (#21631)

上级 817fa32d
隐藏空白更改
内联 并排
Showing with 206 addition and 208 deletion
editor/js/Viewport.ViewHelper.js
浏览文件 @ 0aeb8b53
......@@ -2,317 +2,315 @@ import { UIPanel } from './libs/ui.js';
import * as THREE from '../../build/three.module.js';
function ViewHelper( editorCamera, container ) {
class ViewHelper extends THREE.Object3D {
THREE.Object3D.call( this );
constructor( editorCamera, container ) {
this.animating = false;
this.controls = null;
super();
var panel = new UIPanel();
panel.setId( 'viewHelper' );
panel.setPosition( 'absolute' );
panel.setRight( '0px' );
panel.setBottom( '0px' );
panel.setHeight( '128px' );
panel.setWidth( '128px' );
this.animating = false;
this.controls = null;
var scope = this;
const panel = new UIPanel();
panel.setId( 'viewHelper' );
panel.setPosition( 'absolute' );
panel.setRight( '0px' );
panel.setBottom( '0px' );
panel.setHeight( '128px' );
panel.setWidth( '128px' );
panel.dom.addEventListener( 'mouseup', function ( event ) {
const scope = this;
event.stopPropagation();
panel.dom.addEventListener( 'mouseup', function ( event ) {
scope.handleClick( event );
event.stopPropagation();
} );
scope.handleClick( event );
panel.dom.addEventListener( 'mousedown', function ( event ) {
} );
event.stopPropagation();
panel.dom.addEventListener( 'mousedown', function ( event ) {
} );
event.stopPropagation();
container.add( panel );
} );
var color1 = new THREE.Color( '#ff3653' );
var color2 = new THREE.Color( '#8adb00' );
var color3 = new THREE.Color( '#2c8fff' );
container.add( panel );
var interactiveObjects = [];
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var dummy = new THREE.Object3D();
const color1 = new THREE.Color( '#ff3653' );
const color2 = new THREE.Color( '#8adb00' );
const color3 = new THREE.Color( '#2c8fff' );
var camera = new THREE.OrthographicCamera( - 2, 2, 2, - 2, 0, 4 );
camera.position.set( 0, 0, 2 );
const interactiveObjects = [];
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
const dummy = new THREE.Object3D();
var geometry = new THREE.BoxGeometry( 0.8, 0.05, 0.05 ).translate( 0.4, 0, 0 );
const camera = new THREE.OrthographicCamera( - 2, 2, 2, - 2, 0, 4 );
camera.position.set( 0, 0, 2 );
var xAxis = new THREE.Mesh( geometry, getAxisMaterial( color1 ) );
var yAxis = new THREE.Mesh( geometry, getAxisMaterial( color2 ) );
var zAxis = new THREE.Mesh( geometry, getAxisMaterial( color3 ) );
const geometry = new THREE.BoxGeometry( 0.8, 0.05, 0.05 ).translate( 0.4, 0, 0 );
yAxis.rotation.z = Math.PI / 2;
zAxis.rotation.y = - Math.PI / 2;
const xAxis = new THREE.Mesh( geometry, getAxisMaterial( color1 ) );
const yAxis = new THREE.Mesh( geometry, getAxisMaterial( color2 ) );
const zAxis = new THREE.Mesh( geometry, getAxisMaterial( color3 ) );
this.add( xAxis );
this.add( zAxis );
this.add( yAxis );
yAxis.rotation.z = Math.PI / 2;
zAxis.rotation.y = - Math.PI / 2;
var posXAxisHelper = new THREE.Sprite( getSpriteMaterial( color1, 'X' ) );
posXAxisHelper.userData.type = 'posX';
var posYAxisHelper = new THREE.Sprite( getSpriteMaterial( color2, 'Y' ) );
posYAxisHelper.userData.type = 'posY';
var posZAxisHelper = new THREE.Sprite( getSpriteMaterial( color3, 'Z' ) );
posZAxisHelper.userData.type = 'posZ';
var negXAxisHelper = new THREE.Sprite( getSpriteMaterial( color1 ) );
negXAxisHelper.userData.type = 'negX';
var negYAxisHelper = new THREE.Sprite( getSpriteMaterial( color2 ) );
negYAxisHelper.userData.type = 'negY';
var negZAxisHelper = new THREE.Sprite( getSpriteMaterial( color3 ) );
negZAxisHelper.userData.type = 'negZ';
this.add( xAxis );
this.add( zAxis );
this.add( yAxis );
posXAxisHelper.position.x = 1;
posYAxisHelper.position.y = 1;
posZAxisHelper.position.z = 1;
negXAxisHelper.position.x = - 1;
negXAxisHelper.scale.setScalar( 0.8 );
negYAxisHelper.position.y = - 1;
negYAxisHelper.scale.setScalar( 0.8 );
negZAxisHelper.position.z = - 1;
negZAxisHelper.scale.setScalar( 0.8 );
const posXAxisHelper = new THREE.Sprite( getSpriteMaterial( color1, 'X' ) );
posXAxisHelper.userData.type = 'posX';
const posYAxisHelper = new THREE.Sprite( getSpriteMaterial( color2, 'Y' ) );
posYAxisHelper.userData.type = 'posY';
const posZAxisHelper = new THREE.Sprite( getSpriteMaterial( color3, 'Z' ) );
posZAxisHelper.userData.type = 'posZ';
const negXAxisHelper = new THREE.Sprite( getSpriteMaterial( color1 ) );
negXAxisHelper.userData.type = 'negX';
const negYAxisHelper = new THREE.Sprite( getSpriteMaterial( color2 ) );
negYAxisHelper.userData.type = 'negY';
const negZAxisHelper = new THREE.Sprite( getSpriteMaterial( color3 ) );
negZAxisHelper.userData.type = 'negZ';
this.add( posXAxisHelper );
this.add( posYAxisHelper );
this.add( posZAxisHelper );
this.add( negXAxisHelper );
this.add( negYAxisHelper );
this.add( negZAxisHelper );
posXAxisHelper.position.x = 1;
posYAxisHelper.position.y = 1;
posZAxisHelper.position.z = 1;
negXAxisHelper.position.x = - 1;
negXAxisHelper.scale.setScalar( 0.8 );
negYAxisHelper.position.y = - 1;
negYAxisHelper.scale.setScalar( 0.8 );
negZAxisHelper.position.z = - 1;
negZAxisHelper.scale.setScalar( 0.8 );
interactiveObjects.push( posXAxisHelper );
interactiveObjects.push( posYAxisHelper );
interactiveObjects.push( posZAxisHelper );
interactiveObjects.push( negXAxisHelper );
interactiveObjects.push( negYAxisHelper );
interactiveObjects.push( negZAxisHelper );
this.add( posXAxisHelper );
this.add( posYAxisHelper );
this.add( posZAxisHelper );
this.add( negXAxisHelper );
this.add( negYAxisHelper );
this.add( negZAxisHelper );
var point = new THREE.Vector3();
var dim = 128;
var turnRate = 2 * Math.PI; // turn rate in angles per second
interactiveObjects.push( posXAxisHelper );
interactiveObjects.push( posYAxisHelper );
interactiveObjects.push( posZAxisHelper );
interactiveObjects.push( negXAxisHelper );
interactiveObjects.push( negYAxisHelper );
interactiveObjects.push( negZAxisHelper );
this.render = function ( renderer ) {
const point = new THREE.Vector3();
const dim = 128;
const turnRate = 2 * Math.PI; // turn rate in angles per second
this.quaternion.copy( editorCamera.quaternion ).invert();
this.updateMatrixWorld();
this.render = function ( renderer ) {
point.set( 0, 0, 1 );
point.applyQuaternion( editorCamera.quaternion );
this.quaternion.copy( editorCamera.quaternion ).invert();
this.updateMatrixWorld();
if ( point.x >= 0 ) {
point.set( 0, 0, 1 );
point.applyQuaternion( editorCamera.quaternion );
posXAxisHelper.material.opacity = 1;
negXAxisHelper.material.opacity = 0.5;
if ( point.x >= 0 ) {
} else {
posXAxisHelper.material.opacity = 1;
negXAxisHelper.material.opacity = 0.5;
posXAxisHelper.material.opacity = 0.5;
negXAxisHelper.material.opacity = 1;
} else {
}
posXAxisHelper.material.opacity = 0.5;
negXAxisHelper.material.opacity = 1;
if ( point.y >= 0 ) {
}
posYAxisHelper.material.opacity = 1;
negYAxisHelper.material.opacity = 0.5;
if ( point.y >= 0 ) {
} else {
posYAxisHelper.material.opacity = 1;
negYAxisHelper.material.opacity = 0.5;
posYAxisHelper.material.opacity = 0.5;
negYAxisHelper.material.opacity = 1;
} else {
}
posYAxisHelper.material.opacity = 0.5;
negYAxisHelper.material.opacity = 1;
if ( point.z >= 0 ) {
}
posZAxisHelper.material.opacity = 1;
negZAxisHelper.material.opacity = 0.5;
if ( point.z >= 0 ) {
} else {
posZAxisHelper.material.opacity = 1;
negZAxisHelper.material.opacity = 0.5;
posZAxisHelper.material.opacity = 0.5;
negZAxisHelper.material.opacity = 1;
} else {
}
posZAxisHelper.material.opacity = 0.5;
negZAxisHelper.material.opacity = 1;
//
}
var x = container.dom.offsetWidth - dim;
//
renderer.clearDepth();
renderer.setViewport( x, 0, dim, dim );
renderer.render( this, camera );
const x = container.dom.offsetWidth - dim;
};
renderer.clearDepth();
renderer.setViewport( x, 0, dim, dim );
renderer.render( this, camera );
var targetPosition = new THREE.Vector3();
var targetQuaternion = new THREE.Quaternion();
};
var q1 = new THREE.Quaternion();
var q2 = new THREE.Quaternion();
var radius = 0;
const targetPosition = new THREE.Vector3();
const targetQuaternion = new THREE.Quaternion();
this.handleClick = function ( event ) {
const q1 = new THREE.Quaternion();
const q2 = new THREE.Quaternion();
let radius = 0;
if ( this.animating === true ) return false;
this.handleClick = function ( event ) {
var rect = container.dom.getBoundingClientRect();
var offsetX = rect.left + ( container.dom.offsetWidth - dim );
var offsetY = rect.top + ( container.dom.offsetHeight - dim );
mouse.x = ( ( event.clientX - offsetX ) / ( rect.width - offsetX ) ) * 2 - 1;
mouse.y = - ( ( event.clientY - offsetY ) / ( rect.bottom - offsetY ) ) * 2 + 1;
if ( this.animating === true ) return false;
raycaster.setFromCamera( mouse, camera );
const rect = container.dom.getBoundingClientRect();
const offsetX = rect.left + ( container.dom.offsetWidth - dim );
const offsetY = rect.top + ( container.dom.offsetHeight - dim );
mouse.x = ( ( event.clientX - offsetX ) / ( rect.width - offsetX ) ) * 2 - 1;
mouse.y = - ( ( event.clientY - offsetY ) / ( rect.bottom - offsetY ) ) * 2 + 1;
var intersects = raycaster.intersectObjects( interactiveObjects );
raycaster.setFromCamera( mouse, camera );
if ( intersects.length > 0 ) {
const intersects = raycaster.intersectObjects( interactiveObjects );
var intersection = intersects[ 0 ];
var object = intersection.object;
if ( intersects.length > 0 ) {
prepareAnimationData( object, this.controls.center );
const intersection = intersects[ 0 ];
const object = intersection.object;
this.animating = true;
prepareAnimationData( object, this.controls.center );
return true;
this.animating = true;
} else {
return true;
return false;
} else {
}
return false;
};
}
this.update = function ( delta ) {
};
var step = delta * turnRate;
var focusPoint = this.controls.center;
this.update = function ( delta ) {
// animate position by doing a slerp and then scaling the position on the unit sphere
const step = delta * turnRate;
const focusPoint = this.controls.center;
q1.rotateTowards( q2, step );
editorCamera.position.set( 0, 0, 1 ).applyQuaternion( q1 ).multiplyScalar( radius ).add( focusPoint );
// animate position by doing a slerp and then scaling the position on the unit sphere
// animate orientation
q1.rotateTowards( q2, step );
editorCamera.position.set( 0, 0, 1 ).applyQuaternion( q1 ).multiplyScalar( radius ).add( focusPoint );
editorCamera.quaternion.rotateTowards( targetQuaternion, step );
// animate orientation
if ( q1.angleTo( q2 ) === 0 ) {
editorCamera.quaternion.rotateTowards( targetQuaternion, step );
this.animating = false;
if ( q1.angleTo( q2 ) === 0 ) {
}
this.animating = false;
};
}
function prepareAnimationData( object, focusPoint ) {
};
switch ( object.userData.type ) {
function prepareAnimationData( object, focusPoint ) {
case 'posX':
targetPosition.set( 1, 0, 0 );
targetQuaternion.setFromEuler( new THREE.Euler( 0, Math.PI * 0.5, 0 ) );
break;
switch ( object.userData.type ) {
case 'posY':
targetPosition.set( 0, 1, 0 );
targetQuaternion.setFromEuler( new THREE.Euler( - Math.PI * 0.5, 0, 0 ) );
break;
case 'posX':
targetPosition.set( 1, 0, 0 );
targetQuaternion.setFromEuler( new THREE.Euler( 0, Math.PI * 0.5, 0 ) );
break;
case 'posZ':
targetPosition.set( 0, 0, 1 );
targetQuaternion.setFromEuler( new THREE.Euler() );
break;
case 'posY':
targetPosition.set( 0, 1, 0 );
targetQuaternion.setFromEuler( new THREE.Euler( - Math.PI * 0.5, 0, 0 ) );
break;
case 'negX':
targetPosition.set( - 1, 0, 0 );
targetQuaternion.setFromEuler( new THREE.Euler( 0, - Math.PI * 0.5, 0 ) );
break;
case 'posZ':
targetPosition.set( 0, 0, 1 );
targetQuaternion.setFromEuler( new THREE.Euler() );
break;
case 'negY':
targetPosition.set( 0, - 1, 0 );
targetQuaternion.setFromEuler( new THREE.Euler( Math.PI * 0.5, 0, 0 ) );
break;
case 'negX':
targetPosition.set( - 1, 0, 0 );
targetQuaternion.setFromEuler( new THREE.Euler( 0, - Math.PI * 0.5, 0 ) );
break;
case 'negZ':
targetPosition.set( 0, 0, - 1 );
targetQuaternion.setFromEuler( new THREE.Euler( 0, Math.PI, 0 ) );
break;
case 'negY':
targetPosition.set( 0, - 1, 0 );
targetQuaternion.setFromEuler( new THREE.Euler( Math.PI * 0.5, 0, 0 ) );
break;
default:
console.error( 'ViewHelper: Invalid axis.' );
case 'negZ':
targetPosition.set( 0, 0, - 1 );
targetQuaternion.setFromEuler( new THREE.Euler( 0, Math.PI, 0 ) );
break;
}
default:
console.error( 'ViewHelper: Invalid axis.' );
//
}
radius = editorCamera.position.distanceTo( focusPoint );
targetPosition.multiplyScalar( radius ).add( focusPoint );
//
dummy.position.copy( focusPoint );
radius = editorCamera.position.distanceTo( focusPoint );
targetPosition.multiplyScalar( radius ).add( focusPoint );
dummy.lookAt( editorCamera.position );
q1.copy( dummy.quaternion );
dummy.position.copy( focusPoint );
dummy.lookAt( targetPosition );
q2.copy( dummy.quaternion );
dummy.lookAt( editorCamera.position );
q1.copy( dummy.quaternion );
}
dummy.lookAt( targetPosition );
q2.copy( dummy.quaternion );
function getAxisMaterial( color ) {
}
return new THREE.MeshBasicMaterial( { color: color, toneMapped: false } );
function getAxisMaterial( color ) {
}
return new THREE.MeshBasicMaterial( { color: color, toneMapped: false } );
function getSpriteMaterial( color, text = null ) {
var canvas = document.createElement( 'canvas' );
canvas.width = 64;
canvas.height = 64;
}
var context = canvas.getContext( '2d' );
context.beginPath();
context.arc( 32, 32, 16, 0, 2 * Math.PI );
context.closePath();
context.fillStyle = color.getStyle();
context.fill();
function getSpriteMaterial( color, text = null ) {
if ( text !== null ) {
const canvas = document.createElement( 'canvas' );
canvas.width = 64;
canvas.height = 64;
context.font = '24px Arial';
context.textAlign = 'center';
context.fillStyle = '#000000';
context.fillText( text, 32, 41 );
const context = canvas.getContext( '2d' );
context.beginPath();
context.arc( 32, 32, 16, 0, 2 * Math.PI );
context.closePath();
context.fillStyle = color.getStyle();
context.fill();
}
if ( text !== null ) {
var texture = new THREE.CanvasTexture( canvas );
context.font = '24px Arial';
context.textAlign = 'center';
context.fillStyle = '#000000';
context.fillText( text, 32, 41 );
return new THREE.SpriteMaterial( { map: texture, toneMapped: false } );
}
}
const texture = new THREE.CanvasTexture( canvas );
}
return new THREE.SpriteMaterial( { map: texture, toneMapped: false } );
ViewHelper.prototype = Object.assign( Object.create( THREE.Object3D.prototype ), {
}
constructor: ViewHelper,
}
isViewHelper: true
}
} );
ViewHelper.prototype.isViewHelper = true;
export { ViewHelper };
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或