<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="../函数式编程/textbook/js/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/three.js"></script> <script src="js/OrbitControls.js" type="text/javascript" charset="utf-8"></script> <script src="js/OBJLoader.js" type="text/javascript" charset="utf-8"></script> <script src="js/FBXLoader.js" type="text/javascript" charset="utf-8"></script> <script src="js/inflate.min.js" type="text/javascript" charset="utf-8"></script>
</head> <body> <div id="app">
</div> <script type="text/javascript"> var scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(105, window.innerWidth / window.innerHeight, 1, 1000); render = new THREE.WebGLRenderer(); render.setPixelRatio(window.devicePixelRatio); render.setSize(window.innerWidth, window.innerHeight) var app = document.getElementById("app"); app.appendChild(render.domElement); /********************************************************/ // 加载提示 var manager = new THREE.LoadingManager(); manager.onProgress = function(item, loaded, total){ console.log(item, loaded, total); }; 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){ console.error(xhr); }; var loader = new THREE.FBXLoader();//创建一个FBX加载器 var model, self = this ; loader.load("./modules/stanford-bunny.fbx", function(obj) { console.log(obj);//查看加载后返回的模型对象 obj.scale.multiplyScalar(0.0003); //缩小模型 self.model = obj; scene.add(self.model) animate(); }, onProgress, onError) // 光源 var point = new THREE.PointLight("white", 10, 100); point.position.set(40, 30, 30); scene.add(point); camera.position.set(20, 20, 30); // 坐标轴 var axisHelper = new THREE.AxisHelper(100); scene.add(axisHelper)
// 鼠标控件 var controls = new THREE.OrbitControls(camera, render.domElement); //创建控件对象 /********************************************************/ function animate() { self.model.rotation.y += 0.03; controls.update(); render.render(scene, camera); window.requestAnimationFrame(animate); } </script> </body></html>
评论