vesh-vj
Version:
VESH's JavaScript Framework
333 lines (317 loc) • 12.2 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;
}
.p_hovers{
cursor:pointer;
}
#desc {
width: 430px;
height: 420px;
position:absolute;
display:none;
overflow:hidden;
border: solid 1px #eee;
}
#desc iframe {
position:absolute;
width:2000px;
height:2000px;
top: -338px;
left: -843px;
}
</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:[],
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/01.jpg','720/03.jpg','720/05.jpg','720/06.jpg','720/04.jpg','720/02.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',image:"720/21-127-7023.jpg",width:100,height:174,color:{rgb:0xffffff,opacity:1},position:{z:499,x:-340,y:115},rotate:{y:180}},
onLoad:function(D,I){
var start = 0;
I.update({play1:function(D,I){
I.update({rotate:{z:D.rotate.z+=1}});
}});
var _this = this;
},
onHover:function(D,I){
console.log('pancan1 hover:'+D.hover);
if(this.movie.data.down) return;
if(D.hover){
I.update({play:false,scale:{x:1.1,y:1.1,z:1.1},'2dposition':function(pos){
V.callCommand('test6.info',[pos,D.width,'http://item.yintai.com/21-127-7023.html']);
}});
this.movie.update({addclass:'p_hovers',attr:{title:'21-127-7023'}});
}else{
I.update({play:true,scale:{x:1,y:1,z:1}});
this.movie.update({removeclass:'p_hovers',attr:{title:''}});
V.callCommand('test6.hide');
}
},
onClick:function(D,I){//alert('点到我了');
window.open('http://item.yintai.com/21-127-7023.html');
},
onMouseUp:function(D,I){console.log('object2 mouseup:');},
onMouseDown:function(D,I){console.log('object2 mousedown:');}
},
'p21-119-2299':{
data:{image:"720/21-119-2299.jpg",width:160,height:263,position:{x:-499,z:-40,y:80},rotate:{y:90}},
onHover:function(D,I){
console.log('p21-119-2299 hover:'+D.hover);
if(this.movie.data.down) return;
if(D.hover){
I.update({play:false,scale:{x:1.1,y:1.1,z:1.1},'2dposition':function(pos){
V.callCommand('test6.info',[pos,D.width,'http://item.yintai.com/21-119-2299.html']);
}});
this.movie.update({addclass:'p_hovers',attr:{title:'21-119-2299'}});
}else{
I.update({play:true,scale:{x:1,y:1,z:1}});
this.movie.update({removeclass:'p_hovers',attr:{title:''}});
V.callCommand('test6.hide',[]);
}
},
onClick:function(D,I){//alert('点到我了');
window.open('http://item.yintai.com/21-119-2299.html');
}
},
'p21-134-0822':{
data:{image:"720/21-134-0822.jpg",width:140,height:222,position:{z:-499,x:-98,y:115}},
onHover:function(D,I){
console.log('21-134-0822 hover:'+D.hover);
if(this.movie.data.down) return;
if(D.hover){
I.update({play:false,scale:{x:1.1,y:1.1,z:1.1},'2dposition':function(pos){
V.callCommand('test6.info',[pos,D.width,'http://item.yintai.com/21-134-0822.html']);
}});
this.movie.update({addclass:'p_hovers',attr:{title:'21-134-0822'}});
}else{
I.update({play:true,scale:{x:1,y:1,z:1}});
this.movie.update({removeclass:'p_hovers',attr:{title:''}});
V.callCommand('test6.hide',[]);
}
},
onClick:function(D,I){//alert('点到我了');
window.open('http://item.yintai.com/21-134-0822.html');
}
},
'p21-134-0859':{
data:{image:"720/21-134-0859.jpg",width:100,height:170,position:{x:499,z:320,y:100},rotate:{y:-90}},
onHover:function(D,I){
console.log('21-134-0859 hover:'+D.hover);
if(this.movie.data.down) return;
if(D.hover){
I.update({play:false,scale:{x:1.1,y:1.1,z:1.1},'2dposition':function(pos){
V.callCommand('test6.info',[pos,D.width,'http://item.yintai.com/21-134-0859.html']);
}});
this.movie.update({addclass:'p_hovers',attr:{title:'21-134-0859'}});
}else{
I.update({play:true,scale:{x:1,y:1,z:1}});
this.movie.update({removeclass:'p_hovers',attr:{title:''}});
V.callCommand('test6.hide',[]);
}
},
onClick:function(D,I){//alert('点到我了');
window.open('http://item.yintai.com/21-134-0859.html');
}
},
desc:{
onLoad:function(D,I){
var _this = this;
V.registCommand('test6.info',function(pos,width,url){
pos.x = (pos.x+width/2+430)>_this.movie.data.size.width?(pos.x-430-width*2/3):(pos.x+width*2/3);
I.update({show:'fadeIn',css:{left:pos.x,top:_this.movie.data.size.height*0.2},value:{url:url}});
});
V.registCommand('test6.hide',function(pos,url){
console.log('hide');
I.update({hover:false});
V.once(function(){
if(!D.hover) I.update({hide:'fadeOut'});
},200);
});
},
onHover:function(D,I){
console.log('hover');
if(!D.hover){
I.update({hide:'fadeOut'});
}
}
},
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){
console.log('resize');
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>
<tobject id="p21-119-2299" _=""></tobject>
<tobject id="p21-134-0822" _=""></tobject>
<tobject id="p21-134-0859" _=""></tobject>
</div>
<div id="desc" _="type:'fill'">
<iframe src="{url}"></iframe>
</div>
</div>
</body>
</html>