Skip to content

Instantly share code, notes, and snippets.

@shakdwipeea

shakdwipeea/3.js

Created November 21, 2019 15:29
Show Gist options
  • Save shakdwipeea/9665d9f54b0133e1610776b1132197c7 to your computer and use it in GitHub Desktop.
Save shakdwipeea/9665d9f54b0133e1610776b1132197c7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
3.js
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - lights - hemisphere light</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="main.css">
<style>
body {
color: #444;
}
a {
color: #08f;
}
#blocker {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
}
#instructions {
width: 100%;
height: 100%;
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
color: #ffffff;
text-align: center;
font-family: Arial;
font-size: 14px;
line-height: 24px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="blocker">
<div id="instructions">
<span style="font-size:36px">Click to play</span>
<br /><br />
Move: WASD<br/>
Jump: SPACE<br/>
Look: MOUSE
</div>
</div>
<script type="x-shader/x-vertex" id="vertexShader">
varying vec3 vWorldPosition;
void main() {
vec4 worldPosition = modelMatrix * vec4( position, 1.0 );
vWorldPosition = worldPosition.xyz;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>
<script type="x-shader/x-fragment" id="fragmentShader">
uniform vec3 topColor;
uniform vec3 bottomColor;
uniform float offset;
uniform float exponent;
varying vec3 vWorldPosition;
void main() {
float h = normalize( vWorldPosition + offset ).y;
gl_FragColor = vec4( mix( bottomColor, topColor, max( pow( max( h , 0.0), exponent ), 0.0 ) ), 1.0 );
}
</script>
<script type="module">
import * as THREE from '../build/three.module.js';
import Stats from './jsm/libs/stats.module.js';
import { PointerLockControls } from './jsm/controls/PointerLockControls.js'
import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
var camera, scene, renderer, dirLight, dirLightHeper, hemiLight, hemiLightHelper, controls, projector;
var mixers = [];
var targetList = [];
var mouse = new THREE.Vector2();
var stats;
var raycaster = new THREE.Raycaster();
var clock = new THREE.Clock();
var moveForward = false;
var moveBackward = false;
var moveLeft = false;
var moveRight = false;
var canJump = false;
var prevTime = performance.now();
var velocity = new THREE.Vector3();
var direction = new THREE.Vector3();
var vertex = new THREE.Vector3();
var color = new THREE.Color();
init();
animate();
function init() {
// var container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 80, window.innerWidth / window.innerHeight, 1, 5000 );
camera.position.set( 0, 35, 250 );
scene = new THREE.Scene();
scene.background = new THREE.Color().setHSL( 0.6, 0, 1 );
scene.fog = new THREE.Fog( scene.background, 1, 5000 );
controls = new PointerLockControls(camera, document.body);
var blocker = document.getElementById( 'blocker' );
var instructions = document.getElementById( 'instructions' );
instructions.addEventListener( 'click', function () {
controls.lock();
}, false );
controls.addEventListener( 'lock', function () {
instructions.style.display = 'none';
blocker.style.display = 'none';
} );
controls.addEventListener( 'unlock', function () {
blocker.style.display = 'block';
instructions.style.display = '';
} );
scene.add(controls.getObject());
var onKeyDown = function ( event ) {
switch ( event.keyCode ) {
case 38: // up
case 87: // w
moveForward = true;
break;
case 37: // left
case 65: // a
moveLeft = true;
break;
case 40: // down
case 83: // s
moveBackward = true;
break;
case 39: // right
case 68: // d
moveRight = true;
break;
case 32: // space
if ( canJump === true ) velocity.y += 350;
canJump = false;
break;
}
};
var onKeyUp = function ( event ) {
switch ( event.keyCode ) {
case 38: // up
case 87: // w
moveForward = false;
break;
case 37: // left
case 65: // a
moveLeft = false;
break;
case 40: // down
case 83: // s
moveBackward = false;
break;
case 39: // right
case 68: // d
moveRight = false;
break;
}
};
document.addEventListener( 'keydown', onKeyDown, false );
document.addEventListener( 'keyup', onKeyUp, false );
// LIGHTS
hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 0.6 );
hemiLight.color.setHSL( 0.6, 1, 0.6 );
hemiLight.groundColor.setHSL( 0.095, 1, 0.75 );
hemiLight.position.set( 0, 50, 0 );
scene.add( hemiLight );
hemiLightHelper = new THREE.HemisphereLightHelper( hemiLight, 10 );
scene.add( hemiLightHelper );
//
dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
dirLight.color.setHSL( 0.1, 1, 0.95 );
dirLight.position.set( - 1, 1.75, 1 );
dirLight.position.multiplyScalar( 30 );
scene.add( dirLight );
dirLight.castShadow = true;
dirLight.shadow.mapSize.width = 2048;
dirLight.shadow.mapSize.height = 2048;
var d = 50;
dirLight.shadow.camera.left = - d;
dirLight.shadow.camera.right = d;
dirLight.shadow.camera.top = d;
dirLight.shadow.camera.bottom = - d;
dirLight.shadow.camera.far = 3500;
dirLight.shadow.bias = - 0.0001;
dirLightHeper = new THREE.DirectionalLightHelper( dirLight, 10 );
scene.add( dirLightHeper );
// GROUND
var groundGeo = new THREE.PlaneBufferGeometry( 10000, 10000 );
var groundMat = new THREE.MeshLambertMaterial( { color: 0xffffff } );
groundMat.color.setHSL( 0.095, 1, 0.75 );
var ground = new THREE.Mesh( groundGeo, groundMat );
ground.position.y = - 33;
ground.rotation.x = - Math.PI / 2;
ground.receiveShadow = true;
scene.add( ground );
// SKYDOME
var vertexShader = document.getElementById( 'vertexShader' ).textContent;
var fragmentShader = document.getElementById( 'fragmentShader' ).textContent;
var uniforms = {
"topColor": { value: new THREE.Color( 0x0077ff ) },
"bottomColor": { value: new THREE.Color( 0xffffff ) },
"offset": { value: 33 },
"exponent": { value: 0.6 }
};
uniforms[ "topColor" ].value.copy( hemiLight.color );
scene.fog.color.copy( uniforms[ "bottomColor" ].value );
var skyGeo = new THREE.SphereBufferGeometry( 4000, 32, 15 );
var skyMat = new THREE.ShaderMaterial( {
uniforms: uniforms,
vertexShader: vertexShader,
fragmentShader: fragmentShader,
side: THREE.BackSide
} );
var sky = new THREE.Mesh( skyGeo, skyMat );
scene.add( sky );
// MODEL
var loader = new GLTFLoader();
loader.load( 'models/gltf/untitled.glb', function ( gltf ) {
var mesh = gltf.scene;
console.log(mesh);
var submesh = mesh.children
.filter(o => o.type == "Group")
.flatMap(o => o.children)
.filter(o => o.isMesh);
function chunk (inputArray, perChunk) {
return inputArray.reduce((resultArray, item, index) => {
const chunkIndex = Math.floor(index/perChunk)
if(!resultArray[chunkIndex]) {
resultArray[chunkIndex] = [] // start a new chunk
}
resultArray[chunkIndex].push(item)
return resultArray
}, [])
}
var ts = submesh.map (cs => {
var g = new THREE.Group();
g.add(cs);
return g;
});
console.log("ts", ts);
Array.prototype.push.apply(targetList, ts);
submesh
.map(m => {
var color = new THREE.Color( 0xffffff );
color.setHex( Math.random() * 0xffffff );
m.material = new THREE.MeshStandardMaterial({color: color});
m.scale.set(50, 50, 50);
m.position.y = -15;
});
var s = 10;
mesh.scale.set( s, s, s );
mesh.position.y = -15;
// mesh.rotation.y = - 1;
mesh.castShadow = true;
mesh.receiveShadow = true;
console.log("Mesh loaded ", mesh, ts);
ts.map(m => scene.add( m));
// var mixer = new THREE.AnimationMixer( mesh );
// mixer.clipAction( gltf.animations[ 0 ] ).setDuration( 1 ).play();
// mixers.push( mixer );
} );
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
renderer.gammaInput = true;
renderer.gammaOutput = true;
renderer.shadowMap.enabled = true;
// STATS
stats = new Stats();
// container.appendChild( stats.dom );
//
document.addEventListener('mousedown', onMouseDown, false);
document.addEventListener('mousemove' , function (e) {
// calculate mouse position in normalized device coordinates
// (-1 to +1) for both components
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}, false);
window.addEventListener( 'resize', onWindowResize, false );
// var hemisphereButton = document.getElementById( 'hemisphereButton' );
// hemisphereButton.addEventListener( 'click', function () {
// hemiLight.visible = ! hemiLight.visible;
// hemiLightHelper.visible = ! hemiLightHelper.visible;
// } );
// var directionalButton = document.getElementById( 'directionalButton' );
// directionalButton.addEventListener( 'click', function () {
// dirLight.visible = ! dirLight.visible;
// dirLightHeper.visible = ! dirLightHeper.visible;
// } );
}
function onMouseDown(event) {
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
//
function animate() {
requestAnimationFrame( animate );
if ( controls.isLocked === true ) {
// raycaster.ray.origin.copy( controls.getObject().position );
// raycaster.ray.origin.y -= 10;
// var intersections = raycaster.intersectObjects( objects );
// var onObject = intersections.length > 0;
raycaster.setFromCamera(mouse, camera);
// create an array containing all objects in the scene with which the ray intersects
var intersects = raycaster.intersectObjects(scene.children);
console.log("intersections", intersects);
for ( var i = 0; i < intersects.length; i++ ) {
console.log(intersects[i].object);
// intersects[ i ].object.material = new THREE.MeshStandardMaterial({color: 0x000000});
// intersects[ i ].object.geometry.uvsNeedUpdate = true;
// intersects[ i ].object.geometry.buffersNeedUpdate = true;
// intersects[ i ].object.needsUpdate = true;
}
var time = performance.now();
var delta = ( time - prevTime ) / 1000;
velocity.x -= velocity.x * 10.0 * delta;
velocity.z -= velocity.z * 10.0 * delta;
velocity.y -= 9.8 * 100.0 * delta; // 100.0 = mass
direction.z = Number( moveForward ) - Number( moveBackward );
direction.x = Number( moveRight ) - Number( moveLeft );
direction.normalize(); // this ensures consistent movements in all directions
if ( moveForward || moveBackward ) velocity.z -= direction.z * 1000.0 * delta;
if ( moveLeft || moveRight ) velocity.x -= direction.x * 1000.0 * delta;
// if ( onObject === true ) {
// velocity.y = Math.max( 0, velocity.y );
// canJump = true;
// }
controls.moveRight( - velocity.x * delta );
controls.moveForward( - velocity.z * delta );
// controls.getObject().position.y += ( velocity.y * delta );
// new behavior
// if ( controls.getObject().position.y < 10 ) {
// velocity.y = 0;
// controls.getObject().position.y = 10;
// canJump = true;
// }
prevTime = time;
}
renderer.render( scene, camera );
// render();
stats.update();
}
function render() {
// var delta = clock.getDelta();
// for ( var i = 0; i < mixers.length; i ++ ) {
// mixers[ i ].update( delta );
// }
// renderer.render( scene, camera );
}
</script>
</body>
</html>
@rag594
Copy link

rag594 commented Nov 21, 2019 

<html lang="en">
  <head>
    <title>three.js webgl - lights - hemisphere light</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link type="text/css" rel="stylesheet" href="main.css">
    <style>
      body {
	  color: #444;
      }
      a {
	  color: #08f;
      }
      #blocker {
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  background-color: rgba(0,0,0,0.5);
      }

      #instructions {
	  width: 100%;
	  height: 100%;

	  display: -webkit-box;
	  display: -moz-box;
	  display: box;

	  -webkit-box-orient: horizontal;
	  -moz-box-orient: horizontal;
	  box-orient: horizontal;

	  -webkit-box-pack: center;
	  -moz-box-pack: center;
	  box-pack: center;

	  -webkit-box-align: center;
	  -moz-box-align: center;
	  box-align: center;

	  color: #ffffff;
	  text-align: center;
	  font-family: Arial;
	  font-size: 14px;
	  line-height: 24px;

	  cursor: pointer;
      }
    </style>
  </head>
  <body>

    <div id="container"></div>
    <div id="blocker">

      <div id="instructions">
	<span style="font-size:36px">Click to play</span>
	<br /><br />
	Move: WASD<br/>
	Jump: SPACE<br/>
	Look: MOUSE
      </div>

    </div>

    <script type="x-shader/x-vertex" id="vertexShader">

      varying vec3 vWorldPosition;

      void main() {

	  vec4 worldPosition = modelMatrix * vec4( position, 1.0 );
	  vWorldPosition = worldPosition.xyz;

	  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

      }

    </script>

    <script type="x-shader/x-fragment" id="fragmentShader">

      uniform vec3 topColor;
      uniform vec3 bottomColor;
      uniform float offset;
      uniform float exponent;

      varying vec3 vWorldPosition;

      void main() {

	  float h = normalize( vWorldPosition + offset ).y;
	  gl_FragColor = vec4( mix( bottomColor, topColor, max( pow( max( h , 0.0), exponent ), 0.0 ) ), 1.0 );

      }

    </script>

    <script type="module">

      import * as THREE from '../build/three.module.js';

      import Stats from './jsm/libs/stats.module.js';

      import { PointerLockControls } from './jsm/controls/PointerLockControls.js'

      import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';

      import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
			import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';
			import { OutlinePass } from './jsm/postprocessing/OutlinePass.js';
			import { FXAAShader } from './jsm/shaders/FXAAShader.js';



      var camera, scene, renderer, dirLight, dirLightHeper, hemiLight, hemiLightHelper, controls, projector, composer, outlinePass, selectedObjects;
      var mixers = [];
      var targetList = [];
      var mouse = new THREE.Vector2();
      var stats;
      var raycaster =  new THREE.Raycaster();
      
      
      var clock = new THREE.Clock();

      var moveForward = false;
      var moveBackward = false;
      var moveLeft = false;
      var moveRight = false;
      var canJump = false;

      var prevTime = performance.now();
      var velocity = new THREE.Vector3();
      var direction = new THREE.Vector3();
      var vertex = new THREE.Vector3();
      var color = new THREE.Color();


      init();
      animate();

      function init() {

	  // var container = document.getElementById( 'container' );

	  camera = new THREE.PerspectiveCamera( 80, window.innerWidth / window.innerHeight, 1, 5000 );
	  camera.position.set( 0, 35, 250 );

	  scene = new THREE.Scene();
	  scene.background = new THREE.Color().setHSL( 0.6, 0, 1 );
	  scene.fog = new THREE.Fog( scene.background, 1, 5000 );
	  
	  controls = new PointerLockControls(camera, document.body);

	  var blocker = document.getElementById( 'blocker' );
	  var instructions = document.getElementById( 'instructions' );

	  instructions.addEventListener( 'click', function () {

	      controls.lock();

	  }, false );

	  controls.addEventListener( 'lock', function () {

	      instructions.style.display = 'none';
	      blocker.style.display = 'none';

	  } );

	  controls.addEventListener( 'unlock', function () {

	      blocker.style.display = 'block';
	      instructions.style.display = '';

	  } );
	  
	  scene.add(controls.getObject());

	  
	  var onKeyDown = function ( event ) {

	      switch ( event.keyCode ) {

	      case 38: // up
	      case 87: // w
		  moveForward = true;
		  break;

	      case 37: // left
	      case 65: // a
		  moveLeft = true;
		  break;

	      case 40: // down
	      case 83: // s
		  moveBackward = true;
		  break;

	      case 39: // right
	      case 68: // d
		  moveRight = true;
		  break;

	      case 32: // space
		  if ( canJump === true ) velocity.y += 350;
		  canJump = false;
		  break;

	      }

	  };

	  var onKeyUp = function ( event ) {

	      switch ( event.keyCode ) {

	      case 38: // up
	      case 87: // w
		  moveForward = false;
		  break;

	      case 37: // left
	      case 65: // a
		  moveLeft = false;
		  break;

	      case 40: // down
	      case 83: // s
		  moveBackward = false;
		  break;

	      case 39: // right
	      case 68: // d
		  moveRight = false;
		  break;

	      }

	  };


	  document.addEventListener( 'keydown', onKeyDown, false );
	  document.addEventListener( 'keyup', onKeyUp, false );




	  // LIGHTS

	  hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 0.6 );
	  hemiLight.color.setHSL( 0.6, 1, 0.6 );
	  hemiLight.groundColor.setHSL( 0.095, 1, 0.75 );
	  hemiLight.position.set( 0, 50, 0 );
	  scene.add( hemiLight );

	  hemiLightHelper = new THREE.HemisphereLightHelper( hemiLight, 10 );
	  scene.add( hemiLightHelper );

	  //

	  dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
	  dirLight.color.setHSL( 0.1, 1, 0.95 );
	  dirLight.position.set( - 1, 1.75, 1 );
	  dirLight.position.multiplyScalar( 30 );
	  scene.add( dirLight );

	  dirLight.castShadow = true;

	  dirLight.shadow.mapSize.width = 2048;
	  dirLight.shadow.mapSize.height = 2048;

	  var d = 50;

	  dirLight.shadow.camera.left = - d;
	  dirLight.shadow.camera.right = d;
	  dirLight.shadow.camera.top = d;
	  dirLight.shadow.camera.bottom = - d;

	  dirLight.shadow.camera.far = 3500;
	  dirLight.shadow.bias = - 0.0001;

	  dirLightHeper = new THREE.DirectionalLightHelper( dirLight, 10 );
	  scene.add( dirLightHeper );

	  

	  // GROUND

	  var groundGeo = new THREE.PlaneBufferGeometry( 10000, 10000 );
	  var groundMat = new THREE.MeshLambertMaterial( { color: 0xffffff } );
	  groundMat.color.setHSL( 0.095, 1, 0.75 );

	  var ground = new THREE.Mesh( groundGeo, groundMat );
	  ground.position.y = - 33;
	  ground.rotation.x = - Math.PI / 2;
	  ground.receiveShadow = true;
	  scene.add( ground );

	  // SKYDOME

	  var vertexShader = document.getElementById( 'vertexShader' ).textContent;
	  var fragmentShader = document.getElementById( 'fragmentShader' ).textContent;
	  var uniforms = {
	      "topColor": { value: new THREE.Color( 0x0077ff ) },
	      "bottomColor": { value: new THREE.Color( 0xffffff ) },
	      "offset": { value: 33 },
	      "exponent": { value: 0.6 }
	  };
	  uniforms[ "topColor" ].value.copy( hemiLight.color );

	  scene.fog.color.copy( uniforms[ "bottomColor" ].value );

	  var skyGeo = new THREE.SphereBufferGeometry( 4000, 32, 15 );
	  var skyMat = new THREE.ShaderMaterial( {
	      uniforms: uniforms,
	      vertexShader: vertexShader,
	      fragmentShader: fragmentShader,
	      side: THREE.BackSide
	  } );

	  var sky = new THREE.Mesh( skyGeo, skyMat );
	  scene.add( sky );

	  // MODEL

	  var loader = new GLTFLoader();

	  loader.load( 'models/gltf/untitled.glb', function ( gltf ) {

	      var mesh = gltf.scene;

	      var submesh = mesh.children
		  .filter(o => o.type == "Group")
		  .flatMap(o => o.children)
	      	  .filter(o => o.isMesh);

                console.log(submesh);

	      function chunk (inputArray, perChunk) {
		  return inputArray.reduce((resultArray, item, index) => { 
		      const chunkIndex = Math.floor(index/perChunk)

		      if(!resultArray[chunkIndex]) {
			  resultArray[chunkIndex] = [] // start a new chunk
		      }

		      resultArray[chunkIndex].push(item)

		      return resultArray
		  }, [])
	      }

	      var ts = submesh.map (cs => {
		  var g = new THREE.Group();
		  g.add(cs);
		  return g;
	      });
	      console.log("ts", ts);
	      Array.prototype.push.apply(targetList, ts);

	      submesh
		  .map(m => {
		      var  color = new THREE.Color( 0xffffff );
		      color.setHex( Math.random() * 0xffffff );
		      m.material = new THREE.MeshStandardMaterial({color: color});
		      m.scale.set(50, 50, 50);
		      m.position.y = -15;
		  });

	      var s = 10;
	      mesh.scale.set( s, s, s );
	      mesh.position.y = -15;
	      // mesh.rotation.y = - 1;

	      mesh.castShadow = true;
	      mesh.receiveShadow = true;

	      console.log("Mesh loaded ", mesh, ts);
	      ts.map(m => scene.add( m));

	      // var mixer = new THREE.AnimationMixer( mesh );
	      // mixer.clipAction( gltf.animations[ 0 ] ).setDuration( 1 ).play();
	      // mixers.push( mixer );

	  } );

	  // RENDERER

	  renderer = new THREE.WebGLRenderer( { antialias: true } );
	  renderer.setPixelRatio( window.devicePixelRatio );
	  renderer.setSize( window.innerWidth, window.innerHeight );
	  document.body.appendChild( renderer.domElement );

	  renderer.gammaInput = true;
	  renderer.gammaOutput = true;

	  renderer.shadowMap.enabled = true;

      composer = new EffectComposer( renderer );
	  var renderPass = new RenderPass( scene, camera );
	  composer.addPass( renderPass );
	  outlinePass = new OutlinePass( new THREE.Vector2( window.innerWidth, window.innerHeight ), scene, camera );
	  composer.addPass( outlinePass );

      var effectFXAA = new ShaderPass( FXAAShader );
	  effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );
	  composer.addPass( effectFXAA );


      window.addEventListener( 'mousemove', onTouchMove );
				window.addEventListener( 'touchmove', onTouchMove );
				function onTouchMove( event ) {
					var x, y;
					if ( event.changedTouches ) {
						x = event.changedTouches[ 0 ].pageX;
						y = event.changedTouches[ 0 ].pageY;
					} else {
						x = event.clientX;
						y = event.clientY;
					}
					mouse.x = ( x / window.innerWidth ) * 2 - 1;
					mouse.y = - ( y / window.innerHeight ) * 2 + 1;
					checkIntersection();
				}
				function addSelectedObject( object ) {
					selectedObjects = [];
					selectedObjects.push( object );
				}
				function checkIntersection() {
					raycaster.setFromCamera( mouse, camera );
					var intersects = raycaster.intersectObjects( [ scene ], true );
					if ( intersects.length > 0 ) {
						var selectedObject = intersects[ 0 ].object;
						addSelectedObject( selectedObject );
						outlinePass.selectedObjects = selectedObjects;
					} else {
						// outlinePass.selectedObjects = [];
					}
				}


	  // STATS

	  stats = new Stats();
	  // container.appendChild( stats.dom );

	  //

	  document.addEventListener('mousedown', onMouseDown, false);
	  document.addEventListener('mousemove' , function (e) {
	      // calculate mouse position in normalized device coordinates
	      // (-1 to +1) for both components

	      mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
	      mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
	  }, false);
	  
	  window.addEventListener( 'resize', onWindowResize, false );

	  // var hemisphereButton = document.getElementById( 'hemisphereButton' );
	  // hemisphereButton.addEventListener( 'click', function () {

	  // 	hemiLight.visible = ! hemiLight.visible;
	  // 	hemiLightHelper.visible = ! hemiLightHelper.visible;

	  // } );

	  // var directionalButton = document.getElementById( 'directionalButton' );
	  // directionalButton.addEventListener( 'click', function () {

	  // 	dirLight.visible = ! dirLight.visible;
	  // 	dirLightHeper.visible = ! dirLightHeper.visible;

	  // } );

      }

      function onMouseDown(event) {

      }
      
      function onWindowResize() {

	  camera.aspect = window.innerWidth / window.innerHeight;
	  camera.updateProjectionMatrix();

	  renderer.setSize( window.innerWidth, window.innerHeight );

      }

      //

      function animate() {

	  requestAnimationFrame( animate );
	  

	  if ( controls.isLocked === true ) {
          console.log("Target list ",targetList);
	      // raycaster.ray.origin.copy( controls.getObject().position );
	      // raycaster.ray.origin.y -= 10;

	      // var intersections = raycaster.intersectObjects( objects );

	      // var onObject = intersections.length > 0;

	      raycaster.setFromCamera(mouse, camera);
	      // create an array containing all objects in the scene with which the ray intersects
	      var intersects = raycaster.intersectObjects(targetList,true);

	      console.log("intersections", intersects);

	      for ( var i = 0; i < intersects.length; i++ ) {
		  console.log(intersects[i].object);
		  //intersects[ i ].object.material = new THREE.MeshStandardMaterial({color: 0x000000});
          intersects[i].face.color = new THREE.Color(0x000000);
		  intersects[ i ].object.geometry.uvsNeedUpdate = true;
		  intersects[ i ].object.geometry.buffersNeedUpdate = true;
		  intersects[ i ].object.needsUpdate = true;
	      }


	      var time = performance.now();
	      var delta = ( time - prevTime ) / 1000;

	      velocity.x -= velocity.x * 10.0 * delta;
	      velocity.z -= velocity.z * 10.0 * delta;

	      velocity.y -= 9.8 * 100.0 * delta; // 100.0 = mass

	      direction.z = Number( moveForward ) - Number( moveBackward );
	      direction.x = Number( moveRight ) - Number( moveLeft );
	      direction.normalize(); // this ensures consistent movements in all directions

	      if ( moveForward || moveBackward ) velocity.z -= direction.z * 1000.0 * delta;
	      if ( moveLeft || moveRight ) velocity.x -= direction.x * 1000.0 * delta;

	      // if ( onObject === true ) {

	      // 	velocity.y = Math.max( 0, velocity.y );
	      // 	canJump = true;

	      // }

	      controls.moveRight( - velocity.x * delta );
	      controls.moveForward( - velocity.z * delta );

	      // controls.getObject().position.y += ( velocity.y * delta );
	      // new behavior

	      // if ( controls.getObject().position.y < 10 ) {

	      // 	velocity.y = 0;
	      // 	controls.getObject().position.y = 10;

	      // 	canJump = true;

	      // }

	      prevTime = time;

	  }

	  renderer.render( scene, camera );

      composer.render();


	  // render();
	  stats.update();

      }

      function render() {

	  // var delta = clock.getDelta();

	  // for ( var i = 0; i < mixers.length; i ++ ) {

	  // 	mixers[ i ].update( delta );

	  // }


	  // renderer.render( scene, camera );

      }

    </script>
  </body>
</html>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment