带有着色器的背景平面在三个.js中重叠所有内容

我正在尝试获得一个带有着色器的平面作为我的场景背景，并在其上放置一个带有朗伯材质的盒子。这真的很简单，但是当我尝试这样做时，我总是得到飞机和盒子没有出现。有什么线索吗？我不明白的？

这是jsfiddle：http://jsfiddle.net/5zTz3/

索引.html

<html>
  <head>
    <title>The Cube</title>
    <style>
      canvas { width: 100%; height: 100%; }
      body{margin: 0px;}   
    </style>
  </head>
  <body>
    <script id="vertexShader" type="x-shader/x-vertex">
      void main() {
        gl_Position = vec4( position,1);
      }
    </script>
    <script id="fragmentShader" type="x-shader/x-fragment">
      uniform vec2 resolution;
      void main() {
        vec2 coord = gl_FragCoord.xy;
        float xmid = resolution.x/2.0;
        float ymid = resolution.y/2.0;
    float x = (coord.x - xmid)/resolution.x;
        float y = (coord.y-ymid)/resolution.y;
    float r = sqrt(x*x + y*y)+0.5;
        vec4 color = vec4(1.0-vec2(r),1.3-r,1.0);
        gl_FragColor = color;
      }
    </script>
    <script src="https://rawgithub.com/mrdoob/three.js/master/build/three.js"></script>
    <script src="scene.js">
    </script>
  </body>
</html>

场景.js

//Define scene
var scene = new THREE.Scene();
function render() {
    requestAnimationFrame(render);
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
//Define camera
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
//Plane material
var uniforms = {
    resolution: { type: "v2", value: new THREE.Vector2(window.innerWidth,window.innerHeight) }
};
var planeMaterial = new THREE.ShaderMaterial( { 
    uniforms: uniforms,
    vertexShader: document.getElementById('vertexShader').textContent,
    fragmentShader: document.getElementById('fragmentShader').textContent
} );
//Create plane
var geometry = new THREE.PlaneGeometry(1800*2, 1600,1,1);
var plane = new THREE.Mesh(geometry, planeMaterial);
plane.position.z = - 500;
scene.add(plane);
//Create cube
var geometry = new THREE.CubeGeometry(1,1,1);
var cubeMaterial = new THREE.MeshLambertMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, cubeMaterial );
scene.add( cube );
//Define Render
var renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize( window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
//Define light
var light = new THREE.PointLight(0xffffff);
light.position.set(0,200,100);
scene.add(light);
//render
render();

如果我通过另一个立方体几何（新三个。立方体几何（2,2,2）;）做我想做的事，但我不明白为什么飞机不工作

在顶点着色器中，您需要将modelViewMatrix乘以并projectionMatrix到顶点位置。

void main() {
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

http://jsfiddle.net/5zTz3/2/

我真的建议你看看"学习三.js"这本书。它是一个很好的起始资源。

本书中的示例代码可在此处获得：https://github.com/josdirksen/learning-threejs

示例 Ch01.03 做了我认为您要问的：

<!DOCTYPE html>
<html>
<head>
    <title>Example 01.03 - Materials and light</title>
    <script type="text/javascript" src="../libs/three.js"></script>
    <script type="text/javascript" src="../libs/jquery-1.9.0.js"></script>
    <style>
        body{
            /* set margin to 0 and overflow to hidden, to go fullscreen */
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>
<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">
    // once everything is loaded, we run our Three.js stuff.
    $(function () {
        // create a scene, that will hold all our elements such as objects, cameras and lights.
        var scene = new THREE.Scene();
        // create a camera, which defines where we're looking at.
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
        // create a render and set the size
        var renderer = new THREE.WebGLRenderer();
        renderer.setClearColorHex(0xEEEEEE, 1.0);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMapEnabled = true;
        // create the ground plane
        var planeGeometry = new THREE.PlaneGeometry(60,20);
        var planeMaterial =    new THREE.MeshLambertMaterial({color: 0xffffff});
        var plane = new THREE.Mesh(planeGeometry,planeMaterial);
        plane.receiveShadow  = true;
        // rotate and position the plane
        plane.rotation.x=-0.5*Math.PI;
        plane.position.x=15
        plane.position.y=0
        plane.position.z=0
        // add the plane to the scene
        scene.add(plane);
        // create a cube
        var cubeGeometry = new THREE.CubeGeometry(4,4,4);
        var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
        var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
        cube.castShadow = true;
        // position the cube
        cube.position.x=-4;
        cube.position.y=3;
        cube.position.z=0;
        // add the cube to the scene
        scene.add(cube);
        var sphereGeometry = new THREE.SphereGeometry(4,20,20);
        var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});
        var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
        // position the sphere
        sphere.position.x=20;
        sphere.position.y=4;
        sphere.position.z=2;
        sphere.castShadow=true;
        // add the sphere to the scene
        scene.add(sphere);
        // position and point the camera to the center of the scene
        camera.position.x = -30;
        camera.position.y = 40;
        camera.position.z = 30;
        camera.lookAt(scene.position);
        // add spotlight for the shadows
        var spotLight = new THREE.SpotLight( 0xffffff );
        spotLight.position.set( -40, 60, -10 );
        spotLight.castShadow = true;
        scene.add( spotLight );
        // add the output of the renderer to the html element
        $("#WebGL-output").append(renderer.domElement);
        // call the render function
        renderer.render(scene, camera);
    });
</script>
</body>
</html>

相关内容

最新更新

热门标签：