利用three.js导入3d模型失败

<!DOCTYPE html>



lesson1-by-shawn.xie
<!--引入Three.js-->


<br> //开启Three.js渲染器<br> var renderer;//声明全局变量(对象)<br> function initThree() {<br> var element = document.getElementById(&quot;canvas3d&quot;);<br> width = document.getElementById(&#39;canvas3d&#39;).clientWidth;//获取画布「canvas3d」的宽<br> height = document.getElementById(&#39;canvas3d&#39;).clientHeight;//获取画布「canvas3d」的高<br> renderer=new THREE.WebGLRenderer({antialias:true});//生成渲染器对象(属性:抗锯齿效果为设置有效)<br> renderer.setSize(width, height );//指定渲染器的高宽(和画布框大小一致)<br> document.getElementById(&#39;canvas3d&#39;).appendChild(renderer.domElement);//追加 【canvas】 元素到 【canvas3d】 元素中。<br> renderer.setClearColor(0x000000, 1.0);//设置canvas背景色(clearColor)<br> }<br> //设置相机<br> var camera;<br> function initCamera() { <br> camera = new THREE.PerspectiveCamera( 45, width / height , 1 , 500 );//设置透视投影的相机,默认情况下相机的上方向为Y轴,右方向为X轴,沿着Z轴朝里(视野角:fov 纵横比:aspect 相机离视体积最近的距离:near 相机离视体积最远的距离:far)<br> camera.position.x = 50;//设置相机的位置坐标<br> camera.position.y = 10;//设置相机的位置坐标<br> camera.position.z = 25;<br> camera.up.x = 0;//设置相机的上为「x」轴方向<br> camera.up.y = 0;//设置相机的上为「y」轴方向<br> camera.up.z = 1;//设置相机的上为「z」轴方向<br> camera.lookAt( {x:0, y:0, z:0 } );//设置视野的中心坐标<br> }</p> <pre><code> //设置场景 var scene; function initScene() { scene = new THREE.Scene(); } //设置光源 var light; function initLight() { light = new THREE.DirectionalLight(0xff0000, 1.0, 0);//设置平行光源 light.position.set( 200, 200, 200 );//设置光源向量 scene.add(light);// 追加光源到场景 } //导入模型 var loader; function initObject(){ loader=new THREE.OBJLoader(); loader.load(&#39;male02.obj&#39;,function(object){ scene.add(object);}); } //执行 function threeStart() { initThree(); initCamera(); initScene(); initLight(); initObject(); renderer.clear(); renderer.render(scene, camera); } //threeStart(); &lt;/script&gt; &lt;style type=&quot;text/css&quot;&gt; div#canvas3d{ border: none; cursor: move; width: 1400px; height: 600px; background-color: #EEEEEE; } &lt;/style&gt; &lt;/head&gt; &lt;body onload=&#39;threeStart();&#39;&gt; &lt;!--盛放canvas的容器--&gt; &lt;div id=&quot;canvas3d&quot;&gt;&lt;/div&gt; &lt;/body&gt; </code></pre> <p></html><br> 利用three.js导入obj模型,发现无法显示,请各位大神帮忙看下问题出在哪?利用chorme和firefox分别得到如下提示<img src="https://img-ask.csdn.net/upload/201709/20/1505914725_165217.png" alt="图片说明"><img src="https://img-ask.csdn.net/upload/201709/20/1505914742_786938.png" alt="图片说明"></p>

1个回答

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