使用Three.js + Blender构建在浏览器端显示的3D模型(3)
2012-10-11 00:34
981 查看
第三章 使用three.js加载blender生成的马克杯模型
先看看效果图,这是在firefox里面加载的
代码如下:
与之对应的html代码如下:
其中cup.js是按照第一节所述,从blender中导出的js文件。这里我们需要加以注意的是,我们这里导出的文件是scen文件,包括摄像机、光源等参数的,点击“Export/Three.js(.js)”后出现的面板上,需要注意这部分:
默认情况下“Scene”,“Lights”和“Cameras”是没有勾选的,我们把它们都勾选上。
另外,请选用FireFox浏览器加载我们的html文件。因为这里使用了WebGl的render,而webGL默认是不能跨域访问的,所以在Chrome里面如果没做任何配置是不能加载本地的模型文件加以显示的。当然来自服务器的文件是可以的。使用FireFox则不受这个限制。
至此教程完成了基本的3D模型的制作以及在浏览器端的加载。代码来自于Three.js的例程,但特地做了极度的简化,整个js代码不到50行。在后续的教程中,我们将以此为基础,针对不同的任务需求,结合Three.js的API来完成。
先看看效果图,这是在firefox里面加载的
代码如下:
var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight, windowHalfX = window.innerWidth / 2, windowHalfY = window.innerHeight / 2, container, camera, scene, loaded, renderer, mouseX = 0, mouseY = 0; //记录鼠标位置在动画中使用 document.addEventListener( 'mousemove', function (event) { mouseX = ( event.clientX - windowHalfX ); mouseY = ( event.clientY - windowHalfY ); }, false ); init(); function init() { container = document.createElement( 'div' ); document.body.appendChild( container ); //使用WebGL去渲染,如果用Canvas渲染,浏览器会不堪重负 renderer = new THREE.WebGLRenderer(); renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT ); renderer.domElement.style.position = "relative"; container.appendChild( renderer.domElement ); //使用场景加载,就能够利用blender建模时设置的相机和光源等,无需我们再定义 var loader = new THREE.SceneLoader(); loader.load( "./cup.js", function( result ) { loaded = result; camera = loaded.currentCamera; camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); scene = loaded.scene; renderer.setClearColor( loaded.bgColor, loaded.bgAlpha ); animate(); }); } //通过实时改变相机的位置达到动画效果 function animate() { requestAnimationFrame( animate ); camera.position.x += ( mouseX - camera.position.x ) * 0.001; camera.position.y += ( - mouseY - camera.position.y ) * 0.002; camera.lookAt( scene.position ); renderer.render( scene, camera ); }
与之对应的html代码如下:
<!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - io - scene loader [blender]</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <script src="http://mrdoob.github.com/three.js/build/three.min.js"></script> </head> <body> <script> ...... ...... </script> </body> </html>
其中cup.js是按照第一节所述,从blender中导出的js文件。这里我们需要加以注意的是,我们这里导出的文件是scen文件,包括摄像机、光源等参数的,点击“Export/Three.js(.js)”后出现的面板上,需要注意这部分:
默认情况下“Scene”,“Lights”和“Cameras”是没有勾选的,我们把它们都勾选上。
另外,请选用FireFox浏览器加载我们的html文件。因为这里使用了WebGl的render,而webGL默认是不能跨域访问的,所以在Chrome里面如果没做任何配置是不能加载本地的模型文件加以显示的。当然来自服务器的文件是可以的。使用FireFox则不受这个限制。
至此教程完成了基本的3D模型的制作以及在浏览器端的加载。代码来自于Three.js的例程,但特地做了极度的简化,整个js代码不到50行。在后续的教程中,我们将以此为基础,针对不同的任务需求,结合Three.js的API来完成。
相关文章推荐
- 使用Three.js + Blender构建在浏览器端显示的3D模型(5)
- 使用Three.js + Blender构建在浏览器端显示的3D模型(5)
- 使用Three.js + Blender构建在浏览器端显示的3D模型(1)
- 使用Three.js + Blender构建在浏览器端显示的3D模型(2)
- 使用Three.js + Blender构建在浏览器端显示的3D模型(2)
- 使用Three.js + Blender构建在浏览器端显示的3D模型(4)
- 使用Three.js + Blender构建在浏览器端显示的3D模型(3)
- 使用Three.js + Blender构建在浏览器端显示的3D模型(1)
- 使用Three.js + Blender构建在浏览器端显示的3D模型(4)
- 【H5 3D应用开发】Blender 制作导出Obj模型带纹理到three.js(二)
- 在微信小游戏中使用three.js显示3D图形
- three.js使用三:加载有纹理的模型,结合blender和convert_obj_three.py
- Three.js使用Blender导出json文件U…
- 使用Cesium.js加载3D模型
- 使用Cesium.js加载3D模型
- 使用Jt2Go控件显示3D模型 / View 3D Model with JT2GO
- 使用Cesium.js加载3D模型
- 使用Cesium.js加载3D模型
- AlloyTouch与three.js 3D模型交互
- 使用JS来显示浏览器的窗口