2. 程式人生 > >threejs建立多個立方體，並支援滑鼠點選選中

threejs建立多個立方體，並支援滑鼠點選選中

阿新 • • 發佈：2019-01-19
var scene,camera,renderer,light,controls;//場景，相機，渲染器，光源 var raycaster,mouse;//光投射器，滑鼠位置對應的二維向量 init(); function init() { var container = document.getElementById("drawArea"); /* 1、初始化渲染器 */
renderer = new THREE.WebGLRenderer(); // renderer.setClearColor('white');//設定渲染出來的背景色 renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize(window.innerWidth,window.innerHeight); container.appendChild(renderer.domElement); /* 2、初始化相機 建立相機【遠景相機，與人眼觀察類似，近大遠小】 param1:視角【視角越大 物體渲染到螢幕時則看著越小，反之越大】 param2:相機拍攝面的長寬比 param3:近裁剪面 param4:遠裁剪面 */
camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,2000); camera.position.set(10,10,800); /* 新增檢視控制器 */ controls = new THREE.OrbitControls( camera, renderer.domElement ); controls.addEventListener( 'change'
, render ); /* 3、初始化場景 */ scene = new THREE.Scene(); scene.background = new THREE.Color(0xf0f0f0); //initLight(); //scene.add( new THREE.PointLightHelper( light, 15 ) ); /* 4、新增輔助座標軸 */ var axes = new THREE.AxisHelper(800); scene.add(axes); /* 5、新增地面網格 */ /** * size 網格總邊長 * step 網格個數 * colorCenterLine 網格中心線顏色 * colorGrid 網格其他線顏色 */ var gridHelper = new THREE.GridHelper( 300, 10, 'red', 'gray' ); gridHelper.position.y = -100; gridHelper.position.x = 0; scene.add( gridHelper ); /* 6、新增正方體 */ var geometry = new THREE.BoxGeometry(20,20,20);//盒子模型 for ( var i = 0; i < 100; i ++ ) { var material = new THREE.MeshBasicMaterial({color:"gray"});//材料 var mesh = new THREE.Mesh( geometry, material ); mesh.position.x = ( Math.random() - 0.5 ) * 1000; mesh.position.y = ( Math.random() - 0.5 ) * 1000; mesh.position.z = ( Math.random() - 0.5 ) * 1000; scene.add( mesh ); } /* 7、新增光投射器 及 滑鼠二維向量 用於捕獲滑鼠移入物體 下次渲染時，通過mouse對於的二維向量判斷是否經過指定物體 */ raycaster = new THREE.Raycaster();//光線投射器 mouse = new THREE.Vector2();//二維向量 document.addEventListener('mousemove', function(){ event.preventDefault(); mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; }, false); /** * 瀏覽器視窗大小調整 */ window.addEventListener( 'resize', function(){ camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight ); }, false ); /** * 新增滑鼠點選事件，捕獲點選時當前選中的物體 */ window.addEventListener( 'click', function(){ if(projectiveObj){ console.log(projectiveObj); if(projectiveObj.hasChecked){ projectiveObj.hasChecked = false; projectiveObj.material.color.set("gray"); }else{ projectiveObj.hasChecked = true; projectiveObj.material.color.set("#dd830d"); } } }, false ); render(); } function render() { requestAnimationFrame(render); renderRaycasterObj(raycaster,scene,camera,mouse);//渲染光投射器投射到的物件 renderer.render( scene, camera); } var projectiveObj;//定義上次投射到的物件 /** * 根據光投射器判斷滑鼠所在向量方向是否穿過物體，穿過則改變物體材質 * @param {*} raycaster 光投射器 * @param {*} scene 場景 * @param {*} camera 相機 * @param {*} mouse 滑鼠位置對應的二維向量 */ function renderRaycasterObj(raycaster,scene,camera,mouse) { raycaster.setFromCamera(mouse, camera); var intersects = raycaster.intersectObjects(scene.children); if (intersects.length > 0) { var currentProjectiveObjT = intersects[0].object; if (projectiveObj != currentProjectiveObjT) { if((currentProjectiveObjT instanceof THREE.AxisHelper) || (currentProjectiveObjT instanceof THREE.GridHelper)){ //穿過的是座標軸線和網格線 return; } projectiveObj.material.color.setHex(projectiveObj.currentHex); projectiveObj = intersects[0].object; } } else { projectiveObj = null; } }

相關推薦

threejs建立多個立方體，並支援滑鼠點選選中

var scene,camera,renderer,light,controls;//場景，相機，渲染器，光源 var raycaster,mouse;//光投射器，滑鼠位置對應的二維向量 init();

python 建立多個執行緒並啟動

建立多個執行緒並啟動這些執行緒          th_num : 15 th_num = conf["crawl_threads"] self._thread_list = [] self.

如何用HALCON檢測多個圓形，並計算每個圓的面積？

先用blob+幾何定位找到所有圓。然後擬合圓，這樣就可以計算圓的直徑了。 你需要知道你的斑點的灰度值，先分割閾值，再利用閾值區分ROI，得到斑點所在的xyr，當然園不需要r，然後利用得到的多個xy,去擬合圓   Code      

設計一個shell程式，在/userdata目錄下建立50個目錄，並對每個目錄給754許可權！

