Three.jsでどのようにシェーディングを有効にしますか?Three.jsでシェーディングを有効にする方法
さまざまな例では、THREE.FlatShadingを材料に割り当てるほど簡単であることが示されていますが、これを行うとシェイプにシェーディングが全くありません。
マイJS:
CANVAS_WIDTH = 200,
CANVAS_HEIGHT = 200;
var camera, scene, renderer;
var mesh;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera(70, CANVAS_WIDTH/CANVAS_HEIGHT, 1, 1000);
camera.position.z = 400;
scene = new THREE.Scene();
var geometry = new THREE.BoxBufferGeometry(200, 200, 200);
var material = new THREE.MeshBasicMaterial({color: 0xff0000});
material.shading = THREE.FlatShading;
for(var i=0; i<material.length; i++){
material[i].shading = THREE.FlatShading;
}
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
// light
//scene.add(new THREE.AmbientLight(0x404040));
light = new THREE.DirectionalLight(0xffffff);
light.position.set(400, 400, 400);
scene.add(light);
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(CANVAS_WIDTH, CANVAS_HEIGHT);
container = document.getElementById('accelgyro_canvas');
container.appendChild(renderer.domElement);
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
camera.aspect = window.innerWidth/window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
console.log('animate')
requestAnimationFrame(animate);
mesh.rotation.x += 0.005;
mesh.rotation.y += 0.01;
renderer.render(scene, camera);
}
そして、これのように立方体でレンダリング:私は、周囲の光を追加/削除、光の角度を調整し、私は追加オブジェクト変更を試してみた
フラットシェーディングは何も助けてくれないようです。
これを修正するにはどうすればよいですか?
のための参照コードを取り付け
あなたは((http://threejs.org/examples/#webgl_shadowmap_viewerのように)影で、またはシェーディングに興味はありhttp://threejs.org/例/#canvas_materials_normal)?質問のタイトルが内容と一致しません –