LearnThree.js/CodeTemplate.html at master · unicrop/LearnThree.js · 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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Code Template</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link type="text/css" rel="stylesheet" href="main.css">
</head>
<body>

<div id="container"></div>
<script type="text/javascript" src="js/three.min.js"></script>
<script type="text/javascript" src="js/OrbitControls.js"></script>
<script type="text/javascript" src="js/OBJLoader.js"></script>
<script type="text/javascript" src="js/MTLLoader.js"></script>
<script type="text/javascript" src="js/dat.gui.min.js"></script>
<script type="module">

    /*******
     * 初始化渲染器：initRender
     * 初始化相机：initCamera
     * 初始化场景：initScene
     * 初始化灯源：initLight
     * 初始化模型：initModel
     * 初始化控制器：initControls
     * 动画：animate
     * 绘制：draw
    *******/
    var renderer, container, camera, scene, light, controls, mesh;
    var gui;
    init();
    animate();

    function initRender() {
        container = document.getElementById("container");
        renderer = new THREE.WebGLRenderer();
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        //告诉渲染器需要阴影效果
        renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 默认的是，没有设置的这个清晰 THREE.PCFShadowMap
        container.appendChild(renderer.domElement);
    }

    function initCamera() {
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100000 );
        camera.position.set(5000, 1000, 5000);
        camera.lookAt(new THREE.Vector3(0, 0, 0));
    }

    function initScene() {
        //cubemap
        var path = 'textures/cube/skybox/';
        var format = '.jpg';
        var urls = [
            path + 'px' + format, path + 'nx' + format,
            path + 'py' + format, path + 'ny' + format,
            path + 'pz' + format, path + 'nz' + format
        ];

        var reflectionCube = new THREE.CubeTextureLoader().load( urls );
        reflectionCube.format = THREE.RGBFormat;

        var refractionCube = new THREE.CubeTextureLoader().load( urls );
        refractionCube.mapping = THREE.CubeRefractionMapping;
        refractionCube.format = THREE.RGBFormat;
        scene = new THREE.Scene();
        scene.background = reflectionCube;
    }

    //初始化dat.GUI简化试验流程
    function initGui() {
        //声明一个保存需求修改的相关数据的对象
        gui = {
            scaleStep:0.01,
            rotationStep:0.03,
            positionStep:0.05
        };
        var datGui = new dat.GUI();
        //将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）
        datGui.add(gui, "scaleStep", 0, 1);
        datGui.add(gui, "rotationStep", 0, 1);
        datGui.add(gui, "positionStep", 0, 1);
    }

    function initLight() {
        /*var spotLight = new THREE.PointLight("#ffecb3");
        spotLight.position.set(2000, 2000, 2000);
        spotLight.castShadow = true;
        scene.add(spotLight);*/

        light = new THREE.DirectionalLight(0xffecb3, 0.8);
        light.position.set(2000, 2000, 2000);
        //告诉光需要开启阴影投射
        light.castShadow = true;
        scene.add(light);

        //环境光
        var ambientLight = new THREE.AmbientLight("#555", 0.9);
        scene.add(ambientLight);
    }

    function initModel() {
        // material loader
        let mtlLoader = new THREE.MTLLoader();
        mtlLoader.setPath('obj/');
        mtlLoader.load('1.mtl', function(materials) {
            materials.preload();
            // model loader
            let objLoader = new THREE.OBJLoader();
            objLoader.setMaterials(materials);
            objLoader.setPath('obj/');
            objLoader.load('1.obj', function(obj) {
                obj.traverse(function(child) {
                    if (child instanceof THREE.Mesh) {
                        child.material.side = THREE.DoubleSide;
                        //child.material.normalMap = texture;
                    }
                });
                obj.castShadow = true; //投影
                mesh = obj; //如果注释掉，则不旋转
                scene.add(obj);
            });
        });

        //底部平面
        var planeGeometry = new THREE.PlaneGeometry(50000, 50000);
        var planeTexture =  THREE.ImageUtils.loadTexture('textures/terrain/grasslight-big.jpg');
        planeTexture.wrapS = planeTexture.wrapT = THREE.RepeatWrapping;
        planeTexture.repeat.set(20,20);
        var planeMaterial = new THREE.MeshBasicMaterial({color: 0x999999, map: planeTexture});
        //var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
        var plane = new THREE.Mesh(planeGeometry, planeMaterial);
        plane.rotation.x = -0.5 * Math.PI;
        plane.position.y = -1250;
        //告诉底部平面需要接收阴影
        plane.receiveShadow = true;
        scene.add(plane);
    }

    function initControls() {
        controls = new THREE.OrbitControls(camera, renderer.domElement);
        // 如果使用animate方法时，将此函数删除
        //controls.addEventListener( 'change', render );
        // 使动画循环使用时阻尼或自转 意思是否有惯性
        controls.enableDamping = true;
        //动态阻尼系数 就是鼠标拖拽旋转灵敏度
        controls.dampingFactor = 1.0;
        //是否可以缩放
        controls.enableZoom = true;
        //是否自动旋转
        controls.autoRotate = false;
        //设置相机距离原点的最远距离
        controls.minDistance = 4000;
        //设置相机距离原点的最远距离
        controls.maxDistance = 50000;
        //是否开启右键拖拽
        controls.enablePan = true;
        //controls.minPolarAngle = Math.PI / 4;
        //controls.maxPolarAngle = Math.PI / 1.5;
    }

    function init() {
        initRender();
        initCamera();
        initScene();
        initLight();
        initModel();
        initControls();

        initGui();
        animate();
        window.addEventListener( 'resize', onWindowResize, false );
    }

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

    function animate() {
        // 更新控制器
        controls.update();
        render();
        requestAnimationFrame( animate );
        // 自动旋转
        rotateMesh();
    }

    function render() {
        renderer.render( scene, camera );
    }

    function rotateMesh() {
        //处理mesh的旋转
        //mesh.rotateX(gui.rotationStep);
        mesh.rotation.x += gui.rotationStep;
        mesh.rotation.y += gui.rotationStep;
        mesh.rotation.z += gui.rotationStep;
    }
</script>
</body>
</html>