haehn · September 25, 2020 18:42
diff --git a/3dclick.html b/3dclick.html
 <html>
  <head>
    <style>
      html, body { 
        background-color:#000;
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden !important;  
      }
    </style>
    <script src="https://threejs.org/build/three.min.js" type="text/javascript"></script>
    <script src="https://threejs.org/examples/js/controls/TrackballControls.js" type="text/javascript"></script>
    <script>
      window.onload = function() {

        scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
        camera.position.set( 0, 0, 100 );

        renderer = new THREE.WebGLRenderer({antialias: true});
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );
        
        //
        // let's listen to clicks on the canvas
        //
        renderer.domElement.onclick = function(e) {

          pixel_coords = new THREE.Vector2(e.clientX, e.clientY); // screen space

          vp_coords = new THREE.Vector2( 
              ( pixel_coords.x / window.innerWidth ) * 2 - 1, // X
              - ( pixel_coords.y / window.innerHeight ) * 2 + 1 ); // Y

          console.log('screen space', pixel_coords);
          console.log('vp space', vp_coords);

          vp_coords_3d_near = new THREE.Vector3(vp_coords.x,
                                        vp_coords.y,
                                        0); // for zNear

          raycaster = new THREE.Raycaster();
          raycaster.setFromCamera(vp_coords_3d_near, camera);

          intersects = raycaster.intersectObject( invisible_plane );

          console.log('3d', intersects[0].point);

          // create example object
          geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
          material = new THREE.MeshStandardMaterial({ color: 0xffffff });
          cube = new THREE.Mesh( geometry, material );
          
          cube.position.set( intersects[0].point.x,intersects[0].point.y, intersects[0].point.z);

          scene.add( cube );
          //

        };



        ambientLight = new THREE.AmbientLight( 0x404040 );
        scene.add( ambientLight );

        light = new THREE.DirectionalLight( 0xffffff, 5.0 );
        light.position.set( 10, 100, 10 );
        scene.add( light );

        geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
        material = new THREE.MeshStandardMaterial({ color: 0xffffff });
        cube = new THREE.Mesh( geometry, material );
        
        scene.add( cube );


        // setup invisible plane for picking
        geometry = new THREE.PlaneBufferGeometry( 10000, 10000 );
        material = new THREE.MeshBasicMaterial( {
          visible: false
        });

        invisible_plane = new THREE.Mesh( geometry, material );

        scene.add( invisible_plane );


        controls = new THREE.TrackballControls( camera, renderer.domElement );

        animate();
        
      };

      function animate() {

        requestAnimationFrame( animate );

        controls.update();
        renderer.render( scene, camera );

      };
    </script>
  </head>
  <body></body>
 </html>
	<html>
	<head>
	<style>
	html, body {
	background-color:#000;
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden !important;
	}
	</style>
	<script src="https://threejs.org/build/three.min.js" type="text/javascript"></script>
	<script src="https://threejs.org/examples/js/controls/TrackballControls.js" type="text/javascript"></script>
	<script>
	window.onload = function() {

	scene = new THREE.Scene();

	camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
	camera.position.set( 0, 0, 100 );

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

	//
	// let's listen to clicks on the canvas
	//
	renderer.domElement.onclick = function(e) {

	pixel_coords = new THREE.Vector2(e.clientX, e.clientY); // screen space

	vp_coords = new THREE.Vector2(
	( pixel_coords.x / window.innerWidth ) * 2 - 1, // X
	- ( pixel_coords.y / window.innerHeight ) * 2 + 1 ); // Y

	console.log('screen space', pixel_coords);
	console.log('vp space', vp_coords);

	vp_coords_3d_near = new THREE.Vector3(vp_coords.x,
	vp_coords.y,
	0); // for zNear

	raycaster = new THREE.Raycaster();
	raycaster.setFromCamera(vp_coords_3d_near, camera);

	intersects = raycaster.intersectObject( invisible_plane );

	console.log('3d', intersects[0].point);

	// create example object
	geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
	material = new THREE.MeshStandardMaterial({ color: 0xffffff });
	cube = new THREE.Mesh( geometry, material );

	cube.position.set( intersects[0].point.x,intersects[0].point.y, intersects[0].point.z);

	scene.add( cube );
	//

	};



	ambientLight = new THREE.AmbientLight( 0x404040 );
	scene.add( ambientLight );

	light = new THREE.DirectionalLight( 0xffffff, 5.0 );
	light.position.set( 10, 100, 10 );
	scene.add( light );

	geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
	material = new THREE.MeshStandardMaterial({ color: 0xffffff });
	cube = new THREE.Mesh( geometry, material );

	scene.add( cube );


	// setup invisible plane for picking
	geometry = new THREE.PlaneBufferGeometry( 10000, 10000 );
	material = new THREE.MeshBasicMaterial( {
	visible: false
	});

	invisible_plane = new THREE.Mesh( geometry, material );

	scene.add( invisible_plane );


	controls = new THREE.TrackballControls( camera, renderer.domElement );

	animate();

	};

	function animate() {

	requestAnimationFrame( animate );

	controls.update();
	renderer.render( scene, camera );

	};
	</script>
	</head>
	<body></body>
	</html>