Question

我一直试图将画布拉伸为球体上的纹理失败。我有两个球体，一个有多个纹理，效果很好。第二个'云'只有一个画布。 '云'看起来像一个黑暗的球体。代码如下：

<script>

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.set(-60, 30, 60);
camera.lookAt(scene.position);
scene.add(camera);

var renderer = new THREE.WebGLRenderer();
renderer.setClearColor('#00061a', 1);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled =true;
document.body.appendChild(renderer.domElement);

// We put all our earth objects into a bigger object, so then can be manipulated as one in the scene.
var group = new THREE.Object3D();
var manager = new THREE.LoadingManager();

var sphereEarth = new THREE.SphereGeometry(20, 120, 120);
var sphereCloud = new THREE.SphereGeometry(20, 120, 120);


var loadmap = new THREE.TextureLoader(manager).load('mapLR.jpg');
var loadbump = new THREE.TextureLoader(manager).load('mapbump.jpg');
var loadspecu = new THREE.TextureLoader(manager).load('mapspecular.jpg');
var mat = new THREE.MeshPhongMaterial(
    {map: loadmap, 
     color: 0xaaaaaa,
     ambient: 0xaaaaaa, 
     specular: 0x333333, 
     shininess: 10});
mat.bumpMap = loadbump;
mat.bumpScale = 0.5;
mat.specularMap = loadspecu;
mat.specular = new THREE.Color('grey');
var earth = new THREE.Mesh(sphereEarth, mat);



var imageObj = new Image();
imageObj.src = 'mapSmall.jpg';
var canvas = document.createElement("canvas");
canvas.width = imageObj.width;
canvas.height = imageObj.height;
canvas.getContext("2d").drawImage(imageObj, 0, 0);


var cloudTexture = new THREE.Texture(canvas);


var matCl = new THREE.MeshPhongMaterial({color: 0x99CCFF});
matCl.map = cloudTexture;

var cloud = new THREE.Mesh(sphereCloud, matCl);



earth.position.set(0, 0, 0);
cloud.position.set(60, 0, 0);
earth.castShadow = true;
cloud.castShadow = true;


group.add(earth);
group.add(cloud);
scene.add(group);


var axesp = new THREE.AxisHelper(90);
var axesn = new THREE.AxisHelper(-90);

scene.add(axesp);
scene.add(axesn);


var spotlight = new THREE.PointLight('#ffffff');
spotlight.power = 12;
spotlight.decay = -1;
spotlight.position.set(-80, 40, 40);
scene.add(spotlight);
spotlight.castShadow =true;



var step = 0;

function renderScene() {        
step += 2 * Math.PI/3600;
requestAnimationFrame(renderScene);
earth.rotation.y = (step);

cloud.rotation.y = (step);
renderer.render(scene, camera);
}



renderScene();





</script>

我已经尝试了一切。由于我有一个requestAnimationFrame，我想我不应该需要纹理加载异步性调整提前感谢您的任何意见。干杯

三个JS - 画布作为球体上的纹理

0 个答案: