|
|
@@ -1,7 +1,7 @@
|
|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
- <title>three.js webvr - htc vive</title>
|
|
|
+ <title>three.js webvr - htc vive - dragging</title>
|
|
|
<meta charset="utf-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
|
|
<style>
|
|
|
@@ -46,7 +46,7 @@
|
|
|
var raycaster, intersected = [];
|
|
|
var tempMatrix = new THREE.Matrix4();
|
|
|
|
|
|
- var room, group;
|
|
|
+ var group;
|
|
|
|
|
|
init();
|
|
|
animate();
|
|
|
@@ -65,48 +65,68 @@
|
|
|
container.appendChild( info );
|
|
|
|
|
|
scene = new THREE.Scene();
|
|
|
+ scene.background = new THREE.Color( 0x808080 );
|
|
|
|
|
|
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 10 );
|
|
|
scene.add( camera );
|
|
|
|
|
|
- room = new THREE.Mesh(
|
|
|
- new THREE.BoxGeometry( 6, 6, 6, 8, 8, 8 ),
|
|
|
- new THREE.MeshBasicMaterial( { color: 0x404040, wireframe: true } )
|
|
|
- );
|
|
|
- room.position.y = 3;
|
|
|
- scene.add( room );
|
|
|
+ var geometry = new THREE.PlaneGeometry( 4, 4 );
|
|
|
+ var material = new THREE.MeshStandardMaterial( {
|
|
|
+ color: 0xeeeeee,
|
|
|
+ roughness: 1.0,
|
|
|
+ metalness: 0.0
|
|
|
+ } );
|
|
|
+ var floor = new THREE.Mesh( geometry, material );
|
|
|
+ floor.rotation.x = - Math.PI / 2;
|
|
|
+ floor.receiveShadow = true;
|
|
|
+ scene.add( floor );
|
|
|
|
|
|
- scene.add( new THREE.HemisphereLight( 0x606060, 0x404040 ) );
|
|
|
+ scene.add( new THREE.HemisphereLight( 0x808080, 0x606060 ) );
|
|
|
|
|
|
var light = new THREE.DirectionalLight( 0xffffff );
|
|
|
- light.position.set( 1, 1, 1 ).normalize();
|
|
|
+ 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.mapSize.set( 4096, 4096 );
|
|
|
scene.add( light );
|
|
|
|
|
|
group = new THREE.Group();
|
|
|
scene.add( group );
|
|
|
|
|
|
- var geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
|
|
|
+ var geometries = [
|
|
|
+ new THREE.BoxGeometry( 0.2, 0.2, 0.2 ),
|
|
|
+ new THREE.ConeGeometry( 0.2, 0.2, 64 ),
|
|
|
+ new THREE.CylinderGeometry( 0.2, 0.2, 0.2, 64 ),
|
|
|
+ new THREE.IcosahedronGeometry( 0.2, 3 ),
|
|
|
+ new THREE.TorusGeometry( 0.2, 0.04, 64, 32 )
|
|
|
+ ];
|
|
|
+
|
|
|
+ for ( var i = 0; i < 50; i ++ ) {
|
|
|
|
|
|
- for ( var i = 0; i < 200; i ++ ) {
|
|
|
+ var geometry = geometries[ Math.floor( Math.random() * geometries.length ) ];
|
|
|
+ var material = new THREE.MeshStandardMaterial( {
|
|
|
+ color: Math.random() * 0xffffff,
|
|
|
+ roughness: 0.7,
|
|
|
+ metalness: 0.0
|
|
|
+ } );
|
|
|
|
|
|
- var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
|
|
|
+ var object = new THREE.Mesh( geometry, material );
|
|
|
|
|
|
object.position.x = Math.random() * 4 - 2;
|
|
|
- object.position.y = Math.random() * 6;
|
|
|
+ object.position.y = Math.random() * 2;
|
|
|
object.position.z = Math.random() * 4 - 2;
|
|
|
|
|
|
object.rotation.x = Math.random() * 2 * Math.PI;
|
|
|
object.rotation.y = Math.random() * 2 * Math.PI;
|
|
|
object.rotation.z = Math.random() * 2 * Math.PI;
|
|
|
|
|
|
- object.scale.x = Math.random() + 0.5;
|
|
|
- object.scale.y = Math.random() + 0.5;
|
|
|
- object.scale.z = Math.random() + 0.5;
|
|
|
+ object.scale.setScalar( Math.random() + 0.5 );
|
|
|
|
|
|
- object.userData.velocity = new THREE.Vector3();
|
|
|
- object.userData.velocity.x = Math.random() * 0.01 - 0.005;
|
|
|
- object.userData.velocity.y = Math.random() * 0.01 - 0.005;
|
|
|
- object.userData.velocity.z = Math.random() * 0.01 - 0.005;
|
|
|
+ object.castShadow = true;
|
|
|
+ object.receiveShadow = true;
|
|
|
|
|
|
group.add( object );
|
|
|
|
|
|
@@ -115,10 +135,11 @@
|
|
|
//
|
|
|
|
|
|
renderer = new THREE.WebGLRenderer( { antialias: true } );
|
|
|
- renderer.setClearColor( 0x505050 );
|
|
|
renderer.setPixelRatio( window.devicePixelRatio );
|
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
- renderer.sortObjects = false;
|
|
|
+ renderer.shadowMap.enabled = true;
|
|
|
+ renderer.gammaInput = true;
|
|
|
+ renderer.gammaOutput = true;
|
|
|
container.appendChild( renderer.domElement );
|
|
|
|
|
|
controls = new THREE.VRControls( camera );
|
|
|
@@ -158,8 +179,11 @@
|
|
|
|
|
|
var geometry = new THREE.Geometry();
|
|
|
geometry.vertices.push( new THREE.Vector3( 0, 0, 0 ) );
|
|
|
- geometry.vertices.push( new THREE.Vector3( 0, 0, - 5 ) );
|
|
|
+ geometry.vertices.push( new THREE.Vector3( 0, 0, - 1 ) );
|
|
|
+
|
|
|
var line = new THREE.Line( geometry );
|
|
|
+ line.name = 'line';
|
|
|
+ line.scale.z = 5;
|
|
|
|
|
|
controller1.add( line.clone() );
|
|
|
controller2.add( line.clone() );
|
|
|
@@ -207,6 +231,7 @@
|
|
|
var object = intersection.object;
|
|
|
object.matrix.premultiply( tempMatrix );
|
|
|
object.matrix.decompose( object.position, object.quaternion, object.scale );
|
|
|
+ object.material.emissive.b = 1;
|
|
|
controller.add( object );
|
|
|
|
|
|
controller.userData.selected = object;
|
|
|
@@ -222,9 +247,9 @@
|
|
|
if ( controller.userData.selected !== undefined ) {
|
|
|
|
|
|
var object = controller.userData.selected;
|
|
|
-
|
|
|
object.matrix.premultiply( controller.matrixWorld );
|
|
|
object.matrix.decompose( object.position, object.quaternion, object.scale );
|
|
|
+ object.material.emissive.b = 0;
|
|
|
group.add( object );
|
|
|
|
|
|
controller.userData.selected = undefined;
|
|
|
@@ -251,13 +276,22 @@
|
|
|
|
|
|
if ( controller.userData.selected !== undefined ) return;
|
|
|
|
|
|
+ var line = controller.getObjectByName( 'line' );
|
|
|
var intersections = getIntersections( controller );
|
|
|
|
|
|
if ( intersections.length > 0 ) {
|
|
|
|
|
|
var intersection = intersections[ 0 ];
|
|
|
- intersection.object.material.emissive.r = 1;
|
|
|
- intersected.push( intersection.object );
|
|
|
+
|
|
|
+ var object = intersection.object;
|
|
|
+ object.material.emissive.r = 1;
|
|
|
+ intersected.push( object );
|
|
|
+
|
|
|
+ line.scale.z = intersection.distance;
|
|
|
+
|
|
|
+ } else {
|
|
|
+
|
|
|
+ line.scale.z = 5;
|
|
|
|
|
|
}
|
|
|
|
Mr.doob