vesh-vj
Version:
VESH's JavaScript Framework
253 lines (250 loc) • 9.94 kB
HTML
<html>
<head>
<meta name="renderer" content="webkit" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="Add multi-touch gestures to your webpage.">
<title>VJ test</title>
<script src="../../../2.0/ref/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="../../../2.0/VJ.js" type="text/javascript"></script>
<script src="../../../config.js" type="text/javascript"></script>
<script src="../../../ni.js" type="text/javascript"></script>
<style type="text/css">
.animate {
transition: all 0.3s;
-webkit-animation-timing-function: ease;
}
</style>
<script type="text/javascript">
if(false){
$(function(){
VJ.include('three.min.js');
var scene = new THREE.Scene();
console.log(window.innerWidth/window.innerHeight);
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 10000);
camera.lookAt({x:0,y:0,z:0});
camera.position.z = 500;
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
console.log(renderer);
var geometry = new THREE.CubeGeometry(100,100,100);
var mats = [];
for(var i=0;i<6;i++) {
var map = THREE.ImageUtils.loadTexture('720/img'+i+'.jpg');
map.wrapS = map.wrapT = THREE.ClampToEdgeWrapping;
mats.push(new THREE.MeshBasicMaterial({color:0xffffff,opacity:0.5,map:map,side:THREE.DoubleSide}));
}
var material = new THREE.MeshFaceMaterial(mats);
var cube = new THREE.Mesh(geometry, material);
cube.position.set(-200,0,0);
cube.rotation.set(1,0,0);
scene.add(cube);
function render() {
requestAnimationFrame(render);
//cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
//cube.rotation.z += 0.1;
renderer.render(scene, camera);
}
var geometry2 = new THREE.CubeGeometry(100,100,100);
var material2 = new THREE.MeshBasicMaterial({color: 0x0000ff});
var cube2 = new THREE.Mesh(geometry2, material2);
cube2.position.set(200,0,0);
cube2.rotation.set(1,0,0);
scene.add(cube2);
function render2() {
requestAnimationFrame(render2);
//cube2.rotation.x += 0.1;
cube2.rotation.y -= 0.1;
//cube2.rotation.z += 0.1;
renderer.render(scene, camera);
}
VJ.once(function(){
render();
render2();
},1000);
console.log(scene);
});
}
else
(function(V,M,$,cm,W){
new function(){
var _=this,__={};
{
cm = V.merge(cm,{
Middler:{
'VESH.view':{
tmovie:{path:'../three/three.min.js;../three/stats.min.js;../three/Projector.js;../three/CanvasRenderer.js;../three/tc.js',params:['',{data:{stats:false}}]},
tobject:{path:'../three/three.min.js;../three/stats.min.js;../three/tobj.js',params:["",{data:{debug:true}}]}
}
}
});
V.isDebug = true;
V.inherit.apply(_,[M.Page,[cm,{
movie:{
data:{
desc:true,
stats: true,
camera:{left:200,right:200,top:200,bottom:200,angle:90,near:0.1,far:20000,position:{y:0},look:{x:0,y:0,z:0}},
lights1:[{type:'Ambient',color:{rgb:0xffffff,opacity:1},position:{x:100,y:100,z:200}}],
lights:[],
render:{type1:'canvas'},
xs:-90,ys:0
},
onLoad:function(D,I){
V.registEvent('test.resize',function(size){
I.update({size:size});
});
var d2d = $('#div2D');
I.call('MouseUp');
},
onMouseDown:function(D,I){
console.log('mousedown');
I.update({down:true,play:false,start:D.D2Position});
V.once(function(){
I.update({play:function(D2,I2){
if(D2.camera.look){
//计算距离
var xdis = Math.abs(D2.D2Position.x-D2.start.x);
var ydis = Math.abs(D2.D2Position.y-D2.start.y);
//获取步长
var ystep = ydis>xdis?((D2.D2Position.y-D2.start.y)/D2.size.height*10):0;
var xstep = Math.max(-90,Math.min(90,(ydis<xdis?((D2.D2Position.x-D2.start.x)/D2.size.width*10):0)));
//计算最终结果 x直接旋转 y轴只能上下90度
var ys = Math.max(-90,Math.min(90,((D2.ys?D2.ys:0)-ystep)));
var xs = (D2.xs?D2.xs:-90)+xstep;
I.update({ys:ys,xs:xs,start:D.D2Position,camera:{look:{x:100*Math.cos(xs*Math.PI/180),z:100*Math.sin(xs*Math.PI/180),y:100*Math.sin(ys*Math.PI/180)}}});
/*
if(this.pancan1 && this.pancan1.update)
this.pancan1.update({'2dposition1':function(pos){
//非常耗运算 计算对应对象的2d地址
d2d.css('top',pos.y).css('left',pos.x);
}});*/
}
}});
},10)
},
onMouseUp:function(D,I){
console.log('mouseup');
I.update({down:false,play:false,start:false});
V.once(function(){
I.update({play:function(D2,I2){
var xs = D2.xs+0.1;
I.update({xs:xs,start:D.D2Position,camera:{look:{x:100*Math.cos(xs*Math.PI/180),z:100*Math.sin(xs*Math.PI/180),y:D2.camera.look.y}}});
}});
},200);
},
onClick:function(D,I){
console.log('click');
I.update({down:false,play:false,start:false},100);
}
},
object:{
data:{debug:false,side:2,type:'cube',style:'basic',vedio1:'720/home0.mp4',vedio1:['720/home0.mp4','720/home1.mp4','720/home2.mp4','720/home3.mp4','720/home4.mp4','720/home5.mp4'],image:['720/img0.jpg','720/img2.jpg','720/img4.jpg','720/img5.jpg','720/img3.jpg','720/img1.jpg'],width:-1000,height:-1000,deepth:-1000,rotate:{z:180,y:90},color:{rgb:0xffffff,opacity:1}},
onLoad:function(D,I){
var start = 0;
I.update({play1:function(D,I){start+=2;
I.update({rotate:{x1:D.rotate.x+=1,y:D.rotate.y-=0.4,z1:D.rotate.z+=1}});
}});
},
onMouseDown:function(D,I){I.update({play:false});},
onMouseUp:function(D,I){I.update({play:true});},
},
pancan1:{
data:{visible:true,side:0,type:'plane',style:'basic',width:200,height:80,color:{rgb:0xff0000,opacity:1},position:{z:-499}},
onLoad:function(D,I){
var start = 0;
I.update({play:function(D,I){
I.update({rotate:{z:D.rotate.z+=1}});
}});
var _this = this;
V.once(function(){
I.update({'2dposition1':function(pos){
console.log(pos);
}});
},4000);
},
onHover:function(D,I){
console.log('pancan1 hover:'+D.hover);
if(D.hover){
I.update({play:false,scale:{x:1.1,y:1.1,z:1.1}});
}else{
I.update({play:true,scale:{x:1,y:1,z:1}});
}
},
onClick:function(D,I){//alert('点到我了');
console.log('点到我了!');
},
onMouseUp:function(D,I){console.log('object2 mouseup:');},
onMouseDown:function(D,I){console.log('object2 mousedown:');}
},
object1:{
data:{debug:false,side:2,type:'cube',style:'phong',image2:'720/img0.jpg',image:['720/img0.jpg','720/img1.jpg','720/img2.jpg','720/img3.jpg','720/img4.jpg','720/img5.jpg'],width:300,height:300,deepth:300,color:{rgb:0xffffff,opacity:0.5},position:{x:200},rotate:{y:90}},
onLoad:function(D,I){
var start = 0;
I.update({play:function(D,I){start+=2;
I.update({rotate:{x1:D.rotate.x+=1,y:D.rotate.y-=2,z1:D.rotate.z+=1},position:{x:300*Math.cos(start*2*Math.PI/360)+500,z:300*Math.sin(start*2*Math.PI/360)-300}});
}});
},
onHover:function(D,I){console.log('object hover:'+D.hover);}
},
object2:{
data:{debug:false,isStop:false,type:'cylinder',style:'phong',radius:[200,250],height:80,color:{rgb:0xff0000,opacity:1},position:{x:-600,y:0,z:-100}},
onLoad:function(D,I){
var start = 0;
I.update({play:function(D,I){
I.update({rotate:{x:D.rotate.x+=2,y1:D.rotate.y+=2,z1:D.rotate.z+=2}});
return D.isStop;
}});
},
onHover:function(D,I){
console.log('object2 hover:'+D.hover);
if(D.hover){
I.update({play:false});
}else{
I.update({play:true});
}
},
onClick:function(D,I){console.log('object2 click:');},
onMouseUp:function(D,I){console.log('object2 mouseup:');},
onMouseDown:function(D,I){console.log('object2 mousedown:');}
},
object3:{
data:{debug:false,type:'line',style:'line',color:[{rgb:0xff0000,opacity:1},{rgb:0xffaa00,opacity:1}],position:{x:0,y:0,z:0},points:[{x:-100,y:-100,z:0},{x:100,y:100,z:0}],width:5},
onLoad:function(D,I){
I.update({play:function(D,I){
I.update({rotate:{x1:D.rotate.x+=6,y1:D.rotate.y+=6,z:D.rotate.z+=6}});
}});
},
onHover:function(D,I){console.log('object3 hover:'+D.hover);}
},
page:{
data:{
title:'VJ threejs控件测试页面aa'
},
onStart:function(D,I){
//V.tryC(function(){I.v.middler.getObjectByAppName('VESH.view','map')});
V.callEvent('test.resize',[{width:V.userAgent.width,height:V.userAgent.height}]);
},
onSize:function(D,I){
V.callEvent('test.resize',[{width:D.width,height:D.height}]);
}
}
}]]);
}
};
})(VJ,VJ.viewmodel,jQuery,window.top.config,VJ.view);
</script>
</head>
<body>
<div style="width:100%;height:100%;position:absolute;top:0px;left:0px;display:block;">
<div id="movie" _="type:'tmovie'">
<tobject id="object" _=""></tobject>
<tobject id="pancan1" _=""></tobject>
</div>
</div>
</body>
</html>