basic search

3js using javascript

by jmcjc5u

HTML

<div id="info">basic search
  <br>
  <button id="toggle" style="width:20%">Camara Turn</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

CSS

body {
  background-color: #fff;
  color: #111;
  margin: 0px;
  overflow: hidden;
  font-family: Monospace;
  font-size: 10px;
  position: absolute;
}

#info {
  position: absolute;
  top: 3%;
  width: 100%;
  padding: 5px;
  text-align: center;
  color: #ffff00;
}

JavaScript

var renderer, camera1, camera2, controls, scene, sceneRTT, renderTarget, mesh;
var box, quad, angle = 0;
var raycaster, mouse = new THREE.Vector2();
var pickables = [], buffer;
var camaraflag = false, angleFlag = true;

init();
animate();


$("#toggle").click( function() {
	camaraflag = !camaraflag;
  }
);


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

  camera1 = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  camera1.position.set(0, 200, 400);
  
  camera2 = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  camera2.position.set (0, 20, 0);
  camera2.lookAt (new THREE.Vector3(0, 30, 0))
  camera2.rotation.y = -Math.PI/2;
  
  camera = camera2;

  controls = new THREE.OrbitControls(camera1, renderer.domElement);

  scene = new THREE.Scene();
  
  var ambientLight = new THREE.AmbientLight(0x000000);
  scene.add(ambientLight);

  let gridXZ = new THREE.GridHelper(500, 20, 'red', 'white');
    //scene.add(gridXZ);
  
  raycaster = new THREE.Raycaster();
  window.addEventListener('resize', onWindowResize, false);
  document.addEventListener('mousedown', onDocumentMouseDown, false);
  
  box = new THREE.Mesh(new THREE.BoxGeometry(10, 5, 20), new THREE.MeshNormalMaterial());
  box.position.y = 2.5;
	
 scene.add(box);
 
 /////////////////////////////////////////////////////////
  // render a rotating teapot to texture
  // then apply the texture to a quad

  sceneRTT = new THREE.Scene();
  let pointLight = new THREE.PointLight(0xffffff);
  pointLight.position.set(0, 300, 200);
  sceneRTT.add(pointLight);

  renderTarget = new THREE.WebGLRenderTarget(
    1024, 1024, {
      minFilter: THREE.LinearFilter,
      magFilter: THREE.NearestFilter
      
    }
  );

  mesh = new THREE.Mesh(new THREE.CircleGeometry(100, 100,...