learningThreeJS/c01_02-first-scene.html at master · sqlcn/learningThreeJS · 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
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>chapter01 02 first scene</title>
    <script src="libs/three.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="WebGL-output"></div>

    <script>
        function init() {
            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

            var renderer = new THREE.WebGLRenderer();
            renderer.setClearColor(0xEEEEEE);
            renderer.setSize(window.innerWidth, window.innerHeight);

            var axes = new THREE.AxisHelper(10);
            scene.add(axes);

            var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);
            var planeMaterial = new THREE.MeshBasicMaterial({ color: 0xcccccc });
            var plane = new THREE.Mesh(planeGeometry, planeMaterial);

            plane.rotation.x = -0.5 * Math.PI;
            plane.position.x = 15;
            plane.position.y = 0;
            plane.position.z = 0;

            scene.add(plane);

            var cubeGeometry = new THREE.BoxGeometry(4,4,4);
            var cubeMaterial = new THREE.MeshBasicMaterial({color:0xff0000,wireframe:true});
            var cube = new THREE.Mesh(cubeGeometry,cubeMaterial);

            cube.position.x=-4;
            cube.position.y=3;
            cube.position.z=0;

            scene.add(cube);

            var sphereGeometry=new THREE.SphereGeometry(4,10,10)
            var sphereMaterial=new THREE.MeshBasicMaterial({color:0x7777ff,wireframe:true});
            var sphere=new THREE.Mesh(sphereGeometry,sphereMaterial);

            sphere.position.x=20;
            sphere.position.y=4;
            sphere.position.z=2;

            scene.add(sphere);

            camera.position.x = -30;
            camera.position.y = 40;
            camera.position.z = 30
            camera.lookAt(scene.position);

            document.getElementById("WebGL-output").appendChild(renderer.domElement);
            renderer.render(scene, camera);
        };
        window.onload = init;
    </script>
</body>

</html>