Egalware/web3d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Primo codice di prova ( testare funzionalità ).

Browse Source
This commit is contained in:
Riccardo Elitropi
2024-03-27 13:08:46 +01:00
parent 8d1cbef568
commit 0edea24c43
7 changed files with 123 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
TestArea_IIS01/THREEJS_DOORS/Door_models/Door2.3dm
BIN
View File
Binary file not shown.
TestArea_IIS01/THREEJS_DOORS/Door_models/Door3.3dm
BIN
View File
Binary file not shown.
TestArea_IIS01/THREEJS_DOORS/Libs/node_modules/three/examples/jsm/controls/OrbitControls.js
Generated Vendored
+2 -1
View File
@@ -96,7 +96,8 @@ class OrbitControls extends EventDispatcher {
this.keys = { LEFT: 'ArrowLeft', UP: 'ArrowUp', RIGHT: 'ArrowRight', BOTTOM: 'ArrowDown' };
// Mouse buttons
this.mouseButtons = { LEFT: MOUSE.ROTATE, MIDDLE: MOUSE.DOLLY, RIGHT: MOUSE.PAN };
//this.mouseButtons = { LEFT: MOUSE.ROTATE, MIDDLE: MOUSE.DOLLY, RIGHT: MOUSE.PAN };
this.mouseButtons = { MIDDLE: MOUSE.PAN };
// Touch fingers
this.touches = { ONE: TOUCH.ROTATE, TWO: TOUCH.DOLLY_PAN };
TestArea_IIS01/THREEJS_DOORS/StaticRef/cubeControls.js
+13 -7
View File
@@ -36,6 +36,8 @@ export default class ViewCubeControls extends THREE1.EventDispatcher {
this._blue = 0x0275d8 ;
this._vers = null ;
this._rot = null ;
this._last_event_target_x = null ;
this._last_event_target_y = null ;
this._handleMouseMove = this._handleMouseMove.bind( this) ;
this._handleMouseClick = this._handleMouseClick.bind( this) ;
this._listen() ;
@@ -175,6 +177,8 @@ export default class ViewCubeControls extends THREE1.EventDispatcher {
_handleMouseMove( event) {
const x = ( event.offsetX / event.target.clientWidth) * 2 - 1 ;
const y = -( event.offsetY / event.target.clientHeight) * 2 + 1 ;
this._last_event_target_x = x ;
this._last_event_target_y = y ;
this._checkSideOver( x, y) ;
}
@@ -239,8 +243,7 @@ export default class ViewCubeControls extends THREE1.EventDispatcher {
const RotY_mat = new THREE1.Matrix4() ;
RotY_mat.makeRotationY( Math.PI / 2) ;
invRotMat.multiply( RotY_mat) ;
var euler = new THREE1.Euler() ;
euler.setFromRotationMatrix( invRotMat) ;
var euler = new THREE1.Euler().setFromRotationMatrix( invRotMat) ;
this._cube.rotation.set( euler.x, euler.y , euler.z) ;
if ( this._animation) {
@@ -256,7 +259,10 @@ export default class ViewCubeControls extends THREE1.EventDispatcher {
}
else {
this._interp = null ;
}
}
if ( this._last_event_target_x != null && this._last_event_target_y != null)
this._checkSideOver( this._last_event_target_x, this._last_event_target_y) ;
}
_TopBottomRotation( type, orbit){
@@ -274,7 +280,7 @@ export default class ViewCubeControls extends THREE1.EventDispatcher {
function loop() {
const now = performance.now() ;
const delta = now - start ;
const alpha = Math.min( delta/duration, maxAlpha);
const alpha = Math.min( delta / duration, maxAlpha);
if ( type == 1){
if ( theta_i >= -Math.PI / 2 && theta_i <= Math.PI / 2){
theta_tt = theta_t ;
@@ -318,7 +324,7 @@ export default class ViewCubeControls extends THREE1.EventDispatcher {
orbit.rotateLeft( jump) ;
}
}
else{
else {
theta_tt = theta_t ;
if ( theta_i >= 0){
theta_t = theta_i - alpha * ( theta_i - Math.PI / 2) ;
@@ -857,7 +863,7 @@ var BOX_FACES = [
},
{
name: FACES.RIGHT,
map: createTextSprite( "FRONT", { fontSize: 60, font: "Arial Narrow, sans-serif" })
map: createTextSprite( "BACK", { fontSize: 60, font: "Arial Narrow, sans-serif" })
},
{
name: FACES.BACK,
@@ -865,7 +871,7 @@ var BOX_FACES = [
},
{
name: FACES.LEFT,
map: createTextSprite( "BACK", { fontSize: 60, font: "Arial Narrow, sans-serif" })
map: createTextSprite( "FRONT", { fontSize: 60, font: "Arial Narrow, sans-serif" })
},
{
name: FACES.TOP,
TestArea_IIS01/THREEJS_DOORS/StaticRef/refControls.js
+15 -8
View File
@@ -2,25 +2,31 @@ import * as THREE1 from "../Libs/node_modules/three/build/three.module.js";
export function getStaticRef( thick, length) {
// color definition
const RED = 0xd9534f ;
const RED = 0xd9534f ;
const DARK_RED = 0xAE423F ;
const GREEN = 0x5cb85c ;
const DARK_GREEN = 0x4A934A ;
const BLUE = 0x0275d8 ;
const DARK_BLUE = 0x025EAD ;
const BLACK = 0x000000 ;
// cylinder geometry
const axis_geometry = new THREE1.CylinderGeometry( thick, thick, length, 32) ;
const arrow_geometry = new THREE1.CylinderGeometry( 0., 2 * thick, length / 5, 32) ;
// materials
const x_material = new THREE1.MeshBasicMaterial({ color: RED}) ;
const x_darkMaterial = new THREE1.MeshBasicMaterial({ color : DARK_RED}) ;
const y_material = new THREE1.MeshBasicMaterial({ color: GREEN}) ;
const y_darkMaterial = new THREE1.MeshBasicMaterial({ color: DARK_GREEN}) ;
const z_material = new THREE1.MeshBasicMaterial({ color: BLUE}) ;
const z_darkMaterial = new THREE1.MeshBasicMaterial({ color : DARK_BLUE}) ;
// line-meshes
const x_cylinder = new THREE1.Mesh( axis_geometry, x_material) ;
const y_cylinder = new THREE1.Mesh( axis_geometry, y_material) ;
const z_cylinder = new THREE1.Mesh( axis_geometry, z_material) ;
// arrow-meshes
const x_cylinder_arrow = new THREE1.Mesh( arrow_geometry, x_material ) ;
const y_cylinder_arrow = new THREE1.Mesh( arrow_geometry, y_material ) ;
const z_cylinder_arrow = new THREE1.Mesh( arrow_geometry, z_material ) ;
const x_cylinder_arrow = new THREE1.Mesh( arrow_geometry, x_darkMaterial) ;
const y_cylinder_arrow = new THREE1.Mesh( arrow_geometry, y_darkMaterial) ;
const z_cylinder_arrow = new THREE1.Mesh( arrow_geometry, z_darkMaterial) ;
// rotation for axis and arrows
x_cylinder.rotateOnAxis( new THREE1.Vector3( 0., 0., 1.), - Math.PI / 2) ;
y_cylinder.rotateOnAxis( new THREE1.Vector3( 1., 0., 0.), Math.PI / 2) ;
@@ -49,10 +55,11 @@ export function getStaticRef( thick, length) {
return axisGroup ;
}
export function updateRef( ref, controls) {
var invRotMat = new THREE1.Matrix4() ;
invRotMat.extractRotation( controls.object.matrix) ;
export function updateRef( ref, myCamera, controls) {
var invRotMat = new THREE1.Matrix4() ;
invRotMat.extractRotation( controls.object.matrix) ;
invRotMat.invert() ;
var euler = new THREE1.Euler().setFromRotationMatrix( invRotMat) ;
var euler = new THREE1.Euler().setFromRotationMatrix( invRotMat) ;
ref.rotation.set( euler.x, euler.y , euler.z) ;
myCamera.updateMatrix() ;
}
TestArea_IIS01/THREEJS_DOORS/index.html
+88 -33
View File
@@ -28,15 +28,21 @@
<pre>
Camera settings :
Zoom : Wheel-Scroll
Pan : Mouse-Left and Drag ( hold )
Rotate : Mouse-Right and Drag ( hold )
Center : Key-C
Pan : Mouse-Wheel and Drag
Rotate : Key-CTRL + Mouse-Right and Drag
Center : Key-'Space'
Type : Key-O ( orthographic )
Key-P ( perspective )
Toggle Auto-rotation : Key-R
Toggle Show-Dimension : Key-D
Toggle Show-Cube : Key-C
Toggle Show-Frame : Key-F
Toggle Show-Grid : Key-G
</pre>
</div>
</div>
@@ -60,13 +66,18 @@
const FRAME_GROUP_NAME = 'frameGroup' ;
const CAMERA_PERSP = 0 ;
const CAMERA_ORTHO = 1 ;
const DIMENSION_GROUP_NAME = 'dimGroup' ;
const DIMENSION_DISCRIMINANT_NAME = 'dim_' ;
const GENERAL_ENTITY_GROUP_NAME = 'generalGroup' ;
const START_CAMERA_POSITION = ( new THREE.Vector3( -0.3994, 0.6339, 0.66223)).normalize() ;
var SCENE_BACKGROUND_COLOR = new THREE.Color( 0x808080) ;
var CAMERA_TYPE = CAMERA_PERSP ;
var CAMERA_TYPE = CAMERA_ORTHO ;
var SHOW_DIMENSION = true ;
var GRID_MAIN_COLOR = new THREE.Color( 0x000000) ;
var GRID_SECOND_COLOR = new THREE.Color( 0xcccccc) ;
var PATH = 'https://iis01.egalware.com/Test3D/THREEJS_DOORS/Door_models' ;
var FILE_NAME = getUrlParameter('src') ;
var CTRL_DOWN = false ;
// referement global variables ---------
var scene_ref ; var renderer_ref ; var camera_ref ; var group_ref ; var cube_ref ;
@@ -102,6 +113,16 @@
// controls
const controls = new OrbitControls( CAMERA_TYPE == CAMERA_PERSP ? perspCamera : ortoCamera, renderer.domElement) ;
controls.autoRotate = true ;
// entity-groups ( to split entities between dimensions and general's ones )
const dimensionGroup = new THREE.Group() ;
dimensionGroup.name = DIMENSION_GROUP_NAME ;
const general_entity_Group = new THREE.Group() ;
general_entity_Group.name = GENERAL_ENTITY_GROUP_NAME ;
// creating grid and frame ( over it ) Group
const gridGroup = new THREE.Group() ;
const frameGroup = new THREE.Group() ;
// reading .3dm file
readDoor() ;
@@ -113,20 +134,20 @@
controls.update() ;
cube_ref.update( controls) ;
renderer_ref.render( scene_ref, camera_ref) ;
updateRef( frame_ref1, camera_ref1, controls) ;
renderer_ref1.render( scene_ref1, camera_ref1) ;
updateRef( frame_ref1, controls) ;
}
function readDoor() {
const loader = new Rhino3dmLoader() ;
loader.setLibraryPath( './Libs/node_modules/three/examples/jsm/libs/rhino3dm/' ) ;
loader.load( PATH + "/" + FILE_NAME, function( object) {
// passing into threejs frame
//object.rotateX( - Math.PI / 2) ;
// removing shading from colors and adjusting z-fighting with lines
// removing shading from colors and adjusting z-fighting with lines ( organizing groups entities )
for ( let i = 0 ; i < object.children.length ; ++ i)
setOpenGLRenderProperties( object.children[i]) ;
scene.add( object) ;
setOpenGLRenderProperties( object.children[i], dimensionGroup, general_entity_Group) ;
// adding groups to scene
scene.add( dimensionGroup) ;
scene.add( general_entity_Group) ;
// setting Box3d of the door
set3dBox( object) ;
// setting camera position
@@ -144,7 +165,7 @@
}) ;
}
function setOpenGLRenderProperties( object) {
function setOpenGLRenderProperties( object, dimensionGroup, general_entity_Group) {
if ( object.type == 'Mesh') {
object.material.emissive.set( 0x000000) ; // Set emissive color to black
object.material.polygonOffset = true ; // enable polygonOffset
@@ -162,6 +183,11 @@
object.material.opacity = 1 ; // high-level of opacity
object.renderOrder = 1 ; // ordering them on Z-buffer after meshes
}
// classifying between groups
if ( object.name.substring( 0, DIMENSION_DISCRIMINANT_NAME.length) == DIMENSION_DISCRIMINANT_NAME)
dimensionGroup.add( object.clone()) ; // dimension-type object
else
general_entity_Group.add( object.clone()) ; // general-entity-type object
}
function set3dBox( object) {
@@ -175,17 +201,21 @@
function setCameraPosition() {
// maxSize of the box
const maxSize = Math.max( m_size.x, m_size.y, m_size.z) ;
var maxSize = Math.max( m_size.x, m_size.y, m_size.z) ;
const aspectRatio = window.innerWidth / window.innerHeight ;
if ( CAMERA_TYPE == CAMERA_ORTHO) {
const aspectRatio = window.innerWidth / window.innerHeight ;
controls.object.left = - aspectRatio * maxSize ;
controls.object.right = aspectRatio * maxSize ;
controls.object.bottom = - maxSize ;
controls.object.top = maxSize ;
controls.object.zoom = 1.5 ; // 1.25 * maxSize
maxSize *= 5 ;
controls.object.left = - 0.2 * aspectRatio * maxSize ;
controls.object.right = 0.2 * aspectRatio * maxSize ;
controls.object.bottom = - 0.2 * maxSize ;
controls.object.top = 0.2 * maxSize ;
controls.object.zoom = 1.5 ; // 1.25 * maxSize
controls.object.near = - 2 * maxSize ;
controls.object.far = 2 * maxSize ;
maxSize /= 5 ;
}
// position of the camera
const positionVec = m_box.min.clone().add(( new THREE.Vector3( 0, 0.75, 1)).normalize().multiplyScalar( maxSize)) ;
const positionVec = m_box.min.clone().add( START_CAMERA_POSITION.clone().multiplyScalar( maxSize)) ;
const targetVec = m_box.min.clone().add( new THREE.Vector3( 0, 0.5 * m_size.y, 0)) ;
controls.object.position.copy( positionVec) ; // this zoom won't change for ortho, it's just for the position
controls.target.copy( targetVec) ;
@@ -201,8 +231,6 @@
const gridHalf_edge = 1.25 * Math.max( m_size.x, m_size.z) ;
// defining step
const step = gridHalf_edge / 5 ;
// creating grid Group
const gridGroup = new THREE.Group() ;
// creating the grid and adding to the scene
for ( let i = 0 ; i < 11 ; ++ i) {
const x_line = new THREE.Line(
@@ -257,8 +285,6 @@
new THREE.LineBasicMaterial({ color : new THREE.Color( 0x0000ff)})
) ;
// creating the group of the frame and adding it to the scene
const frameGroup = new THREE.Group() ;
frameGroup.add( x_axis) ;
frameGroup.add( y_axis) ;
frameGroup.add( z_axis) ;
@@ -320,7 +346,7 @@
// setting standard camera posizion and lookAt -> made according cube dimension
camera_ref1.position.set( 0, 0, 70) ;
camera_ref1.lookAt( 0, 0, 0) ;
// creatin the cube object and adding it to the scene
// creating the cube object and adding it to the scene
frame_ref1 = getStaticRef( 1, 25) ;
scene_ref1.add( frame_ref1) ;
}
@@ -329,31 +355,61 @@
controls.autoRotate = ( ! controls.autoRotate) ;
}
function toggleDimensionVisibility() {
dimensionGroup.visible = ! dimensionGroup.visible ;
}
function toggleCubeVisibility() {
var cubeContainer = document.getElementById( 'RefRender') ;
if ( cubeContainer.style.display === "none")
cubeContainer.style.display = "block";
else
cubeContainer.style.display = "none";
}
function toggleFrameVisibility() {
var frameContainer = document.getElementById( 'Ref1Render') ;
if ( frameContainer.style.display === "none")
frameContainer.style.display = "block";
else
frameContainer.style.display = "none";
}
function toggleGridVisibility() {
gridGroup.visible = ! gridGroup.visible ;
frameGroup.visible = ! frameGroup.visible ;
}
// Event Listner -------------------------------------------------------------------
// KEY
document.addEventListener( "keypress", function( event) {
if ( event.key === "r")
if ( event.key.toLowerCase() === "r")
ToggleRotation() ;
else if ( event.key === 'p' || event.key === 'P') {
else if ( event.key.toLowerCase() === 'p') {
if ( CAMERA_TYPE == CAMERA_PERSP)
return ;
controls.object = perspCamera.clone() ;
CAMERA_TYPE = CAMERA_PERSP ;
setCameraPosition() ;
}
else if ( event.key === 'o' || event.key === 'O') {
else if ( event.key.toLowerCase() === 'o') {
if ( CAMERA_TYPE == CAMERA_ORTHO)
return ;
controls.object = ortoCamera.clone() ;
CAMERA_TYPE = CAMERA_ORTHO ;
setCameraPosition() ;
setStaticFrame() ;
}
else if ( event.key === 'd' || event.key === 'D')
window.alert( 'manca :(') ;
else if ( event.key === 'c' || event.key === 'C')
else if ( event.key.toLowerCase() === 'd')
toggleDimensionVisibility() ;
else if ( event.key.toLowerCase() === ' ')
setCameraPosition() ;
});
else if ( event.key.toLowerCase() === 'c')
toggleCubeVisibility() ;
else if ( event.key.toLowerCase() === 'f')
toggleFrameVisibility() ;
else if ( event.key.toLowerCase() === 'g')
toggleGridVisibility() ;
}) ;
// Elements
var helpButton = document.getElementById( "helpButton") ;
@@ -375,7 +431,6 @@
// get parameter value by name
return urlParams.get( name) ;
}
</script>
</body>
</html>
TestArea_IIS01/THREEJS_DOORS/style.css
+5 -5
View File
@@ -17,7 +17,7 @@ canvas {
top: 10px ;
right: 10px ;
background-color: transparent ;
width: 250px ;
width: 275px ;
}
.container {
@@ -58,15 +58,15 @@ canvas {
height: 200px ;
bottom: 10px ;
right: 10px ;
border: 1px solid black ;
/*border: 1px solid black ;*/
}
#Ref1Render {
position: fixed ;
width: 200px ;
height: 200px ;
width: 150px ;
height: 150px ;
bottom: 10px ;
left: 10px ;
background-color: transparent ;
border: 1px solid black ;
/*border: 1px solid black ;*/
}