<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - OBJLoader + MTLLoader</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: white;
margin: 0px;
overflow: hidden;
}
#container{
margin-top: 10px;
margin-left: 10px;
/*width: 100%;*/
/*height: 100%;*/
background-color: #008800;
}
#message{
font-family: '微软雅黑';
width: 250px;
height: 150px;
border: 1px solid gray;
border-radius: 10px;
background-color: rgba(2,2,2,0.7);
color: white;
display: none;
}
#message h4{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
margin-top: 0px;
padding-left: 8px;
color: white;
height: 30px;
line-height: 30px;
background-color: #688f70;
}
#message h5{
margin: 1px 1px 1px 8%;
font-size: 15px;
}
#close{
width: 35px;
color: white;
float: right;
cursor: pointer;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="makeShapeJs/jquery-1.5.1.min.js"></script>
<script src="makeShapeJs/three.js"></script>
<script src="makeShapeJs/DDSLoader.js"></script>
<script src="makeShapeJs/MTLLoader.js"></script>
<script src="makeShapeJs/OBJLoader.js"></script>
<script src="makeShapeJs/Detector.js"></script>
<script src="makeShapeJs/stats.min.js"></script>
<script src="makeShapeJs/OrbitControls.js"></script>
<script src="makeShapeJs/dat.gui.js"></script>
<script>
var container, stats;
var camera, scene, renderer,raycaster;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var controlsEnabled = true;
var moveForward = false;
var moveBackward = false;
var flag ;
var dummy= new THREE.Object3D();//仿制品
init();
animate();
function init() {
container = document.getElementById('container');
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 469;
// scene
scene = new THREE.Scene();
var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
scene.add( ambientLight );
var pointLight = new THREE.PointLight( 0xffffff, 0.4);
camera.add( pointLight );
scene.add( camera );
scene.background = new THREE.Color( 0xdbdbdb );
//
if ( Detector.webgl )
renderer = new THREE.WebGLRenderer( {antialias:true} );
else
renderer = new THREE.CanvasRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
raycaster = new THREE.Raycaster();//光线投射，用于确定鼠标点击位置
// model
addModel('model/','channel/text');
addModel('model/','channel/zoulang2');
//
// var controls = new THREE.OrbitControls( camera, renderer.domElement );
//用键盘控制场景移动
var onKeyDown = function (event){
switch (event.keyCode){
case 38:case 87:moveForward = true;break;
case 40:case 83:moveBackward = true;break;
}
}
var onKeyUp = function (event){
switch (event.keyCode){
case 38:case 87:moveForward = false;break;
case 40:case 83:moveBackward = false;break;
}
}
document.addEventListener('keydown',onKeyDown,false);
document.addEventListener('keyup',onKeyUp,false);
document. addEventListener('click',ray);// 监听窗口鼠标单击事件
function ray(event) {
var Sx = event.clientX;//鼠标单击位置横坐标
var Sy = event.clientY;//鼠标单击位置纵坐标
//屏幕坐标转标准设备坐标
var x = ( Sx / window.innerWidth ) * 2 - 1;//标准设备横坐标
var y = -( Sy / window.innerHeight ) * 2 + 1;//标准设备纵坐标
var standardVector = new THREE.Vector3(x, y, 0.5);//标准设备坐标
//标准设备坐标转世界坐标
var worldVector = standardVector.unproject(camera);
//射线投射方向单位向量(worldVector坐标减相机位置坐标)
var ray = worldVector.sub(camera.position).normalize();
//创建射线投射器对象
var raycaster = new THREE.Raycaster(camera.position, ray);
//返回射线选中的对象
var objChildren = scene.children;
// console.dir(objChildren);
if(objChildren[3]&&objChildren[3].visible ||(objChildren[2]&&objChildren[2].visible)) {
// console.log(objChildren[2].children);
var meshChildren;
if(objChildren[3].visible){
meshChildren = objChildren[3].children;
}
if(objChildren[2].visible){
meshChildren = objChildren[2].children;
}
}
var intersects = raycaster.intersectObjects(meshChildren);
if (intersects.length > 0) {
// intersects[0].object.material.transparent = true;
// intersects[0].object.material.opacity = 0.4;
var meshName = intersects[0].object.name;
// console.log(meshName);
if(meshName.indexOf('Line')>=0){
sceneMove();
}
if(meshName == 'Pivot001'){
//场景转换
sceneChange(intersects[0].object);
}
//绑点
if(meshName.indexOf('Torus')>=0){
showInformation(intersects[0].object,event);
}
}
else{
console.log(intersects);
if(camera.position.z <250){
window.location.href = 'channelModel.html'
}
}
}
}
//场景移动
function sceneMove(){
if(camera.position.z >= 469){
window.location.href = 'channelModel.html'
}
else{
if(camera.position.z >= -348){
camera.position.z -=0.3;
}
}
}
//场景切换
function sceneChange(meshChildren){
//门打开，场景前进，切换
meshChildren.position.set(-100,0,0);
// meshChildren.rotation.y+=0.1*Math.PI;
camera.position.z -=1.5;
setTimeout(function(){
console.dir(scene.children);
camera.position.set(0,0,469);
// if(scene.children[2].visible){
//// scene.remove(scene.children[2]);
// scene.children[2].visible = false;
// scene.children[3].visible = true;
// }
// if(scene.children[3].visible){
//// scene.remove(scene.children[3]);
// scene.children[3].visible = false;
// scene.children[2].visible = true;
// }
//// scene.children[2].visible = true;
// flag = true;
window.location.href = 'oldChannelModel.html'
},500);
WebGL.rar （14个子文件） 
WebGL makeShapeJs 
MTLLoader.js 11KB three.js 1.01MB DDSLoader.js 6KB OrbitControls.js 22KB stats.min.js 2KB dat.gui.js 95KB jquery-1.5.1.min.js 83KB Detector.js 2KB OBJLoader.js 17KB model channel zoulang2.mtl 1KB zoulang2.obj 2.04MB text.obj 2.64MB text.mtl 529B
channelModel.html 12KB
- 1
- 2
- 3
前往页