coplanarPoint

by grano

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/loaders/GLTFLoader.js"></script>
<script src='https://threejs.org/examples/js/postprocessing/EffectComposer.js'></script>
<script src='https://threejs.org/examples/js/postprocessing/RenderPass.js'></script>
<script src='https://threejs.org/examples/js/postprocessing/ShaderPass.js'></script>
<script src='https://threejs.org/examples/js/shaders/CopyShader.js'></script>
<script src="https://threejs.org/examples/js/shaders/LuminosityHighPassShader.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/UnrealBloomPass.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

 <script type="x-shader/x-vertex" id="vertexshader">
  varying vec2 vUv;
  void main() {
    vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  }
</script>
<script type="x-shader/x-fragment" id="fragmentshader">
  uniform sampler2D baseTexture;
  uniform sampler2D bloomTexture;
  varying vec2 vUv;
  void main() {
    gl_FragColor = ( texture2D( baseTexture, vUv ) + vec4( 1.0 ) * texture2D( bloomTexture, vUv ) );
  }
</script>

JavaScript

let camera, scene, renderer, bloomComposer, finalComposer;

init();
animate();

function init() {
	camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.01, 1000 );
	camera.position.set( 0, 0, 140 );
	camera.lookAt( 0, 0, 0 );	

  
	scene = new THREE.Scene();
    
  const sphere1 = new THREE.Mesh(new THREE.SphereGeometry(1, 32, 32), new THREE.MeshBasicMaterial({
  	color: "white",
  }));
//  sphere1.position.set(0,0,0);
  scene.add(sphere1);
  
  const xzplane = new THREE.Plane();
  
  // 上部を向いているplaneにoriginに対する距離を-1.0にするということは上部(normal方向)に1移動させるということ
  const xyplane = new THREE.Plane(new THREE.Vector3(0,1,0), -1.0);
  const dynamicPlane =  new THREE.Plane();


  const cp = xyplane.coplanarPoint(new THREE.Vector3(1,1,1))
  
  // coplanarPoint is -normal * constant
  // originからnormal方向にconstant分移動しているのがxrplaneなので、
  // その逆を取るとxrplane上の点となる
  console.log('cp: ',cp)
  const normal = new THREE.Vector3(0.1,0.1,0)
  const point = new THREE.Vector3(1,1,10)
  dynamicPlane.setFromNormalAndCoplanarPoint(normal, point)
  console.log('dynamicPlane:',dynamicPlane)
  
//  sphere1.translate(cp);
  
  
  const normalBox = new THREE.Mesh(new THREE.BoxGeometry(10, 10, 10), new THREE.MeshBasicMaterial({
  	color: "red",
    //clippingPlanes: [ xzplane,xyplane,dynamicPlane ],
	 	// clippingPlanes: [ dynamicPlane ],
    clippingPlanes: [ xyplane ],
  }));
  normalBox.position.set(0,0,0);
  scene.add(normalBox);

renderer = new THREE.WebGLRenderer();
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );
  renderer.localClippingEnabled = true;
  
 	const controls = new THREE.OrbitControls( camera, renderer.domElement );
  controls.target.set( 0, 1, 0 );
  

}

function animate() {
  renderer.render( scene, camera );  
	requestAnimationFrame( animate );

}