threejs 管子_threejs 3d 智能园区

一、页面效果

二、技术选择

中间的建筑相关的显示和效果都是threejs实现的

左右两侧用的是echarts

三、代码结构

1. 画布

用js自己创建一个放置画布的div

container = document.createElement(‘div‘)

document.body.appendChild(container)

2. 场景的创建

之后的比如几何体 摄像机 光源都是放在场景里面

scene = newTHREE.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)

c