Three.js:为什么我的鞋子装反了,我该如何摆脱那种疯狂的金属外观?
Three.js: Why's my shoe loading upside down and how do I get rid of that crazy metal look?
为什么我的鞋子装反了?如何让它装正?我该如何去除那些疯狂的金属亮点?
Here's the working code 和
here's the json model file。 (我尝试做一个 plunker,但无法解决需要加载外部 6mb json 文件的 CORS 问题 :( )
这是我的 JS:
var scene, camera, renderer, geometry, material, cube, group, textureUrl, texture;
init();
render();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 275, window.innerWidth / window.innerHeight, 0.1, 10000 );
camera.position.z = 20;
controls = new THREE.OrbitControls( camera);
//set background to have transparency - alpha: true
renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById("viewport").appendChild(renderer.domElement);
var loader = new THREE.ObjectLoader();
loader.load("models/shoe4.json", function (obj) {
scene.add (obj);
});
// lights
light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 300, 300, 300 );
scene.add( light );
light = new THREE.DirectionalLight( 0x002288 );
light.position.set( -300, -300, -300 );
scene.add( light );
light = new THREE.AmbientLight( 0x222222 );
scene.add( light );
function render() {
requestAnimationFrame(render);
scene.rotation.y += 0.005;
renderer.render(scene, camera);
}
如果您的模型在您的场景中是颠倒的,那么它可能只是头朝下导出。可能是 Y-up 的错误,最好在您的 3d 软件中修复它。如果你想在代码中修复它,你可以将几何图形旋转 180 度:
var rotation = new THREE.Matrix4().makeRotationZ(Math.PI/2);
obj.geometry.applyMatrix(transformation);
或者你也可以只旋转你的网格(-group),如果你不想通过做
obj.rotation.z = Math.PI/2;
crazy metal look
是 MeshPhongMaterial
的镜面高光。您所有材料的 shininess
为 50,高于平时。将此值设置得较低 and/or 使高亮颜色 specular
变暗。
材质需要一些时间调整才能在 three.js 中看起来不错,您还必须根据光照调整这些值。
很抱歉不同意之前的回答...
您的模型是颠倒的,因为您相机的视野 camera.fov
是 275 度。一个合理的值是 50 度。
您所有的 MeshPhongMaterial
的 shininess
都是 50。这是一个非常合理的值,而且相当低。对于 MeshPhongMaterial
.
,material.shininess
的范围可以从 1 到 1000 或更多
"crazy metal look"是因为你设置了material的镜面反射率——material.specular
属性 -- 太高了。在您的情况下,合理的价值是:
material.specular.setRGB( 0.05, 0.05, 0.05 );
three.js r.71
为什么我的鞋子装反了?如何让它装正?我该如何去除那些疯狂的金属亮点?
Here's the working code 和 here's the json model file。 (我尝试做一个 plunker,但无法解决需要加载外部 6mb json 文件的 CORS 问题 :( )
这是我的 JS:
var scene, camera, renderer, geometry, material, cube, group, textureUrl, texture;
init();
render();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 275, window.innerWidth / window.innerHeight, 0.1, 10000 );
camera.position.z = 20;
controls = new THREE.OrbitControls( camera);
//set background to have transparency - alpha: true
renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById("viewport").appendChild(renderer.domElement);
var loader = new THREE.ObjectLoader();
loader.load("models/shoe4.json", function (obj) {
scene.add (obj);
});
// lights
light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 300, 300, 300 );
scene.add( light );
light = new THREE.DirectionalLight( 0x002288 );
light.position.set( -300, -300, -300 );
scene.add( light );
light = new THREE.AmbientLight( 0x222222 );
scene.add( light );
function render() {
requestAnimationFrame(render);
scene.rotation.y += 0.005;
renderer.render(scene, camera);
}
如果您的模型在您的场景中是颠倒的,那么它可能只是头朝下导出。可能是 Y-up 的错误,最好在您的 3d 软件中修复它。如果你想在代码中修复它,你可以将几何图形旋转 180 度:
var rotation = new THREE.Matrix4().makeRotationZ(Math.PI/2);
obj.geometry.applyMatrix(transformation);
或者你也可以只旋转你的网格(-group),如果你不想通过做
obj.rotation.z = Math.PI/2;
crazy metal look
是 MeshPhongMaterial
的镜面高光。您所有材料的 shininess
为 50,高于平时。将此值设置得较低 and/or 使高亮颜色 specular
变暗。
材质需要一些时间调整才能在 three.js 中看起来不错,您还必须根据光照调整这些值。
很抱歉不同意之前的回答...
您的模型是颠倒的,因为您相机的视野
camera.fov
是 275 度。一个合理的值是 50 度。您所有的
MeshPhongMaterial
的shininess
都是 50。这是一个非常合理的值,而且相当低。对于MeshPhongMaterial
. ,"crazy metal look"是因为你设置了material的镜面反射率——
material.specular
属性 -- 太高了。在您的情况下,合理的价值是:material.specular.setRGB( 0.05, 0.05, 0.05 );
material.shininess
的范围可以从 1 到 1000 或更多
three.js r.71