光不显示在物体上 [英] Light Not showing on object

问题描述

所以我一直在搞乱这个，我终于让一切都为我工作了.我是任何类型 javascript 的初学者，所以我不知道这是否是一个简单的修复.基本上，我无法像 原始 中那样让光出现在月球上.

so Ive been messing with this, and Ive finally gotten everything to kind of work for me. I'm a beginner at any type of javascript so I don't know if this is a simple fix. Basically I cant get the light to show up on the moon like how it does in the original.

好吧，这就是我目前所拥有的.

Well here is what I have thus far.

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

推荐答案

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

You never add any lights to your scene. The moon example uses a custom shader which is more complicated than what you need right now. You need to create a regular Three light and add it to your scene, for example

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

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

这篇关于光不显示在物体上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！