設計一個Shell程式，在/userdata目錄下建立50個目錄，即user1～user50，並設定每個目錄的許可權，其中其他使用者的許可權為：讀；檔案所有者的許可權為：讀、寫、執行；檔案所有者所在組的許可權為：讀、執行。 方法一： #!/bin/bash i=1 w

小程式元件-swipe多頁切換，並支援下拉重新整理，上拉載入，menu動態聯動切換

  前言 　　最近一個小程式專案中遇到一個需求，就是實現類似資訊類app的多頁面切換的那種效果, 如下圖: 　　 　　最終效果： 　　   1.功能分析 　　首先實現這個功能分為三步： 實現頂部menu選單 實現多頁面滑動切換 支援自定義下拉重新整理和上拉載入

多個圖片切換src地址（點選當前圖片切換src地址，其他圖片仍為預設的狀態）

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body

Android 多個listview監聽item的點選事件

如果一個介面包含多個listview，而且需要監聽每個listview的item點選事件，其實只需要在onItemClick方法中  判斷一下即可   @Override     public void onItemClick(Adapte

C++實現WebBrowser控制元件中對滑鼠點選事件的監聽，並獲取所點選標籤的超連結

        主要步驟如下：         1、接收網頁事件（參考資料） 要響應網頁事件，需要實現IDispatch介面，並在其Invoke（）方法中處理收到的訊息。對於MFC，因為CCmdTarget類已經實現了該介面，所以只需要繼承CCmdTarget並結合相關巨

百度地圖根據座標自定義覆蓋物，並實現其點選事件

在很多APP中都會用到百度地圖，以實現各種功能，本片文章介紹在百度地圖中新增自定義覆蓋物並新增其點選事件 public class NearByFragment extends Fragment { private MapView mapView;

多個class相同的元素的點選事件（動態載入的）

1.  for(var i=0;i<datas;i++){                list= document.createElement('tr');//建立tr標籤        

[PyQt] 自定義QSlider支援滑鼠點選和滾輪事件

from PyQt4.QtGui import * from PyQt4.QtCore import * class progressSlider(QSlider): def __init__(self, orientation, parent=None): su

Qt 中實現在控制元件中點選滑鼠，就在滑鼠點選處載入圖片的方法

首先應該知道，QLabel類是沒有點選事件的。我們需要點選滑鼠，那麼必須重寫一個QLabel類去繼承原來的QLabel。比如說我定義PutPicLabel來繼承QLabel。 在標頭檔案中應該這麼寫： #ifndef PUTPICLABEL_H #define PUTPI

Android Studio 游標位置不在行首，而是跟隨滑鼠點選位置 問題解決

問題描述 AndroidStudio中游標的位置不是點選每行之後出現在每一行的行首，而是停留在滑鼠點選的位置，如下（游標停留位置前方並沒有空格）： 解決 開啟了豎行選擇模式 關閉該模式即可解決問題。 組合鍵 Shift + Alt + Inser

VisualStudioCode中建立多個ASP.NET Core 專案、類庫、控制檯程式，並新增應用間的引用

首先安裝VisualStudioCode並且可以使用。 1、首先建立MyApps資料夾，作為專案主目錄，下面將在這個資料夾中建立多個web應用程式、型別、控制檯程式等。 2、開啟VisualStudioCode軟體，選擇“File”->"Open Folder"，在彈出框中選擇上述建立的資料夾“My

VMware建立多個虛擬機器，並分配IP地址，用xshell來連線

1.設定虛擬機器的網路連線模式為NAT模式 2.取消DHCP服務。 3.檢視虛擬機器網段，閘道器地址 4.設定靜態IP vi /etc/sysconfig/network-scripts/ifcfg-ens32 ,ens32這裡根據每個人的不同而不同 TYP

git 有多個分支，改變工作區，拉取遠端分支並建立本地分支

方法一： [[email protected] hospitalsecurity]$ git branch master hospitalsecurity的主分支是master，現在想拉新分

springboot整合rabbitmq，根據查詢的資訊建立多個訊息中心和訊息佇列，並實現不同的訊息傳送到不同的訊息中心

      今天接到一個需求，就是在傳送訊息到rabbitmq訊息中心的時候，需要根據裝置型別，將訊息傳送到不同的訊息佇列，因此要建立不同的訊息佇列。       修改之前是把配置資訊寫在配置文中，專案啟動時，獲取配置檔案中的配置資訊，建立訊息佇列。       修改後的邏輯

Java程序：從命令行接收多個數字，求和並輸出結果

程序代碼 ati for right 流程圖 public 技術 參數 由於 程序設計思想：由於命令行接收的是字符串類型，因此應先將字符串類型轉化為整型或其他字符型，然後利用for循環求和並輸出結果 程序流程圖： 源程序代碼： 1 public class Ja

對同一個物件繫結多個響應事件並都執行，和此例子的相容程式碼

要點： 1.因為 onclick=" "  新增的元素響應事件，先新增的事件，會被後來新增的事件層疊掉，只能執行最後一個響應的事件 所以要用到事件監聽addElementLitener()來繫結多個處理函式，而因為相容性的問題需要相容程式碼。 2.在IE8中，addE

資料庫中某個表中的某個欄位的值是用逗號隔開的多個值，根據逗號拆分並從另一個表中查出資料返回

有兩個表A，B,表結構如下： A表 B表 關聯關係說明如下： （1）A.hospital_catalog=B.id （2）A表中hospital_catalog欄位的值是以 逗號 “,” 隔開，且兩邊用中括號“[ ]”包起，