Question

我的品牌打击了three.js和webgl的新手......我试图在这个旋转的球体上添加一个精灵（这是我自己的形象）。我想让我的这个图像在球体中保持不变，无论我在哪里旋转它，当然，球体中反射的环境仍会移动。这是对MC Escher的绘画＆＃34;反射球体中的自画像＆＃34;的一种看法。一切似乎工作得很好，除了我不能让精灵出现。但是，它没有给我任何错误。哦，也出于某种原因，天空盒环境最初不会加载。我必须点击其中一个控件才能显示。请帮忙！谢谢！这是我的代码：

    <!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>

Answer 1

你的精灵就在那里;它很小很封闭。

Three.js Sprites只是1x1飞机，总是瞄准相机。你的球体有400个半径。你创建的精灵几乎不包括1个像素，并且（128,24,24）的变换完全在球体内部（不透明）。一些代码如：

sprite1.position.set(550, 24, 24);
sprite1.scale.set(550,550,550);

应该有帮助。

自画像的伟大概念。

将一个Sprite添加到旋转球体

1 个答案: