ThreeJs开发（移动，旋转，相机，纹理，鼠标事件等源代码）

共13个文件

html：9个

js：2个

jpg：2个

threejs

webgl

鼠标事件

4星 · 超过85%的资源需积分: 50 48 浏览量 2014-11-16 19:31:15 上传评论 9 收藏 194KB RAR 举报

资源详情

资源评论

资源推荐

收起资源包目录

ThreeTest.rar （13个子文件）

ThreeTest

cube7.html 3KB

index.html 2KB

cube9.html 5KB

cube.html 3KB

images

img1.jpg 37KB

img2.jpg 42KB

scripts

three.min.js 406KB

jquery-1.7.1.min.js 92KB

cube2.html 2KB

cube4.html 3KB

cube6.html 3KB

cube5.html 3KB

cube8.html 3KB

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>鼠标事件 cube</title> <script src="scripts/three.min.js"></script> <script src="scripts/jquery-1.7.1.min.js"></script> <style type="text/css"> div#canvas-frame{ border: none; cursor: pointer; width: 800px; height: 600px; background-color: #808080; } </style> <script> // 事件名意思 // onmousedown 鼠标被按下的时候 // onmouseup 鼠标弹上的时候 // onmousemove 鼠标移动的时候 // onmouseover 鼠标移动到物体的上面的时候 // onmouseout 鼠标从物体上面移出物体范围的时候 //window.onmousedown = function (ev){ // var x1 = ev.clientX; //マウスのx座標（ブラウザ上の座標）の取得 // var y1 = ev.clientY; //マウスのy座標（ブラウザ上の座標）の取得 // var x2 = ev.screenX; //マウスのx座標（ディスプレイ上の座標）の取得 // var y2 = ev.screenY; //マウスのy座標（ディスプレイ上の座標）の取得 //} var width, height; var renderer; function initThree() { width = document.getElementById('canvas-frame').clientWidth; height = document.getElementById('canvas-frame').clientHeight; renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setSize(width, height ); document.getElementById('canvas-frame').appendChild(renderer.domElement); renderer.setClearColorHex(0xFFFFFF, 1.0); renderer.shadowMapEnabled = true;//影をつける(1) } var camera; function initCamera() { camera = new THREE.PerspectiveCamera( 45 , width / height , 1 , 10000 ); camera.position.x = 400; camera.position.y = 400; camera.position.z = 180; camera.up.x = 0; camera.up.y = 0; camera.up.z = 1; camera.lookAt( {x:0, y:0, z:0 } ); } var scene; function initScene() { scene = new THREE.Scene(); } var light; function initLight() { light = new THREE.DirectionalLight(0xFFFFFF, 1.0, 0); light.position.set( 100, 100, 300 ); light.castShadow = true;//影をつける（2） scene.add(light); } var cube = Array(); var plane; function initObject(){ for(var i=0; i<3; i++){ cube[i] = new THREE.Mesh( new THREE.CubeGeometry(50,50,50), new THREE.MeshLambertMaterial({color: 0xff0000, ambient:0xFF0000}) ); cube[i].castShadow = true;//影をつける（3） scene.add(cube[i]); cube[i].position.set(0,-100+100*i,0); } plane = new THREE.Mesh( new THREE.PlaneGeometry(1000,1000,10), new THREE.MeshLambertMaterial({color: 0x008000}) ); plane.receiveShadow = true; //影をつける（4） scene.add(plane); plane.position.set(0,0,-100);//让地面在下面 } var t=0; function loop() { t++; renderer.clear(); cube[0].rotation.set( t/50, 0, 0 ); cube[1].rotation.set( 0, t/75, 0 ); cube[2].rotation.set( 0, 0, t/100 ); //camera.position.set( 400*Math.cos(t/100), 400*Math.sin(t/200), 50*Math.cos(t/50)); //camera.lookAt( {x:0, y:0, z:0 } ); renderer.render(scene, camera); window.requestAnimationFrame(loop); } function threeStart() { initThree(); initCamera(); initScene(); initLight(); initObject(); loop(); //renderer.clear(); //renderer.render(scene,camera); } var down = false; var sy = 0, sz = 0; window.onmousedown = function (ev){ //マウスダウン if (ev.target == renderer.domElement) { down = true; sy = ev.clientX; sz = ev.clientY; } }; window.onmouseup = function(ev){ //マウスアップ down = false; if(ev.MeshBasicMaterial = cube[0]) { cube[0] = new THREE.Mesh( new THREE.CubeGeometry(50,50,50), new THREE.MeshLambertMaterial({color: 0x0000ff, ambient:0x00FF00}) ); } }; window.onmousemove = function(ev) { //マウスムーブ var speed = 2; if (down) { if (ev.target == renderer.domElement) { var dy = -(ev.clientX - sy); var dz = -(ev.clientY - sz); camera.position.y += dy*speed; camera.position.z -= dz*speed; sy -= dy; sz -= dz; } } } window.onmousewheel = function(ev){ //マウスホイール var speed = 0.2; camera.position.x += ev.wheelDelta * speed ; } </script> </head> <body onload="threeStart();"> <div id="canvas-frame"></div> </body> </html>