<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - loaders - X-File loader</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 {
color: #ffffff;
font-family:Monospace;
font-size:13px;
text-align:center;
background-color: #000000;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="canvase3d"></div>
<script src='three.js'></script>
<script src='OrbitControls.js'></script>
<script src='XLoader.js'></script>
<script src='Detector.js'></script>
<script src='stats.min.js'></script>
<script src='dat.gui.min.js'></script>
<script src='BoxGeometry.js'></script>
<script src='SpotLight.js'></script>
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();//检测当前浏览器是否支持或者开启了WEBGL
var container, stats, controls;
var camera, scene, renderer;
var clock = new THREE.Clock();
var mixers = [];
var manager = null;
var Texloader = null;
var skeletonHelper = null;
var animates = [];
var actions = [];
var Models = [];
init();
/*var onProgress = function ( xhr ) {
if ( xhr.lengthComputable ) {
var percentComplete = xhr.loaded / xhr.total * 100;
console.log( Math.round( percentComplete, 2 ) + '% downloaded' );
}
};*/
/*var onError = function ( xhr ) {};*/
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
scene = new THREE.Scene();
scene.add( new THREE.AmbientLight( 0xaaaaaa ) );
renderer = new THREE.WebGLRenderer();//使用webgl绘制场景，提高渲染性能
renderer.setPixelRatio( window.devicePixelRatio );//设置当前设备的像素比
renderer.setSize( window.innerWidth, window.innerHeight );//调整输出canvas尺寸
renderer.setClearColor( 0x666666 );//设置清除色
container.appendChild( renderer.domElement );
renderer.shadowMapEnabled = true;//在初始化时告诉渲染器去渲染阴影
renderer.shadowMapSoft = true;//软阴影
camera = new THREE.PerspectiveCamera( 20, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 10, 10, 12 );
camera.up.set( 0, 1, 0 );
//OrbitControls用鼠标控制场景，鼠标旋转，滚轮缩放
controls = new THREE.OrbitControls( camera, renderer.domElement );
//旋转的中心
controls.target.set( 0, 5, 0 );
controls.update();
/* var light = new THREE.SpotLight(0xffff00, 1, 100, Math.PI / 6, 25);
light.position.set(2, 5, 3);
light.target = desk;
light.castShadow = true;
light.shadowCameraNear = 2;
light.shadowCameraFar = 10;
light.shadowCameraFov = 30;
light.shadowCameraVisible = true;
scene.add( light );*/
var light2 = new THREE.DirectionalLight( 0x777666, 1 );
light2.position.set( - 1, - 1, - 1 ).normalize();
scene.add( light2 );
window.addEventListener( 'resize', onWindowResize, false );
animate();
// grid
/*var gridHelper = new THREE.GridHelper( 14, 1, 0x303030, 0x303030 );
scene.add( gridHelper );*/
var floor_geometry = new THREE.BoxGeometry( 36, 1, 30 );
/*var texture = new THREE.TextureLoader().load("floor.jpg");
var material = new THREE.MeshBasicMaterial( {map:texture, side: THREE.DoubleSide,color: 0xDAF0F5} );*/
var floor_material = new THREE.MeshBasicMaterial( {color: 0xDAF0F5} );
var floor = new THREE.Mesh( floor_geometry, floor_material );
floor.receiveShadow = true;//接收光源
scene.add( floor );
var slope_geometry = new THREE.BoxGeometry(5,1,4);
var slope_material = new THREE.MeshBasicMaterial({color: 0x000000});
var slope = new THREE.Mesh( slope_geometry, slope_material );
slope.position.x = -10;
slope.position.z = 13;
slope.position.y = -0.5;
slope.rotation.x = 0.24;
scene.add( slope );
var desk_geometry = new THREE.BoxGeometry(6,1,1.5);
var desk_material = new THREE.MeshBasicMaterial({color: 0xD6E4EC});
var desk = new THREE.Mesh( desk_geometry, desk_material );
desk.position.x = 10;
desk.position.z = -12;
desk.position.y = 1;
desk.castShadow = true;//产生光源
scene.add( desk );
var walll_geometry = new THREE.BoxGeometry(1,10,30);
var walll_material = new THREE.MeshBasicMaterial({color: 0xffffff});
var walll = new THREE.Mesh( walll_geometry, walll_material );
walll.position.x = -17.5;
walll.position.y = 5.5;
scene.add( walll );
var wallr_geometry = new THREE.BoxGeometry(1,10,30);
var wallr_material = new THREE.MeshBasicMaterial({color: 0xffffff});
var wallr = new THREE.Mesh( wallr_geometry, wallr_material );
wallr.position.x = 17.5;
wallr.position.y = 5.5;
scene.add( wallr );
// stats
/*
stats = new Stats();
container.appendChild( stats.dom );*/
// model loading
/* manager = new THREE.LoadingManager();
manager.onProgress = function ( item, loaded, total ) {
console.log( item, loaded, total );
};*/
/*Texloader = new THREE.TextureLoader();
var loader = new THREE.XLoader( manager, Texloader );
actions[ 0 ] = {};*/
//download Model file
/* loader.load( [ 'models/xfile/SSR06_model.x' ], function ( object ) {
for ( var i = 0; i < object.models.length; i ++ ) {
var model = object.models[ i ];
model.scale.x *= - 1;
Models.push( model );
}
loadAnimation( 'stand', 0, () => {
scene.add( Models[ 0 ] );
if ( Models[ 0 ] instanceof THREE.SkinnedMesh ) {
skeletonHelper = new THREE.SkeletonHelper( Models[ 0 ] );
scene.add( skeletonHelper );
}
actions[ 0 ][ 'stand' ].play();
} );
object = null;
}, onProgress, onError );*/
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
var delta = clock.getDelta();
if ( animates != null && animates.length > 0 ) {
for ( var i = 0; i < animates.length; i ++ ) {
animates[ i ].update( delta * 1000 );
}
}
/*stats.update();*/
render();
}
function render() {
datacenter demo.zip_3d 机房_3d机房_finalw2q_three.js 3d机房_threejs 3
版权申诉
5星 · 超过95%的资源 142 浏览量
2022-07-13
22:19:24
上传
评论 1
收藏 26.32MB ZIP 举报 
datacenter demo.zip （76个子文件） 
datacenter demo 
stats.min.js 2KB res 
fire_extinguisher_side.jpg 38KB rack.jpg 36KB
card5.png 24KB temperature.png 1KB water.png 1KB white.png 146B worker.png 1.36MB alert.png 12KB rack_inside.jpg 17KB edit.png 1KB card1.png 7KB air.png 1KB security.png 1KB tv.jpg 101KB card_body.png 163KB
test.mp4 21.95MB floor.jpg 8KB room.jpg 22KB server1.jpg 22KB arrow.png 4KB worker.mtl 345B space.png 1KB metal.png 42KB smoke.png 1KB fps.png 1KB card3.png 18KB close.png 1KB rack_front_door.jpg 148KB usage.png 1KB flow.jpg 19KB rack_door_back.jpg 140KB door_left.png 137KB alarm.png 1KB card4.png 20KB door_right.png 131KB down.png 9KB power.png 1KB inside_lightmap.jpg 6KB rack_inside_normal.jpg 48KB card_panel.png 5KB server3.png 33KB worker.obj 264KB eee.png 114KB outside_lightmap.jpg 6KB camera.png 191KB lock.png 183KB rack_panel.jpg 16KB post.jpg 137KB card2.png 9KB plant.png 66KB reset.png 1KB connection.png 1KB smoking.png 14KB lock.jpg 21KB server2.jpg 37KB bbb.png 44KB rail.png 10KB metal_normalmap.jpg 69KB temp1.jpg 86KB person.png 1KB gray.png 3KB three.js 1.02MB
demo2.html 3KB floor.jpg 52B Detector.js 2KB index.html 364B SpotLight.js 2KB room.js 2.16MB OrbitControls.js 22KB demo3.html 11KB XLoader.js 39KB style.css 1KB three.min.js 516KB dat.gui.min.js 56KB BoxGeometry.js 5KB
JonSco
- 粉丝: 69
- 资源: 1万+
下载权益
C知道特权
VIP文章
课程特权
VIP享7折，此内容立减3.57元 开通VIP
评论1