qiaoyu0805 2017-09-20 05:39 采纳率: 66.7%
浏览 3729
已采纳

利用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条回答 默认 最新

  • devmiao 2017-09-20 07:48
    关注
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
编辑
预览

报告相同问题?

悬赏问题

  • ¥35 spaceclaim脚本
  • ¥15 MC9S12XS128单片机实验
  • ¥15 失败的github程序安装
  • ¥15 WSL上下载的joern在windows怎么用?
  • ¥15 jetson nano4GB
  • ¥15 电脑回复出厂设置,重装过程报错提示,求解决方案Windows 无法分析或处理无人参与应答文件 [C:\WINDOWS\Panther\unattend.xml,如何解决?
  • ¥15 进入lighttools中的UDOP编辑器的方法
  • ¥15 求Gen6d训练数据集
  • ¥20 liunx中winscp中可以登入ftp,但是不能登入sftp,如何解决
  • ¥15 lighttools的光学属性自定义的用法流程
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部