three.js 3d 智慧園區

一、頁面效果

使用three.js實現智慧城市 智慧園區

 

二、技術選擇

中間的建築相關的顯示和效果都是threejs實現的

左右兩側用的是echarts

三、代碼結構

1. 畫布

用js自己創建一個放置畫布的div

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

2. 場景的創建

之后的比如幾何體 攝像機 光源都是放在場景里面

  scene = new THREE.Scene(); renderer = new THREE.WebGLRenderer({ antiakuas: true }) renderer.setClearColor(new THREE.Color("rgba(3,19,52)"), 1)//整個畫布的背景顏色
 renderer.setSize(window.innerWidth, window.innerHeight) renderer.shadowMapEnabled = true;//需要陰影映射
 container.appendChild(renderer.domElement)

3. 攝像機

攝像機是有兩種類型的

• 透視投影攝像機:PerspectiveCamera會讓物體近大遠小；
• 正交投影攝像機：OrthographicCamera物體渲染的大小是一致的；

camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 1, 1000) camera.position.set(0, 150, 300)//相機位置
 camera.lookAt(new THREE.Vector3(0, 0, 0))//相機觀看物體的位置

4.光源

光有基本的四種類型：

環境光( AmbientLight )：籠罩在整個空間無處不在的光

點光源( PointLight )：向四面八方發射的單點光源

聚光燈( SpotLight )：發射出錐形狀的光， 模擬手電筒，台燈等光源

平行光( DirectinalLight )：平行的一束光，模擬從很遠處照射的太陽光

        var ambientLight = new THREE.AmbientLight(0x606060)//環境光
 scene.add(ambientLight) var spotLight = new THREE.SpotLight(0xffffff) spotLight.position.set(200, 160, 85) spotLight.castShadow = true scene.add(spotLight)

5.創建柵格平面

Geometry這是存儲幾何體相關的信息，是為了減少CPU的消耗

柵格用的是線段畫出來的

function plane() { var geometry = new THREE.Geometry(); geometry.vertices.push(new THREE.Vector3(-800, 0, 0)); geometry.vertices.push(new THREE.Vector3(800, 0, 0)); for (var i = 0; i < 50; i++) { var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({ color: "rgba(38,55,84,1)", opacity: 1 })); line.position.z = (i * 50) - 800; scene.add(line); var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({ color: "rgba(38,55,84,1)", opacity: 1 })); line.position.x = (i * 50) - 800; line.rotation.y = 90 * Math.PI / 180; scene.add(line); } }

6.建築

建築用的是立方體，需要注意的是可以自己設置一個圖片，然后將圖片作為紋理貼到立方體上面來；

根據移動立方體的位置，來拼合成建築；

var loader = new THREE.TextureLoader(); loader.load("./img/cude1.png", (texture) => { var geometry = new THREE.BoxGeometry(30, 5, 20); var material = new THREE.MeshBasicMaterial({ color: 0x739783, map: texture }); buildArr[i] = new THREE.Mesh(geometry, material); buildArr[i].position.x = 10 buildArr[i].position.y = 5 + i * 5 buildArr[i].position.z = -10 scene.add(buildArr[i]); })

7.視角的移動

當我們看到視角的遠近，其實是攝像機的移動，我們通過修改攝像機的位置，來達到響應的目的；

var cameraz = 10; var camerax = 10; var timer; timer = setInterval(function () { cameraz += 1 camerax += 1 camera.position.x = 50 - cameraz camera.position.z = 100 + cameraz if (cameraz >= 300 && camerax >= 50) { clearInterval(timer) } }, 30) for (var i = 0; i < 30; i++) { buildArr[i].position.y = 5 + i * 5 }

8.車流

我們先是設置一下管道的幾何體和小球，然后同樣的修改小球的x y z值來進行流動，需要注意的是小球需要根據管道的路徑進行流動，

    var curve = new THREE.CatmullRomCurve3([ new THREE.Vector3(-150, 2, -280), new THREE.Vector3(-110, 2, -50), new THREE.Vector3(-10, 2, 0), new THREE.Vector3(100, 2, 100), new THREE.Vector3(140, 2, 200) ], false/*是否閉合*/); function traffic() { //一條

    var tubeGeometry2 = new THREE.TubeGeometry(curve, 100, 2, 50, false); var tubeMaterial2 = new THREE.MeshPhongMaterial({ color: "rgb(45,245,216)", transparent: true, opacity: 1, }); var tube2 = new THREE.Mesh(tubeGeometry2, tubeMaterial2); scene.add(tube2); //物體
 geometryP = new THREE.BoxGeometry(5, 5, 5); var materialP = new THREE.MeshBasicMaterial({ color: 'rgb(165,244,7)' }); circleP = new THREE.Mesh(geometryP, materialP); scene.add(circleP); geometryP.rotateY(Math.PI / 2); //circleP.position.set(-80, -40, 0);
 } if (progress > 1.0) { circleP.position.set(-150, 2, -280); progress = 0

    //return; //停留在管道末端,否則會一直跑到起點 循環再跑
 } progress += 0.001; //0.0009;

if (curve) { let point = curve.getPoint(progress); if (point && point.x) { circleP.position.set(point.x, point.y, point.z); } }

9.事件

 window.addEventListener("click", onDocumentMouseMove, false)

 

 

四、相關資料

Threejs：https://threejs.org/docs/#manual/zh/introduction/Creating-a-scene

Echarts:  https://www.echartsjs.com/zh/index.html

github : https://github.com/zhangyxhuomu/Data-visualization-3d/tree/master/three-3d/three-3d