Skip to content

Commit

Permalink
WebXR: Improved dragging, paint and sculpt examples.
Browse files Browse the repository at this point in the history
  • Loading branch information
@mrdoob
mrdoob committed Apr 12, 2023
1 parent 50993b2 commit 3977930
Show file tree
Hide file tree
Showing 6 changed files with 19 additions and 72 deletions.
Binary file modified examples/screenshots/webxr_xr_dragging.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/webxr_xr_paint.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/webxr_xr_sculpt.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 7 additions & 10 deletions examples/webxr_xr_dragging.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,26 +62,23 @@
controls.target.set( 0, 1.6, 0 );
controls.update();

const floorGeometry = new THREE.PlaneGeometry( 4, 4 );
const floorMaterial = new THREE.MeshStandardMaterial( {
color: 0xeeeeee,
roughness: 1.0,
metalness: 0.0
} );
const floorGeometry = new THREE.PlaneGeometry( 6, 6 );
const floorMaterial = new THREE.ShadowMaterial( { opacity: 0.25 } );
const floor = new THREE.Mesh( floorGeometry, floorMaterial );
floor.rotation.x = - Math.PI / 2;
floor.receiveShadow = true;
floor.renderOrder = 2;
scene.add( floor );

scene.add( new THREE.HemisphereLight( 0x808080, 0x606060 ) );

const light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 6, 0 );
light.castShadow = true;
light.shadow.camera.top = 2;
light.shadow.camera.bottom = - 2;
light.shadow.camera.right = 2;
light.shadow.camera.left = - 2;
light.shadow.camera.top = 3;
light.shadow.camera.bottom = - 3;
light.shadow.camera.right = 3;
light.shadow.camera.left = - 3;
light.shadow.mapSize.set( 4096, 4096 );
scene.add( light );

Expand Down
37 changes: 6 additions & 31 deletions examples/webxr_xr_paint.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,29 +57,7 @@
controls.target.set( 0, 1.6, 0 );
controls.update();

const tableGeometry = new THREE.BoxGeometry( 0.5, 0.8, 0.5 );
const tableMaterial = new THREE.MeshStandardMaterial( {
color: 0x444444,
roughness: 1.0,
metalness: 0.0
} );
const table = new THREE.Mesh( tableGeometry, tableMaterial );
table.position.y = 0.35;
table.position.z = 0.85;
scene.add( table );

const floorGometry = new THREE.PlaneGeometry( 4, 4 );
const floorMaterial = new THREE.MeshStandardMaterial( {
color: 0x222222,
roughness: 1.0,
metalness: 0.0
} );
const floor = new THREE.Mesh( floorGometry, floorMaterial );
floor.rotation.x = - Math.PI / 2;
scene.add( floor );

const grid = new THREE.GridHelper( 10, 20, 0x111111, 0x111111 );
// grid.material.depthTest = false; // avoid z-fighting
const grid = new THREE.GridHelper( 4, 1, 0x111111, 0x111111 );
scene.add( grid );

scene.add( new THREE.HemisphereLight( 0x888877, 0x777788 ) );
Expand Down Expand Up @@ -153,18 +131,15 @@

//

const geometry = new THREE.CylinderGeometry( 0.01, 0.02, 0.08, 5 );
geometry.rotateX( - Math.PI / 2 );
const material = new THREE.MeshStandardMaterial( { flatShading: true } );
const mesh = new THREE.Mesh( geometry, material );

const pivot = new THREE.Mesh( new THREE.IcosahedronGeometry( 0.01, 3 ) );
pivot.name = 'pivot';
pivot.position.z = - 0.05;
mesh.add( pivot );

controller1.add( mesh.clone() );
controller2.add( mesh.clone() );
const group = new THREE.Group();
group.add( pivot );

controller1.add( group.clone() );
controller2.add( group.clone() );

//

Expand Down
37 changes: 6 additions & 31 deletions examples/webxr_xr_sculpt.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,29 +59,7 @@
controls.target.set( 0, 1.6, 0 );
controls.update();

const tableGeometry = new THREE.BoxGeometry( 0.5, 0.8, 0.5 );
const tableMaterial = new THREE.MeshStandardMaterial( {
color: 0x444444,
roughness: 1.0,
metalness: 0.0
} );
const table = new THREE.Mesh( tableGeometry, tableMaterial );
table.position.y = 0.35;
table.position.z = 0.85;
scene.add( table );

const floorGometry = new THREE.PlaneGeometry( 4, 4 );
const floorMaterial = new THREE.MeshStandardMaterial( {
color: 0x222222,
roughness: 1.0,
metalness: 0.0
} );
const floor = new THREE.Mesh( floorGometry, floorMaterial );
floor.rotation.x = - Math.PI / 2;
scene.add( floor );

const grid = new THREE.GridHelper( 10, 20, 0x111111, 0x111111 );
// grid.material.depthTest = false; // avoid z-fighting
const grid = new THREE.GridHelper( 4, 1, 0x111111, 0x111111 );
scene.add( grid );

scene.add( new THREE.HemisphereLight( 0x888877, 0x777788 ) );
Expand Down Expand Up @@ -129,18 +107,15 @@

//

const geometry = new THREE.CylinderGeometry( 0.01, 0.02, 0.08, 5 );
geometry.rotateX( - Math.PI / 2 );
const material = new THREE.MeshStandardMaterial( { flatShading: true } );
const mesh = new THREE.Mesh( geometry, material );

const pivot = new THREE.Mesh( new THREE.IcosahedronGeometry( 0.01, 3 ) );
pivot.name = 'pivot';
pivot.position.z = - 0.05;
mesh.add( pivot );

controller1.add( mesh.clone() );
controller2.add( mesh.clone() );
const group = new THREE.Group();
group.add( pivot );

controller1.add( group.clone() );
controller2.add( group.clone() );

//

Expand Down

0 comments on commit 3977930

Please sign in to comment.