Editor Three.js在线编辑器导出法线贴图
我试着用这个来做一个普通的映射实验。该编辑器非常棒，如下所示： 没有法线贴图： 使用法线贴图： 我的问题导出时，对我来说最重要的是材质，但看起来导出器没有向上导出材质设置，如着色器或制服：Editor Three.js在线编辑器导出法线贴图,editor,three.js,texture-mapping,Editor,Three.js,Texture Mapping,我试着用这个来做一个普通的映射实验。该编辑器非常棒，如下所示： 没有法线贴图： 使用法线贴图： 我的问题导出时，对我来说最重要的是材质，但看起来导出器没有向上导出材质设置，如着色器或制服： { "metadata": { "version": 4, "type": "object", "generator": "ObjectExporter" }, "geometries": [ {
{
"metadata": {
"version": 4,
"type": "object",
"generator": "ObjectExporter"
},
"geometries": [
{
"type": "PlaneGeometry",
"width": 200,
"height": 200,
"widthSegments": 1,
"heightSegments": 12
}],
"materials": [
{
"type": "MeshPhongMaterial",
"color": 16580351,
"ambient": 16777215,
"emissive": 0,
"specular": 13027014,
"shininess": 60,
"opacity": 1,
"transparent": false,
"wireframe": false
}],
"object": {
"type": "Scene",
"children": [
{
"name": "Plane 8",
"type": "Mesh",
"position": [-13.67,102.97,28.83],
"rotation": [-0.18,-0.22,0],
"scale": [1,1,1],
"geometry": 0,
"material": 0
},
{
"name": "AmbientLight 10",
"type": "AmbientLight",
"color": 2236962
},
{
"name": "AmbientLight 11",
"type": "AmbientLight",
"color": 2236962
},
{
"name": "DirectionalLight 12",
"type": "DirectionalLight",
"color": 16777215,
"intensity": 1,
"position": [200,200,200]
},
{
"type": "Object3D",
"position": [0,0,0],
"rotation": [0,0,0],
"scale": [1,1,1]
},
{
"type": "Object3D",
"position": [0,0,0],
"rotation": [0,0,0],
"scale": [1,1,1]
},
{
"name": "DirectionalLight 12 Target",
"type": "Object3D",
"position": [0,0,0],
"rotation": [0,0,0],
"scale": [1,1,1]
}]
}
}
谢谢：）对不起，伙计们，我想知道如何让法线贴图工作，我仍然不知道如何从编辑器中查看代码，但我还是会结束这个问题。。。感谢那些花时间阅读的人
//wall
var textures = {
lion: THREE.ImageUtils.loadTexture('../media/lion.png'),
lionbumpnormal: THREE.ImageUtils.loadTexture('../media/lion-bumpnormal.png')
};
// common material parameters
var ambient = 0, diffuse = 0x331100, specular = 0xffffff, shininess = 10, scale = 23;
var material = new THREE.MeshPhongMaterial( {
map: textures.lion,
normalMap: textures.lionbumpnormal,
color: 16580351,
ambient: 16777215,
emissive: 0,
specular: 13027014,
shininess: 60,
opacity: 1,
transparent: false,
wireframe: false
} );
var planeGeometry = new THREE.PlaneGeometry(10, 10);
var wall = new THREE.Mesh(
planeGeometry,
material
);
不确定这是否是您的意思，但我正在尝试加载我在编辑器中设置的简单场景。可以使用THREE.ObjectLoader来完成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<script src="../three.js/build/three.js"></script>
<script>
(function() {
var Game = function() {
}
Game.prototype.init = function() {
var loader = new THREE.ObjectLoader();
loader.load('data.json', (function(data) {
this.scene = data;
this.load();
}).bind(this));
}
Game.prototype.draw = function() {
this.renderer.render(this.scene, this.camera);
}
Game.prototype.load = function() {
var container = document.createElement('div');
document.body.appendChild(container);
this.camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 10000);
this.camera.position.z = 500;
this.camera.position.x = 500;
this.camera.position.y = 100;
this.camera.lookAt(new THREE.Vector3(0,0,0));
this.scene.add(this.camera);
this.renderer = new THREE.WebGLRenderer();
this.renderer.setSize( window.innerWidth, window.innerHeight);
container.appendChild(this.renderer.domElement);
this.update();
};
Game.prototype.update = function() {
requestAnimationFrame(this.update.bind(this));
this.draw();
}
window.onload = function() {
var g = new Game();
g.init();
}
}).call(this);
</script>
</head>
<body>
</body>
</html>
（功能（）{
var Game=函数（）{
}
Game.prototype.init=函数（）{
var loader=new THREE.ObjectLoader（）；
loader.load（'data.json'，（函数（数据））{
这个场景=数据；
这个.load（）；
}).约束（这个）；
}
Game.prototype.draw=函数（）{
this.renderer.render（this.scene，this.camera）；
}
Game.prototype.load=函数（）{
var container=document.createElement（'div'）；
文件.正文.附件（容器）；
this.camera=新的3.PerspectiveCamera（30，window.innerWidth/window.innerHeight，11000）；
此.camera.position.z=500；
这个.camera.position.x=500；
这个.camera.position.y=100；
这个.camera.lookAt（新的3.Vector3（0,0,0））；
this.scene.add（this.camera）；
this.renderer=new THREE.WebGLRenderer（）；
this.renderer.setSize（window.innerWidth、window.innerHeight）；
container.appendChild（this.renderer.doElement）；
这个.update（）；
};
Game.prototype.update=函数（）{
requestAnimationFrame（this.update.bind（this））；
这个.draw（）；
}
window.onload=函数（）{
var g=新游戏（）；
g、 init（）；
}
}).打电话（这个）；