webgldemo.zip资源-CSDN文库

共32个文件

png：16个

js：7个

jpg：6个

需积分: 10 127 浏览量 2019-05-27 11:31:29 上传评论收藏 8.76MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

webgldemo.zip （32个子文件）

model

JF.obj 41.88MB

JF.mtl 4KB

Wood_OSB.jpg 11KB

_4.png 55KB

_22.png 8KB

_1.png 157KB

_17.png 6KB

_13.png 463B

_5.png 3KB

_3.png 36KB

_15.png 243B

_7.png 4KB

_5_1_.png 3KB

_23.png 206B

Wood_Bamboo.jpg 5KB

_Metal_Corrugated_Shiny_2.jpg 2KB

_18.png 24KB

_Metal_Corrugated_Shiny_1.jpg 2KB

_2.png 109KB

_14.png 15KB

_24.png 25KB

Wood_Veneer_01.jpg 37KB

_4_1_.png 71KB

Tile_Limestone_Large.jpg 16KB

fir.html 4KB

MTLLoader.js 12KB

three.js 1.11MB

jquery-2.0.3.min.js 82KB

TrackballControls.js 13KB

OrbitControls.js 23KB

stats.min.js 2KB

OBJLoader.js 17KB

<!DOCTYPE html>  <html> <head> <meta charset="gb2312"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="expires" content="Wed, 23 Aug 2006 12:40:27 UTC" /> <title>three.js加载obj+mtl</title> <script src="js/jquery-2.0.3.min.js"></script> <script src="js/three.js"></script> <script src="js/OBJLoader.js"></script> <script src="js/MTLLoader.js"></script> <script src="js/OrbitControls.js"></script> <script src="js/stats.min.js"></script> <script src="js/TrackballControls.js" ></script> </head> <body> <div id="WebGL-output"></div> <script> $(function(){ // 1、 var renderer = new THREE.WebGLRenderer(); // 渲染器构建 renderer.setClearColor('#6A993E'); // 背景色 // renderer.setClearColor(0xEEEEEE); renderer.setSize(window.innerWidth , window.innerHeight); // 2、 var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000); //相机构建 camera.position.x = -30; // 渲染视图视角 camera.position.y = 20; camera.position.z = 30; // 3、 var scene = new THREE.Scene(); // 场景构建 var axes = new THREE.AxisHelper(20); // 构建一个坐标轴 scene.add(axes); // 4、 //添加材质灯光阴影 -- 必要 var spotLight = new THREE.SpotLight('#FFFFFF'); // 聚光灯 spotLight.position.set(-20,20,10); spotLight.castShadow = true; scene.add(spotLight); var light = new THREE.AmbientLight(0xffffff, .3); // 环境光源颜色 light.position.set(30, 30, 0); // 光源位置 scene.add(light); // 光源添加到场景中 camera.lookAt(scene.position) // 5、设置物体object //创建控件并绑定在相机上 trackballControls = new THREE.TrackballControls(camera); trackballControls.rotateSpeed = 1.0; trackballControls.zoomSpeed = 1.0; trackballControls.panSpeed = 1.0; trackballControls.noZoom = false; trackballControls.noPan = false; trackballControls.staticMoving = true; trackballControls.dynamicDampingFactor = 0.3; // model var onProgress = function(xhr) { if (xhr.lengthComputable) { var percentComplete = xhr.loaded / xhr.total * 100; } }; var onError = function(xhr) { // console.log(xhr) }; var mtlLoader = new THREE.MTLLoader(); // 模型1 mtlLoader.setPath('model/'); // obj mtl文件的目录 mtlLoader.load('JF.mtl', function(materials) { materials.preload(); var objLoader = new THREE.OBJLoader(); objLoader.setMaterials(materials); objLoader.setPath('model/'); objLoader.load('JF.obj', function(object) { object.position.x = -10; object.position.y = 0; object.position.z = 0; object.scale.set(0.1, 0.05, 0.1); // 长高宽比例 scene.add(object); }, onProgress, onError); }); $("#WebGL-output").append(renderer.domElement) function renderScene(){ var clock = new THREE.Clock(); var delta = clock.getDelta(); trackballControls.update(delta); requestAnimationFrame(renderScene); renderer.render(scene,camera); } renderScene(); }) </script> </body> </html>

评论收藏

内容反馈