Javascript threejs 3D繪製立方體帶邊框

我遵循threejs示例webgl_interactive_draggablecubes.html。我的項目是使用Threejs來製作一個容器加載計劃。所以我想用邊框做立方體。我們可以看到有/沒有邊界差異的東西。 /image attachement/，Javascript threejs 3D繪製立方體帶邊框

的代碼我一點點修改/ 1/

我可以用多種材料，但後來我的拖放被打破。創建Geometry3中的代碼片段被評論。

我的問題是如何使邊界固體立方體，同時可以拖放？

/1/

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>three.js webgl - draggable cubes</title> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> 
     <style> 
      body { 
       font-family: Monospace; 
       background-color: #f0f0f0; 
       margin: 0px; 
       overflow: hidden; 
      } 
     </style> 
    </head> 
    <body> 

     <script src="js/three.js"></script> 
     <script src="js/TrackballControls.js"></script> 
     <script src="js/stats.min.js"></script> 

     <script> 

      var container, stats; 
      var camera, controls, scene, renderer; 
      var cubes = []; 
      var plane = new THREE.Plane(); 
      var raycaster = new THREE.Raycaster(); 
      var mouse = new THREE.Vector2(), 
      offset = new THREE.Vector3(), 
      intersection = new THREE.Vector3(), 
      INTERSECTED, SELECTED; 

      init(); 
      animate(); 

      function init() { 

       container = document.createElement('div'); 
       document.body.appendChild(container); 

       camera = new THREE.PerspectiveCamera(70, window.innerWidth/window.innerHeight, 1, 10000); 
       camera.position.z = 10; 

       controls = new THREE.TrackballControls(camera); 
       controls.rotateSpeed = 1.0; 
       controls.zoomSpeed = 1.2; 
       controls.panSpeed = 0.8; 
       controls.noZoom = false; 
       controls.noPan = false; 
       controls.staticMoving = true; 
       controls.dynamicDampingFactor = 0.3; 

       scene = new THREE.Scene(); 

       scene.add(new THREE.AmbientLight(0x505050)); 


       var geometry = new THREE.BoxGeometry(2, 5, 7); 
       var hex = 0xff0000; 
       for (var i = 0; i < geometry.faces.length; i++) {     
        geometry.faces[ i ].color.setHex(hex); 
       } 
       var material = new THREE.MeshBasicMaterial({ vertexColors: THREE.FaceColors, overdraw: 0.5,wireframe:true }); 
       var cube = new THREE.Mesh(geometry, material); 
       cubes.push(cube); 

       var geometry2 = new THREE.BoxGeometry(2,4, 5);    
       var hex2 = 0x009fff; 
       for (var i = 0; i < geometry2.faces.length; i++) {     
        geometry2.faces[ i ].color.setHex(hex2); 
       }     
       var material2 = new THREE.MeshBasicMaterial({ vertexColors: THREE.FaceColors, overdraw: 0.5,wireframe:true }); 
       var cube2 = new THREE.Mesh(geometry2, material2);    
       cubes.push(cube2); 

       var geometry3 = new THREE.BoxGeometry(1,3,4); 
       var hex3 = 0x0f0ff0; 
       for (var i = 0; i < geometry3.faces.length; i++) { 
        geometry3.faces[ i ].color.setHex(hex3); 
       }    
    /*   var darkMaterial3= new THREE.MeshBasicMaterial({ color: 0xffffcc }); 
       var wireframeMaterial3= new THREE.MeshBasicMaterial({ color: 0x0f0000, wireframe: true, transparent: false }); 
       var multiMaterial3= [ darkMaterial3, wireframeMaterial3 ];   
       var cube3 = THREE.SceneUtils.createMultiMaterialObject(geometry3,multiMaterial3);*/ 
       var material3 = new THREE.MeshBasicMaterial({ vertexColors: THREE.FaceColors, overdraw: 0.5,wireframe:true }); 
       var cube3 = new THREE.Mesh(geometry3, material3); 
       cubes.push(cube3); 

       scene.add(cube); 
       scene.add(cube2); 
       scene.add(cube3); 

       renderer = new THREE.WebGLRenderer({ antialias: true }); 
       renderer.setClearColor(0xf0f0f0); 
       renderer.setPixelRatio(window.devicePixelRatio); 
       renderer.setSize(window.innerWidth, window.innerHeight); 
       renderer.sortObjects = false; 

       renderer.shadowMap.enabled = true; 
       renderer.shadowMap.type = THREE.PCFShadowMap; 
       container.appendChild(renderer.domElement); 

       stats = new Stats(); 
       container.appendChild(stats.dom); 

       renderer.domElement.addEventListener('mousemove', onDocumentMouseMove, false); 
       renderer.domElement.addEventListener('mousedown', onDocumentMouseDown, false); 
       renderer.domElement.addEventListener('mouseup', onDocumentMouseUp, false); 

       window.addEventListener('resize', onWindowResize, false); 
      } 

      function onWindowResize() { 
       camera.aspect = window.innerWidth/window.innerHeight; 
       camera.updateProjectionMatrix(); 
       renderer.setSize(window.innerWidth, window.innerHeight); 
      } 

      function onDocumentMouseMove(event) { 
       event.preventDefault(); 

       mouse.x = (event.clientX/window.innerWidth) * 2 - 1; 
       mouse.y = - (event.clientY/window.innerHeight) * 2 + 1; 

       raycaster.setFromCamera(mouse, camera); 

       if (SELECTED) { 
        if (raycaster.ray.intersectPlane(plane, intersection)) { 
         SELECTED.position.copy(intersection.sub(offset)); 
        } 
        return; 
       } 

       var intersects = raycaster.intersectObjects(cubes); 
       if (intersects.length > 0) { 
        if (INTERSECTED != intersects[ 0 ].object) { 
         if (INTERSECTED) INTERSECTED.material.color.setHex(INTERSECTED.currentHex); 
         INTERSECTED = intersects[ 0 ].object; 
         INTERSECTED.currentHex = INTERSECTED.material.color.getHex(); 

         plane.setFromNormalAndCoplanarPoint(
          camera.getWorldDirection(plane.normal), 
          INTERSECTED.position); 
        } 
        container.style.cursor = 'pointer'; 
       } else { 
        if (INTERSECTED) INTERSECTED.material.color.setHex(INTERSECTED.currentHex); 
        INTERSECTED = null; 
        container.style.cursor = 'auto'; 
       } 
      } 

      function onDocumentMouseDown(event) { 
       event.preventDefault(); 
       raycaster.setFromCamera(mouse, camera); 
       var intersects = raycaster.intersectObjects(cubes); 

       if (intersects.length > 0) { 
        controls.enabled = false; 
        SELECTED = intersects[ 0 ].object; 
        if (raycaster.ray.intersectPlane(plane, intersection)) { 
         offset.copy(intersection).sub(SELECTED.position); 
        } 
        container.style.cursor = 'move'; 
       } 
      } 

      function onDocumentMouseUp(event) { 
       event.preventDefault(); 
       controls.enabled = true; 
       if (INTERSECTED) { 
        SELECTED = null; 
       } 
       container.style.cursor = 'auto'; 
      } 

      function animate() { 
       requestAnimationFrame(animate); 
       render(); 
       stats.update(); 
      } 

      function render() { 
       controls.update(); 
       renderer.render(scene, camera); 
      } 
     </script> 
    </body> 
