5400人阅读
three.js（3）
作者同类文章X
和前一章相比，主要在模型的生成方面。
细节如下：
用3dmax绘制模型，注意材质球的坐标原点设为一致，然后导出为obj，注意带上mtl文件，纹理文件使用jpg格式，不用用tga格式，three.js不支持。
效果如下：
在three.js的使用上：
&//wsad can control forward back left right,R can rise up camera height,F can reduce camera height.Q can freezen screen
& & & & & & _this.Controls = new THREE.FirstPersonControls(_this.Camera,divObj);//must set the second parameter,if not,you can't click you textbox in other div.
& & & & & & _this.Controls.movementSpeed = 30;//key speed
& & & & & & _this.Controls.lookSpeed = 0.03;//mouse speed
要显示阴影，需要设置光源显示阴影，对象显示阴影，对象投影的地方接受阴影，甚至对象本身接受阴影：
&_this.Light.shadowMapWidth = 1024;
_this.Light.shadowMapHeight = 1024;
_this.Light.shadowMapDarkness = 0.95;
& & & & _this.Light.castShadow =
&var createScene = function(geometry, x, y, z, scalex, scaley, scalez) {
& & & & var zmesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial());
& & & & zmesh.position.set(x, y, z);
& & & & zmesh.rotation.x = 0;//the unit is radian//Math.PI*1.5
zmesh.rotation.y = 0;
zmesh.rotation.z = 0;
& & & & zmesh.scale.set(scalex, scaley, scalez);
& & & & zmesh.castShadow =
& & & & zmesh.receiveShadow =
& & & & _this.Scene.add(zmesh);
& var gt = THREE.ImageUtils.loadTexture(&textures/terrain/grasslight-big.jpg&);
& & & & & & var gg = new THREE.PlaneGeometry(1);
& & & & & & var gm = new THREE.MeshPhongMaterial({ color: 0xffffff, map: gt, perPixel: true });
& & & & & & var ground = new THREE.Mesh(gg, gm);
& & & & & & ground.material.map.repeat.set(64, 64);
& & & & & & ground.material.map.wrapS = ground.material.map.wrapT = THREE.RepeatW
& & & & & & ground.receiveShadow =
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：263714次
积分：4026
积分：4026
排名：第4006名
原创：133篇
转载：34篇
评论：50条
(1)(1)(4)(1)(1)(2)(9)(2)(1)(8)(1)(7)(14)(15)(15)(7)(4)(6)(1)(7)(9)(14)(20)(1)(1)(1)(3)(1)(1)(3)(2)(3)(1)怎么把3dsmax导出的obj转换成js啊。。。。然后用到three.js里面？？_百度知道
怎么把3dsmax导出的obj转换成js啊。。。。然后用到three.js里面？？
obj转换成js：不要打开Python.下载three.js。并将utils\exporters\maya 目录下的plug-ins和scripts文件。拷贝到C:\Users\Administrator\Documents\maya\2008中，在maya插件管理界面中开启threeJsFileTranlator.py即直接在命令行运行 python convert_obj_three.py -i ... 。
其他类似问题
为您推荐：
提问者采纳
6.obj（模型文件）都在 D如果是在windows下.py
(obj转js脚本;运行&model.obj -o d:\ ;convert_obj_把下面的命令贴到指令框内:&#92。C，也能下到.py -i
d，没有的话我可以传给你)安装好python2.6;python d.py 和 model:&#92,去太平洋下就行)2。并点确定就OK了，就需要有;Python26\model.msi 并保证 python convert_obj_three.msi
(python运行库.
convert_obj_three.
python-2：1:&#92:&#92， 然后 点开始&gt
提问者评价
赞美你，用three.js官方给的python脚本弄好了，3q
来自：求助得到的回答
3dsmax的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁本文欢迎转载，转载请注明：转载自中国学网： []
用户还关注谁能给个three.js加载obj模型的demo
[问题点数：20分]
谁能给个three.js加载obj模型的demo
[问题点数：20分]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。如何学习Three.JS 3D引擎 -
- ITeye技术网站
我已经用Three.js做了些小实验，这是一个比较伟大的引擎，你只需要为浏览器的不支持而头疼。你可以用它来创建摄像机(cameras)，对象,(objects), 光照(lights), 材质(materials) 等等。你还可以选择渲染器，Three.js提供了多种渲染方式，如果你想让你的网页支持HTML5你也可以选择使用canvas来渲染，也可以使用WebGL或者SVG来进行渲染。Threejs是开源框架，你如果感兴趣你也可以参与开发。但是现在我只是用这个引擎，也只是把它当作一种小工具。在这里我也给大家演示一下如何学习ThreeJS的基础知识。
对于ThreeJS的粉丝这是一片很基础的文章，但是对于新手这将很快的使你了解ThreeJS，通常你需要结合大量的实例来分析demo才可以明白。如果你有问题可以直接在mrdoob的论坛上发布， .他会给你做出回答和解决的。如果你有很深奥和着急的问题你也可以发邮件给他们 和 都会帮组你的。
首先我假设你是个有一定基础的3D开发者，并且你可以熟练的掌握和合理的运用javascript语法。如果你没有上述两点那么你需要学习学习，也许你会觉得非常的有趣的。不过javascript确实有点混乱，容易被人头疼。
在我们目前的3D世界当中至少包括以下几点基础的东西，我会给大家一一介绍。
一： 一个场景
二： 一个渲染器
三： 一个摄像机
四： 一个对象或者至少两个材质
当然你也可以做很多的东西，很多非常疯狂的东西，只要很有足够的想象力，那么就开始你的3D开发，做出很多很炫的WebGL作品吧。
开发WebGL需要浏览器的大力支持，google的chrome是我在做demo的时候常用的浏览器，个人感觉还是不错的。支持webgl的渲染并且在javascript上速度还是不错的还有一些潜在的javascript引擎。Chrome全部支持canvas，webgl，这一块。火狐个人觉得排名第二那么google就肯定第一了，并且是火狐4的版本。火狐的javascript引擎似乎还是比google的chrome慢些，但是在渲染的支持上还是很强的。Opear和Safari也支持webgl，但是他们当前的版本只支持canvas渲染，IE9也只支持canvas渲染，到目前为止还没有听到微软说全面支持webgl的消息，担忧啊。
3：设置场景（Scene）
这一步我想你肯定已经选好了一个可以渲染WebGL的浏览器了，并且选好了你要使用的渲染方式了canvas，因为canvas还是比较标准些。Canvas不只是支持WebGL，还有更多的支持。不过，WebGL运行在你cpu的图形卡上，这样就意味着你的cpu可以专心的做别的事，而不需要为webgl渲染而担心，这就叫做硬件加速渲染。
无论你选择什么样的渲染机制，但是你需要记住的就是javascript需要很好的优化性能，因为3D对于浏览器来说还是很大的渲染，所以在你的javascript代码中尽量减少浏览器的压力，优化优化再优化你的javascript代码。
那么这样的话，你可以下载ThreeJS的多有js文件在你的电脑中，那么先看看如何着手建立一个Threejs的场景，看下面代码行：
var WIDTH = 400,
HEIGHT = 300;
var VIEW_ANGLE = 45,
ASPECT = WIDTH / HEIGHT,
NEAR = 0.1,
FAR = 10000;
var $container = $('#container');
var renderer = new THREE.WebGLRenderer();
var camera = new THREE.Camera(
VIEW_ANGLE,
var scene = new THREE.Scene();
camera.position.z = 300;
renderer.setSize(WIDTH, HEIGHT);
$container.append(renderer.domElement);
看起来挺简单的，不是很难。
4：做一个网格模型
现在我们有一个场景，一个摄像机，一个渲染器，但是我们需要画一个实体。实际上Three.js可以加载很多格式的3D文件，你的模型文件可以来自Blender，Maya，Chinema4D，3DMax等等。现在我们要做的是一个网格的元素，相对比较基础的东西(球体)Spheres, (飞机)Planes,(立方体) Cubes ， (圆柱体)Cylinders。Three.js创建这些物体会非常的容易。
var radius = 50, segments = 16, rings = 16;
var sphere = new THREE.Mesh(
new Sphere(radius, segments, rings),
sphereMaterial);
scene.addChild(sphere);
好了！但是我们的这个球体没有材质。在代码中我们使用了一个变量sphereMaterial，但是我们还没有对他进行定义。首先我们需要做的是对球体的材质进行描述。
5：材质（Materials）
毫无疑问这在Three.Js中是很重要的一部分，因为Three.js可以让你很方便的实现你的网格效果。
还有很多很多，现在我只介绍这些，剩下的由你自己去发现。但是你必须写在WebGL的着色器上，着色器是一个很庞大的东西，但是你可以使用GLSL(OpenGL的着色语言)。这就需要你用数学来实现模拟的灯光，这样会很复杂。但是多亏了Three.js，你可以不需要在做那样的数学计算了，如果你想写关于阴影的那么你可以使用MeshShaderMaterial来实现，所以这是一个很活泛的设置。
var sphereMaterial = new THREE.MeshLambertMaterial(
color: 0xCC0000
你也可以创建一个其他的材质，除了颜色，比如平滑或者环境的地图。你可以看看这个页面，看看你还可以创建什么材质，实际上任何一个引擎都会提供给你的。
6：灯(Lights)
如果你按照上面的实现，那么你现在可以看到一个空色的圆球。但是我们现在有材质却没有光，Three.js默认的是全环境的光，那么我们需要把这些光修理的好点。
var pointLight = new THREE.PointLight( 0xFFFFFF );
pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 130;
scene.addLight(pointLight);
7：循环渲染
现在我们大概算是有一些渲染了，但是我们需要这样做：
renderer.render(scene, camera);
我们渲染但不一定只是一次，所以如果你想循环渲染，那么你就需要好好的利用requestAnimationFrame这个js类，这是在浏览器中处理动画迄今为止最先进的js代码，但是到目前为止还不是完全支持，所以推介你看看 .。
window.requestAnimFrame = (function(){
window.requestAnimationFrame
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame
window.oRequestAnimationFrame
window.msRequestAnimationFrame
function( callback,
window.setTimeout(callback, 1000 / 60);
(function animloop(){
requestAnimFrame(animloop, element);
window.requestAnimFrame = (function(){
window.requestAnimationFrame
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame
window.oRequestAnimationFrame
window.msRequestAnimationFrame
function( callback,
window.setTimeout(callback, 1000 / 60);
var canvas,
animate();
function init() {
canvas = document.createElement( 'canvas' );
canvas.width = 256;
canvas.height = 256;
context = canvas.getContext( '2d' );
document.body.appendChild( canvas );
function animate() {
requestAnimFrame( animate );
function draw() {
var time = new Date().getTime() * 0.002;
var x = Math.sin( time ) * 96 + 128;
var y = Math.cos( time * 0.9 ) * 96 + 128;
context.fillStyle = 'rgb(245,245,245)';
context.fillRect( 0, 0, 255, 255 );
context.fillStyle = 'rgb(255,0,0)';
context.beginPath();
context.arc( x, y, 10, 0, Math.PI * 2, true );
context.closePath();
context.fill();
8常见的对象的特性
如果你花时间看代码的话，你会看到很多Three.js继承的Object3D的对象，这是一个很基础的对象，包含很多非常有用的特征，位置，旋转，大小的信息。特别的是我们的网格也是继承与Object3D，他加了自己的一些特性：材质和几何。
你想知道为什么我会说到这里，那么你想画一个球体在你的web上什么都不做吗？这些特征的存在值得你去研究，因为他们允许你去操作潜在的材质和网格划分。
sphere.geometry
sphere.geometry.vertices
sphere.geometry.faces
sphere.position
sphere.rotation
sphere.scale
9：一个小的更改
在顶点这里我们需要做个更改，你尝试更改你的顶点数据，但是你会发现你的渲染一点没有改变，这是为什么呢?因为Three.js是一向很复杂的优化，你只需要更换其中的一个方法就可以，
sphere.geometry.__dirtyVertices = true;
sphere.geometry.__dirtyNormals = true;
其实还有很多，但是这两个是我发现最重要的，你会发现只改变这个就省去很多不必要的计算。
我想你已经大致了解这个关于Three.js的简单介绍了，你可以自己动手尝试做些实例了，你会发现3D在网页中也是非常有趣的。Three.js为你解决了很多头疼的问题，你就可以做出很酷的效果了。
你可以看看这里 的文章，对你会有很大的帮组的，
浏览: 30890 次
来自: 南京
怎么解决？
1927105 写道写文档的能力有待提高啊现在如何
jacking124 写道看着不是很明白的加入了说明
Chris_bing 写道有Jackson，Gson，json ...
有Jackson，Gson，json-smart那么多类库，干 ...