threejs
本例中我们将引入threejs插件，并创建一个3d的箱子模型，通过在配置文件中添加属性栏控制物体的三维属性。
config.json:
{
"develop":{
"html":"index.html",
"css":["./css/index.css"],
"entry":"./main.js",
"scripts":{
}
},
"plugins":["threejs","jquery"],
"services":[],
"libs":[],
"customAttributes":{
"pro":[
{
"type":"BgSize",
"name":"尺寸",
"callback":"outSizeCallBack"
},
{
"type":"SlideInputBarComponent",
"name":"position.x",
"customInput":{
"nzMin":0,
"nzMax":100,
"nzStep":1,
"ngvModel":0,
"hideProgress":false
},
"callback":{
"ngvModel":"changeX"
}
},
{
"type":"SlideInputBarComponent",
"name":"position.y",
"customInput":{
"nzMin":0,
"nzMax":100,
"nzStep":1,
"ngvModel":0,
"hideProgress":false
},
"callback":{
"ngvModel":"changeY"
}
},
{
"type":"SlideInputBarComponent",
"name":"position.z",
"customInput":{
"nzMin":0,
"nzMax":100,
"nzStep":1,
"ngvModel":0,
"hideProgress":false
},
"callback":{
"ngvModel":"changeZ"
}
},
{
"type":"SlideInputBarComponent",
"name":"rotation.x",
"customInput":{
"nzMin":0,
"nzMax":100,
"nzStep":1,
"ngvModel":0,
"hideProgress":false
},
"callback":{
"ngvModel":"rotationX"
}
},
{
"type":"SlideInputBarComponent",
"name":"rotation.y",
"customInput":{
"nzMin":0,
"nzMax":100,
"nzStep":1,
"ngvModel":0,
"hideProgress":false
},
"callback":{
"ngvModel":"rotationY"
}
},
{
"type":"SlideInputBarComponent",
"name":"rotation.z",
"customInput":{
"nzMin":0,
"nzMax":100,
"nzStep":1,
"ngvModel":0,
"hideProgress":false
},
"callback":{
"ngvModel":"rotationZ"
}
}
],
"con":[]
}
}
上例中，我们首先在plugins中添加"threejs"和"jquery"2个插件的引用。
其次在customAttributes下的pro中我们添加了7个样式组件。
第一个尺寸组件用于自定义组件外壳尺寸的控制。其他都是数值文本输入框组件，用于控制3d物体的位移和旋转属性。
关于数值文本输入框的使用，可以查看
html:
<body>
<div id="_#visroot#_" class="_#customWidget#_">
<div id="_#visroot#_child" class="container"></div>
</div>
</body>
js:
(function(options){
var THREE=window.plugins.threejs;
var $=window.plugins.jquery;
return {
$data:{
properties_:null,
camera:null,
mesh:null,
scene:null,
renderer:null,
container:null
},
$methods:{
init(){
$('#_#visroot#_child').css('height',this.properties_.style.height);
$('#_#visroot#_child').css('width',this.properties_.style.width);
},
changeX(){
},
changeY(){
}
changeZ(){
},
rotationX(){
},
rotationY(){
},
rotationZ(){
}
},
$hooks:{
onInit(properties_){
this.properties_=properties_;
this.init();
},
onDestroy(){
},
setData(data,datasourceInfo){
if(datasourceInfo&&data&&data.data){
}
},
outSizeCallBack(info){
if(this.properties_){
$('#_#visroot#_child').css('height',this.properties_.style.height);
$('#_#visroot#_child').css('width',this.properties_.style.width);
}
}
}
}
})
上例中，现在头部引入了threejs和jquery插件，这里要注意声明的变量为THREE。
camera,scene,renderer,mesh,container都是创建3d组件需要的变量。
return对象中添加基础代码，在$methods中添加了自定义回调函数。
接下来进一步在init方法中添加创建3d物体的核心代码。
(function(options){
var THREE=window.plugins.threejs;
var $=window.plugins.jquery;
return {
$data:{
properties_:null,
camera:null,
mesh:null,
scene:null,
renderer:null,
container:null
},
$methods:{
init(){
$('#_#visroot#_child').css('height',this.properties_.style.height);
$('#_#visroot#_child').css('width',this.properties_.style.width);
/*
*
*/
this.container=document.getElementById('_#visroot#_child');
this.camera = new THREE.PerspectiveCamera( 70, this.container.offsetWidth / this.container.clientHeight, 1, 1000 );
this.camera.position.z = 400;
this.scene = new THREE.Scene();
const texture = new THREE.TextureLoader().load( 'http://minio.bdn-sanycloud-iot-qa.rootcloudapp.com/51dhr01/visualization/51DHR01/material/new/custom_component/1/crate.gif' );
const geometry = new THREE.BoxGeometry( 200, 200, 200 );
const material = new THREE.MeshBasicMaterial( { map: texture } );
this.mesh = new THREE.Mesh( geometry, material );
this.scene.add( this.mesh );
this.renderer = new THREE.WebGLRenderer( { antialias: true } );
this.renderer.setPixelRatio( window.devicePixelRatio );
this.renderer.setSize( this.container.offsetWidth, this.container.clientHeight );
this.container.appendChild( renderer.domElement );
window.addEventListener( 'resize', this.onWindowResize.bind(this) );
this.animate();
},
changeX(data){
if(this.mesh){
this.mesh.position.x=data;
}
},
changeY(data){
if(this.mesh){
this.mesh.position.y=data;
}
},
changeZ(data){
if(this.mesh){
this.mesh.position.z=data;
}
},
rotationX(data){
if(this.mesh){
this.mesh.rotation.x=data;
}
},
rotationY(data){
if(this.mesh){
this.mesh.rotation.y=data;
}
},
rotationZ(data){
if(this.mesh){
this.mesh.rotation.z=data;
}
},
onWindowResize(){
this.camera.aspect = this.container.offsetWidth / this.container.clientHeight;
this.camera.updateProjectionMatrix();
this.renderer.setSize( this.container.offsetWidth, this.container.clientHeight );
},
animate() {
requestAnimationFrame( this.animate.bind(this) );
this.renderer.render( this.scene, this.camera );
}
},
$hooks:{
onInit(properties_){
this.properties_=properties_;
this.init();
},
onDestroy(){
},
setData(data,datasourceInfo){
if(datasourceInfo&&data&&data.data){
}
},
outSizeCallBack(info){
if(this.properties_){
$('#_#visroot#_child').css('height',this.properties_.style.height);
$('#_#visroot#_child').css('width',this.properties_.style.width);
this.onWindowResize();
}
}
}
}
})
上例中在init方法中增加了3d物体创建的代码，同时在回调函数中增加了对3d属性的控制。
同时在$methods方法中又增加了用于侦听窗口尺寸变化的自定义函数onWindowResize，和用于更新渲染的animate函数。