</html>

來源

2016-12-08 user84592

添加WireframeGeometry或EdgesGeometry每個可拖動對象的子對象。

scene.add(object); 

objects.push(object); 

// wireframe 
var geo = new THREE.EdgesGeometry(object.geometry); 
var mat = new THREE.LineBasicMaterial({ color: 0x000000, linewidth: 4 }); 
var wireframe = new THREE.LineSegments(geo, mat); 
wireframe.renderOrder = 1; // make sure wireframes are rendered 2nd 
object.add(wireframe);

提示：webgl_interactive_draggablecubes.html示例已被簡化。檢查r.83dev分支。

three.js所r.82

來源

2016-12-08 03:57:55 WestLangley

優秀!!快速和正確的答案。如何使行粗體？當我增加線寬時，似乎它具有最大值。 – user84592

甚至有提示！ – user84592

這是很好的答案！ – user84592

我建議使用EdgesHelper

 this.scene.add(image3D); 

     edges        = new THREE.EdgesHelper(image3D, 0x808080); 
     edges.material.linewidth   = 3; 

     this.scene.add(edges);

實施例：

來源

2016-12-13 19:24:12

'EdgesHelper'在three.js r.81中從庫中移除。 – WestLangley

我正在使用r82，它更好地尋找我的情況。對於容器加載3D，這是更好的解決方案。是否折舊？無論如何，我正在使用R82，它的工作原理。 – user84592

@ user84592閱讀您的控制檯警告消息：「THREE.EdgesHelper已被刪除，請改用THREE.EdgesGeometry。」 – WestLangley

Javascript threejs 3D繪製立方體帶邊框

回答

相關問題