Pond/test4.html at master · maxx-dev/Pond · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<html>
<head>
    <title>My first Three.js app</title>
    <style>canvas { width: 100%; height: 100% }</style>
</head>
<body>
<script src="libraries/three60.js"></script>
<script>
    var scene = new THREE.Scene();
    camera = new THREE.OrthographicCamera(window.innerWidth / -2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / -2, -1E4, 1E4);


    var clock = new THREE.Clock();
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMapEnabled = true;
    renderer.shadowMapSoft = true;
    document.body.appendChild(renderer.domElement);


    bg_texture = THREE.ImageUtils.loadTexture( 'textures/background.jpg' );
    bg_texture.wrapS = bg_texture.wrapT = THREE.RepeatWrapping;
    bg_texture.repeat.set(2,2);
    ground = new THREE.Mesh(
            new THREE.PlaneGeometry( 10000, 10000 ),
            new THREE.MeshLambertMaterial( { color: 0xffffff, opacity:1 } ) );
    ground.position.z = 0;
    ground.castShadow = false;
    ground.receiveShadow = true;
    scene.add(ground);

    light = new THREE.DirectionalLight(0xffffff,1.2);
    light.position.set(0,0, 400);
    light.target.position.set(0, 0, 0);
    light.castShadow = true;
    light.shadowCameraVisible = true;
    light.shadowDarkness = 0.2;
    scene.add( light );


    lily_texture = THREE.ImageUtils.loadTexture( 'textures/lily1.png' );
    lily_material = new THREE.MeshLambertMaterial( { map:lily_texture, transparent:true } );
    lily_material_shadow = new THREE.MeshLambertMaterial( {transparent:true, opacity:0 } );
    //lily_material = new THREE.MeshNormalMaterial( { } );

    //var sphere = new THREE.Mesh(new THREE.CylinderGeometry(100, 100, 10,50,1,false), lily_material);
    //var sphere = new THREE.Mesh(new THREE.SphereGeometry(100, 200, 5, 0, Math.PI*2, 0, Math.PI),lily_material);


    var sphere = new THREE.Mesh(new THREE.CubeGeometry(100, 100, 5, 10, 10, 10),lily_material);
    sphere.overdraw = true;
    sphere.position.x = 0;
    sphere.position.y = 0;
    sphere.position.z = 100;
    //scene.add(sphere);


    var sphere = new THREE.Mesh(new THREE.CircleGeometry(this.realRadius, 400, 0, 2*Math.PI), lily_material);
    sphere.overdraw = true;
    sphere.position.x = 0;
    sphere.position.y = 0;
    sphere.position.z = 100;
    sphere.castShadow = true;
    sphere.receiveShadow = false;
    scene.add(sphere);


    var sphere = new THREE.Mesh(new THREE.SphereGeometry(50, 20,20, 0, Math.PI*2, 0, Math.PI),lily_material_shadow);
    sphere.overdraw = true;
    sphere.position.x = 0;
    sphere.position.y = 0;
    sphere.position.z = 50;
    sphere.castShadow = true;
    sphere.receiveShadow = false;
    scene.add(sphere);

    camera.position.z = 500;

    var render = function () {
        requestAnimationFrame(render);
        light.position.x = Math.sin(clock.getElapsedTime()*0.5) * 500.0;
        light.position.z = Math.cos(clock.getElapsedTime()*0.5) * 500.0;


        renderer.render(scene, camera);
    };

    render();
</script>
</body>
</html>