three.js testbed

with orbitControls, XZgrid, info

by RGMGx

HTML

<h1 style="font-size:1.5em; text-align:center; margin:15px">
  windows 精選桌布畫展
  <form>

    <select id="paintlist" name="pageIndexA">
    
            <option value="1" selected >選擇作品</option>
            <option value="2">疑難排解畫面</option>
            <option value="3">凡斯塞那斯普拉格斯自然公園</option>
            <option value="4">無題風景照</option>
            <option value="5">可愛島隧道海灘 (美國夏威夷)</option>
            <option value="6">無題風景照2</option>
            <option value="7">windows鎖定畫面1</option>
            <option value="8">windows鎖定畫面2</option>
            <option value="9">windows xp 預設桌布</option>
            <option value="10">windows 預設桌布</option>
            <option value="11">windows 開機讀取畫面</option>
            <option value="12">windows 預設桌布2</option>
           
        </select>



  </form>
</h1>

<hr>

<div id="info"><br>

</div>

<button id="tView" style="width:20%">Turn</button>
<input type=range min=0 max=1 step=0.1 id='intensity'> intensity
<p>
</p>


<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js">


</script>

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

<script src="https://cdn.jsdelivr.net/gh/mrdoob/three.js@2410ad1a8f5844df00191600eafda59def537830/examples/js/loaders/MTLLoader.js"></script>
<script src="https://cdn.jsdelivr.net/gh/mrdoob/three.js@2410ad1a8f5844df00191600eafda59def537830/examples/js/loaders/OBJLoader.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js">


</script>

CSS

#info {
  width: 60vw;
  height: 60vw;
  float: left;
  background-color: green;
  margin: 10px;
}

p {
  margin: 10px;
  text-align: justify;
}

JavaScript

var camera, scene, renderer;
var theObject = new THREE.Object3D()
var camera1;
var mouse = new THREE.Vector2();
var raycaster = new THREE.Raycaster();
var pickables = [];
var index
var useCamera1 = false;

var lightsOff = false;
/*
$(function paintlist() {
  document.getElementById("paintlist").innerHTML = document.getElementById("pageIndexA").value
  useCamera1 = !useCamera1;
  console.log("!!!")
});
*/
$(function(){

  // 下拉式切換選項立即得到目前選取的值 (多選multiselect <select multiple>)
  // Attaches a change event to the select that gets the text

  var $cSel = $('select[name="pageIndexA"]'); //指定要處理的特定元素物件名稱
  $cSel.on('change', function() {   
  var str = "";
    $( "option:selected", $( this ) ).each(function() {
      str += $( this ).val() + " " ; //得到目前選取的值value
      str += $( this ).text() + " "; //得到目前選取的文字text
      useCamera1 = true;
      index = $( this ).val();
      
    });
   // $( "div" ).text( str );
    
    
  });
  
});
////
$('#intensity').change(function() {
  console.log($(this).val());
  light.intensity = $(this).val();
})

$('#tView').click(function() {
  //  toggleCamera();
  lightsOff = !lightsOff;

  if (lightsOff) {
    light.intensity = 0;
    light2.intensity = 0;
  } else {
    light.intensity = 1;
    light2.intensity = 1;
  }
});

class Light {

  constructor(pos, t_pos, lr) {
    this.lamp = new THREE.Object3D();
    this.pos = pos
    this.t_pos = t_pos
    this.lampbody = new THREE.Mesh(new THREE.CylinderGeometry(10, 10, 30), new THREE.MeshNormalMaterial());
    this.lamp.add(this.lampbody);
    this.lampbody.position.set(0, 0, 15);
    if (lr == 0) {
      this.lampbody.rotation.x = Math.PI / 2;
    } else {
      this.lampbody.rotation.x = Math.PI / 2;
      this.lamp.rotation.y = Math.PI / 2;
    }
    this.lamp.position.copy(pos); // fix to a point on ceiling
    scene.add(this.lamp);

    this.spotLight = new THREE.SpotLight(0xffffff);
    scene.add(this.spotLight);
    this.spotLight.position.copy(this.lamp.position);
   ...