three-onevent
Version:
three.js Event Listener for click,gaze and so on
166 lines (162 loc) • 4.88 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no">
<title>three-onEvent</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,body {
height: 100%;
}
body {
font-size: 14px;
font-family: "Arial","Microsoft YaHei","黑体",sans-serif;
overflow: hidden;
}
.main-page {
position: relative;
height: 100%;
}
</style>
</head>
<body>
<section class="main-page">
</section>
<script src="./lib/three.min.js"></script>
<script src="./lib/OrbitControls.js"></script>
<script src="./onEvent.js"></script>
<script>
/**
** author:YorkChan
** date:2016-12-18
**/
function Page() {
this.init();
}
Page.prototype = {
init: function() {
var self = this;
// 初始化场景
this.scene = new THREE.Scene();
// 初始化相机
this.camera = new THREE.PerspectiveCamera(70,window.innerWidth/window.innerHeight,0.1,4000);
this.camera.position.set( 0, 0, 5 );
this.scene.add(this.camera);
// 初始化渲染器
this.renderer = new THREE.WebGLRenderer({ antialias: true } );
this.renderer.setSize(window.innerWidth,window.innerHeight);
this.renderer.setClearColor(0x519EcB);
this.renderer.shadowMapEnabled = true;
this.renderer.setPixelRatio(window.devicePixelRatio);
document.querySelector('.main-page').appendChild(this.renderer.domElement);
var controls = new THREE.OrbitControls( this.camera, this.renderer.domElement );
this.threeOnEvent = new THREE.onEvent(this.scene,this.camera);
// create light
this.createLight();
// create ground
this.createGround(1000,1000);
// create cube
this.createCube();
this.createSphere();
// window resize listener
this.resize();
this.render();
},
resize: function() {
var self = this;
window.addEventListener( 'resize', function() {
// update when resizing
self.camera.aspect = window.innerWidth / window.innerHeight;
self.camera.updateProjectionMatrix();
self.renderer.setSize( window.innerWidth, window.innerHeight );
}, false );
},
createCube: function () {
// create a cube
var geometry = new THREE.CubeGeometry( 20,20,20);
var material = new THREE.MeshLambertMaterial( { color: 0xef6500,needsUpdate: true,opacity:1,transparent:true} );
this.Cube = new THREE.Mesh( geometry, material );
this.Cube.position.set(20,0,-50);
this.Cube.castShadow = true;
this.scene.add(this.Cube);
// add hover listener
this.Cube.on('hover',function(m) {
m.material.opacity = 0.5;
},function(m) {
m.material.opacity = 1;
});
},
createSphere: function () {
// create a ball
var geometry = new THREE.SphereGeometry( 10,20,20);
var material = new THREE.MeshLambertMaterial( { color: 0xef6500,needsUpdate: true,opacity:1,transparent:true} );
var ball = new THREE.Mesh( geometry, material );
ball.position.set(-20,0,-50);
ball.castShadow = true;
this.scene.add(ball);
var isclick = false;
// add click listener
// add hover listener
ball.on('hover',function(m) {
document.body.style.cursor = 'pointer';
m.material.opacity = 0.5;
},function(m) {
m.material.opacity = 1;
document.body.style.cursor = 'initial';
});
ball.on('click',function(m) {
if(!isclick) {
m.position.y = 5;
m.scale.set(1.5,1.5,1.5);
isclick = true;
} else {
m.position.y = 0;
m.scale.set(1,1,1);
isclick = false;
}
});
},
createLight: function() {
this.scene.add(new THREE.AmbientLight(0xFFFFFF));
var light = new THREE.DirectionalLight( 0xffffff, 0.3 );
light.position.set( 50, 50, 50 );
light.castShadow = true;
light.shadow.mapSize.width = 2048;
light.shadow.mapSize.height = 512;
light.shadow.camera.near = 100;
light.shadow.camera.far = 1200;
light.shadow.camera.left = -1000;
light.shadow.camera.right = 1000;
light.shadow.camera.top = 350;
light.shadow.camera.bottom = -350;
this.scene.add( light );
},
createGround: function(width,height) {
var geometry = new THREE.PlaneBufferGeometry( width, height );
var material = new THREE.MeshPhongMaterial( { color: 0xaaaaaa } );
var ground = new THREE.Mesh( geometry, material );
ground.rotation.x = - Math.PI / 2;
ground.position.y = -10;
ground.receiveShadow = true;
this.scene.add( ground );
},
render: function() {
// render
var self = this;
var render = function() {
self.Cube.rotation.y += 0.01;
self.renderer.render(self.scene, self.camera);
// self.threeOnEvent.update(); // gaze event needed
requestAnimationFrame(render);
}
render();
}
};
new Page();
</script>
</body>
</html>