您的位置：首页 > Web前端 > JavaScript

关于three.js载入js格式模型的问题

2017-07-24 18:15 274 查看
先上代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src=".\three.js"></script><script src="OrbitControls.js"></script><style type="text/css">div#canvas-frame {border: none;cursor: pointer;width: 100%;height: 600px;background-color: #EEEEEE;}</style><script type="text/javascript">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.setClearColor(0xFFFFFF, 1.0);}var camera;function initCamera() {camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);camera.position.x = 0;camera.position.y = 500;camera.position.z = 0;// 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() {scene.add(new THREE.AmbientLight(0x333333));}//load .js documentvar jsLoader;function loaderjs() {jsLoader = new THREE.JSONLoader();jsLoader.load( 'convert_js/2032_2.js', function( geometry ,materials) {var material = new THREE.MeshFaceMaterial(materials[0]);var object = new THREE.Mesh(geometry, material);object.scale.set(1, 1, 1);object.position.set(100,0,0);scene.add(object);} );}//load binary modelfunction render () {renderer.render(scene, camera);}function animation () {requestAnimationFrame(animation);render();}function threeStart() {initThree(); //创建渲染器并设置渲染参数initCamera();initScene();initLight();loaderjs();//renderer.clear();animation();var controls = new THREE.OrbitControls(camera); //camera controlcontrols.addEventListener('change', render);}</script></head><body onload="threeStart();"><div id="canvas-frame"></div></body></html>以上基于最新版three.js，经测试，能正确载入js文件。但是依然存在问题：需要实时渲染requestanimationframe同时加入控件orbitcontrol才能再浏览器中显现。求大神答疑。

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                three.js
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航