Question

所以我一直在弄this，我终于为我做了一切工作。我是任何类型的javascript的初学者，所以我不知道这是否是一个简单的修复。基本上我不能让它出现在月球上，就像在original中一样。

到目前为止，这就是我所拥有的。

<script type="text/javascript" id="mainCode">

var container, 
    renderer, 
    scene, 
    camera, 
    mesh,
    light = {
       speed: 0.1,
       distance: 1000,
       position: new THREE.Vector3(0, 0, 0),
       orbit: function (center, time) {
            this.position.x =
                (center.x + this.distance) * Math.sin(time * -this.speed);

            this.position.z =
                (center.z + this.distance) * Math.cos(time * this.speed);
        }
    },
    clock,
    controls;


        init();

        function init() {

        // grab the container from the DOM
        container = document.getElementById( "container" );


        scene = new THREE.Scene();

        var fov = 35,
        aspect = window.innerWidth / window.innerHeight,
        near = 1,
        far = 65536;

        renderer = new THREE.WebGLRenderer({antialias: true, preserveDrawingBuffer: true});   
        renderer.setClearColor(0x000000, 1);
        renderer.setSize(window.innerWidth, window.innerHeight);
        container.appendChild( renderer.domElement );

        camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
        camera.position.set(0, 0, 800);

        scene.add(camera);

        controls = new THREE.TrackballControls(camera);
        controls.rotateSpeed = 0.5;
        controls.dynamicDampingFactor = 0.5;

        clock = new THREE.Clock();

        var radius = 100;
        var xSegments = 50;
        var ySegments = 50;
        var geo = new THREE.SphereGeometry(radius, xSegments, ySegments);

        var mat = new THREE.ShaderMaterial({
            uniforms: {
                lightPosition: {
                    type: 'v3',
                    value: light.position
                },
                textureMap: {
                    type: 't',
                    value: THREE.ImageUtils.loadTexture( "img/maps/moon.jpg" )
                },
                normalMap: {
                    type: 't',
                    value: THREE.ImageUtils.loadTexture( "img/maps/normal.jpg" )
                },
                uvScale: {
                    type: 'v2',
                    value: new THREE.Vector2(1.0, 1.0)

                }


            },
            vertexShader:document.getElementById('vertexShader').textContent,
            fragmentShader:document.getElementById('fragmentShader').textContent

        });

          mesh = new THREE.Mesh(geo, mat);     
          mesh.geometry.computeTangents();
          mesh.position.set(0, 0, 0);
          mesh.rotation.set(0, 180, 0);
          scene.add(mesh);


    }

    function onWindowResize() {
        renderer.setSize(window.innerWidth, window.innerHeight);
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
    }

    function animate() {
        requestAnimationFrame(animate);
        light.orbit(mesh.position, clock.getElapsedTime());
        controls.update(camera);
        renderer.render(scene, camera);

    }
    animate();

    window.addEventListener('resize', onWindowResize, false);


</script>

Answer 1

您永远不会为场景添加任何灯光。月亮示例使用自定义着色器，它比您现在需要的更复杂。您需要创建常规三灯并将其添加到场景中，例如

http://threejs.org/docs/#Reference/Lights/PointLight

var light = new THREE.PointLight( 0xff0000, 1, 100 );
light.position.set( 50, 50, 50 );
scene.add( light );

灯光未显示在对象

1 个答案: