本 WebGL: Up and running ( http://shop.oreilly.com/product/0636920024729.do ) の example3-3 を sim.js を使用せずに書き直そうとしています。しかし、テクスチャに問題があります。
ShaderMaterial を使用して法線効果と鏡面効果を得ることができません。MeshPhongMaterial とほぼ同じことができ、正常に動作しますが、現在、これは ShaderMaterial を使用して取得しているレンダリングです: http://imgur .com/vts9X3k
そして、これは私のコードです:
var camera,
scene,
renderer,
sunLight,
earthMesh,
cloudsMesh,
earthGroup;
function init() {
var fieldOfView = 60,
aspectRatio = window.innerWidth/window.innerHeight,
near = 1,
far = 4000;
// Renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);
// Scene
scene = new THREE.Scene();
// Earth group
earthGroup = new THREE.Object3D();
// Camera
camera = new THREE.PerspectiveCamera(fieldOfView, aspectRatio, near, far);
camera.position.set( 0, 0, 3.5 );
scene.add(camera);
// Earths creation
var surfaceMap = THREE.ImageUtils.loadTexture( "earth_surface_2048.jpg" );
var normalMap = THREE.ImageUtils.loadTexture( "earth_normal_2048.jpg" );
var specularMap = THREE.ImageUtils.loadTexture( "earth_specular_2048.jpg" );
var shader = THREE.ShaderUtils.lib[ "normal" ],
uniforms = THREE.UniformsUtils.clone( shader.uniforms );
uniforms[ "tNormal" ].texture = normalMap;
uniforms[ "tDiffuse" ].texture = surfaceMap;
uniforms[ "tSpecular" ].texture = specularMap;
uniforms[ "enableDiffuse" ].value = true;
uniforms[ "enableSpecular" ].value = true;
var shaderMaterial = new THREE.ShaderMaterial({
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
uniforms: uniforms,
lights: true
});
var geometry = new THREE.SphereGeometry(1, 32, 32);
geometry.computeTangents();
earthMesh = new THREE.Mesh( geometry, shaderMaterial );
earthGroup.add(earthMesh);
// Clouds
var cloudsMap = THREE.ImageUtils.loadTexture( "earth_clouds_1024.png" );
var cloudsMaterial = new THREE.MeshLambertMaterial({
color: 0xffffff,
map: cloudsMap,
transparent:true
});
var cloudsGeometry = new THREE.SphereGeometry(1.1, 32, 32);
cloudsMesh = new THREE.Mesh( cloudsGeometry, cloudsMaterial );
earthGroup.add(cloudsMesh);
earthGroup.rotation.x = 0.5;
// Add earth and clouds to the scene
scene.add(earthGroup);
// Lights
// Basic ambient light
scene.add( new THREE.AmbientLight("rgb(35,35,35)") );
// Sun light
sunLight = new THREE.PointLight( "rgb(255,230,200)", 2, 100 );
sunLight.position.set(-10, 0, 20);
scene.add(sunLight);
// Render
run();
}
function run() {
// Render
renderer.render( scene, camera );
// Rotating earth and clouds for the next frame
earthMesh.rotation.y += 0.005;
cloudsMesh.rotation.y += 0.003;
// Ask for another frame
requestAnimationFrame(run);
}
init();
ライトの問題ではないと思いますが、テクスチャの問題のようです。