[three.js使用四：加载有材质和纹理的模型 - xuhaiyan8825的专栏 - CSDN博客]

和前一章相比，主要在模型的生成方面。

细节如下：

用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 = true;

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 =true;
zmesh.receiveShadow = true;
_this.Scene.add(zmesh);

}

var gt = THREE.ImageUtils.loadTexture("textures/terrain/grasslight-big.jpg");
var gg = new THREE.PlaneGeometry(16000, 16000);
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.RepeatWrapping;
ground.receiveShadow = true;

Original url: Access

Created at: 2018-10-10 16:34:22

Category: default

Tags: none

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到