0
Ich bin brandneu bei three.js und webgl ... Ich versuche, ein Sprite (das ist ein Bild von mir) zu dieser rotierenden Kugel hinzuzufügen. Ich möchte, dass dieses Bild von mir in der Sphäre konstant bleibt, egal wo ich es rotiere, und natürlich wird sich die in der Sphäre reflektierte Umgebung noch bewegen. Es ist eine Verfilmung von MC Eschers Zeichnung "Self-Portrait in Reflective Sphere". Alles scheint gut zu funktionieren, außer dass ich das Sprite nicht sehen kann. Es gibt mir jedoch keine Fehler. Oh, auch aus irgendeinem Grund wird die Skybox-Umgebung anfangs nicht geladen. Ich muss auf eines der Steuerelemente klicken, damit es erscheint. Bitte helfen Sie! Vielen Dank! Hier ist mein Code:Hinzufügen eines Sprites zu einer rotierenden Kugel
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<script type = "text/Javascript" src = "../FinalProject/three.min.js"></script>
<script type = "text/Javascript" src = "../FinalProject/OrbitControls.js"></script>
<script type = "text/Javascript" src = "../FinalProject/dat.gui.min.js"></script>
<body>
<script>
var controls, camera, scene, renderer;
var cameraCube, sceneCube;
var textureEquirec, textureCube, textureSphere;
var cubeMesh, sphereMesh;
var sphereMaterial;
//var refract;
init();
animate();
function init()
{
//cameras
camera = new THREE.PerspectiveCamera(70, window.innerWidth/window.innerHeight, 1, 100000);
camera.position.set(0, 0, 1000);
cameraCube = new THREE.PerspectiveCamera(70, window.innerWidth/window.innerHeight, 1, 100000);
controls = new THREE.OrbitControls(camera);
controls.minDistance = 500;
controls.maxDistance = 2500;
//scene
scene = new THREE.Scene();
sceneCube = new THREE.Scene();
//lights
var ambient = new THREE.AmbientLight(0xffffff);
scene.add(ambient);
//textures
var urls = [
"../FinalProject/pos-x.png",
"../FinalProject/neg-x.png",
"../FinalProject/pos-y.png",
"../FinalProject/neg-y.png",
"../FinalProject/pos-z.png",
"../FinalProject/neg-z.png",
];
textureCube = new THREE.CubeTextureLoader().load(urls);
textureCube.format = THREE.RGBFormat;
textureCube.mapping = THREE.CubeReflectionMapping;
var textureLoader = new THREE.TextureLoader();
textureEquirec = textureLoader.load("../FinalProject/environment.jpg");
textureEquirec.mapping = THREE.EquirectangularReflectionMapping;
textureEquirec.magFiler = THREE.LinearFilter;
textureEquirec.minFilter = THREE.LinearMipMapLinearFilter;
textureSphere = textureLoader.load("../FinalProject/metal.jpg");
textureSphere.mapping = THREE.SphericalReflectionMapping;
//materials
var equirectShader = THREE.ShaderLib["equirect"];
var equirectMaterial = new THREE.ShaderMaterial({
fragmentShader: equirectShader.fragmentShader,
vertexShader: equirectShader.vertexShader,
uniforms: equirectShader.uniforms,
depthWrite: false,
side: THREE.BackSide
});
equirectMaterial.uniforms["tEquirect"].value = textureEquirec;
var cubeShader = THREE.ShaderLib["cube"];
var cubeMaterial = new THREE.ShaderMaterial({
fragmentShader: cubeShader.fragmentShader,
vertexShader: cubeShader.vertexShader,
uniforms: cubeShader.uniforms,
depthWrite: false,
side: THREE.Backside
});
cubeMaterial.uniforms["tCube"].value = textureCube;
//Skybox
cubeMesh = new THREE.Mesh(new THREE.BoxGeometry(100, 100, 100), cubeMaterial);
sceneCube.add(cubeMesh);
var geometry = new THREE.SphereGeometry(400.0, 24, 24);
sphereMaterial = new THREE.MeshLambertMaterial({envMap: textureCube});
sphereMesh = new THREE.Mesh(geometry, sphereMaterial);
scene.add(sphereMesh);
//Sprite
var map = new THREE.TextureLoader().load("../FinalProject/MeCutout.png");
var material2 = new THREE.SpriteMaterial({map:map});
var sprite1 = new THREE.Sprite(material2);
sprite1.position.set(128, 24, 24);
scene.add(sprite1);
//renderer
renderer = new THREE.WebGLRenderer();
renderer.autoClear = false;
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setFaceCulling(THREE.CullFaceNone);
document.body.appendChild(renderer.domElement);
var params = {
Cube: function() {
cubeMesh.Material = cubeMaterial;
cubeMesh.visible = true;
sphereMaterial.envMap = textureCube;
sphereMaterial.needsUpdate = true;
},
Equirectangular: function() {
cubeMesh.material = equirectMaterial;
cubeMesh.visible = true;
sphereMaterial.envMap = textureEquirec;
sphereMaterial.needsUpdate = true;
},
Refraction: false
};
//GUI
var gui = new dat.GUI();
gui.add(params, 'Cube');
gui.add(params, 'Equirectangular');
gui.open();
window.addEventListener('resize', onWindowResize, false);
}//end function init
function onWindowResize()
{
camera.aspect = window.innerWidth/window.innerHeight;
camera.updateProjectionMatrix();
cameraCube.aspect = window.innerWidth/window.innerHeight;
cameraCube.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate()
{
requestAnimationFrame(animate);
render();
controls.update();
}
function render()
{
var timer = -0.0002 * Date.now();
camera.lookAt(scene.position);
cameraCube.rotation.copy(camera.rotation);
renderer.render(sceneCube, cameraCube);
renderer.render(scene, camera);
}
</script>
</body>
</html>
Kannst du das in einen jsbin oder einen Codepen oder [dein Lieblingsgeigenwerkzeug] einfügen? Vielleicht ein Porträtbild, wenn Sie sich nicht wohl fühlen. Macht es viel einfacher zu debuggen. – user01
@ user01 Ich habe Codepen ausgecheckt, konnte aber nicht herausfinden, wohin ich die Bilder hochladen soll. Was vermisse ich? – lisabits
Hier wird es auf den Server meiner Schule hochgeladen. Sie können die Ressourcen mit Ihrem Browser anzeigen. http://mcs.athens.edu/~lgeorge1/FinalProject/ @ user01 – lisabits