1
<iframe id="modelFrame" src="https://ts.undf.top/3d/bysj.html" width="100%" height="75%" style = "border-radius: 10px;" frameborder="0"></iframe>

1
// 如果需要修改文件位置，记得修改这里的路径
2
import * as THREE from './build/three.module.js';
3

4
import Stats from './build/stats.js';
5

6
import { STLLoader } from './build/stl.js';
7

8
    let container, stats;
9

10
    let camera, cameraTarget, scene, renderer;
11

12
    init();
13
    animate();
14

15
    function init() {
16

17
        container = document.createElement( 'div' );
18
        document.body.appendChild( container );
19

20
        camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 30 );
21
        camera.position.set( 0, 0.85, 0 );
22
        //相机位置
23
        cameraTarget = new THREE.Vector3( 0, - 0.25, 0 );
24

25
        scene = new THREE.Scene();
26
        scene.background = new THREE.Color( 0x72645b );
27
        scene.fog = new THREE.Fog( 0x72645b, 2, 15 );
28

29
        // Ground
30
        //
31
        const plane = new THREE.Mesh(
32
            new THREE.PlaneGeometry( 40, 40 ),
33
            new THREE.MeshPhongMaterial( { color: 0x999999, specular: 0x101010 } )
34
        );
35
        plane.rotation.x = - Math.PI / 2;
36
        plane.position.y = - 0.5;
37
        scene.add( plane );
38

39
        plane.receiveShadow = true;
40

41

42

43

44
        const loader = new STLLoader();
45

46

47
        // Binary files。即 二进制 stl 文件
48

49
        const material = new THREE.MeshPhongMaterial( { color: 0xAAAAAA, specular: 0x111111, shininess: 200 } );
50

51
        loader.load( './model/bysj.stl', function ( geometry ) {
52

53
            const mesh = new THREE.Mesh( geometry, material );
54
            //模型参数
55
            mesh.position.set( 0, - 0.18, - 0.1 );
56
            mesh.rotation.set( - Math.PI / 2, 0, 0 );
57
            mesh.scale.set( 0.008, 0.008, 0.008 );
58

59
            mesh.castShadow = true;
60
            mesh.receiveShadow = true;
61

62
            scene.add( mesh );
63

64
        } );
65

66
        scene.add( new THREE.HemisphereLight( 0x443333, 0x111122 ) );
67

68
        addShadowedLight( 1, 1, 1, 0xffffff, 1.35 );
69
        addShadowedLight( 0.5, 1, - 1, 0xffaa00, 1 );
70
        // renderer
71

72
        renderer = new THREE.WebGLRenderer( { antialias: true } );
73
        renderer.setPixelRatio( window.devicePixelRatio );
74
        renderer.setSize( window.innerWidth, window.innerHeight );
75
        renderer.outputEncoding = THREE.sRGBEncoding;
76

77
        renderer.shadowMap.enabled = true;
78

79
        container.appendChild( renderer.domElement );
80

81
        // stats
82

83
        stats = new Stats();
84
        container.appendChild( stats.dom );
85

86
        //
87

88
        window.addEventListener( 'resize', onWindowResize );
89

90
    }
91

92
    function addShadowedLight( x, y, z, color, intensity ) {
93

94
        const directionalLight = new THREE.DirectionalLight( color, intensity );
95
        directionalLight.position.set( x, y, z );
96
        scene.add( directionalLight );
97

98
        directionalLight.castShadow = true;
99

100
        const d = 1;
101
        directionalLight.shadow.camera.left = - d;
102
        directionalLight.shadow.camera.right = d;
103
        directionalLight.shadow.camera.top = d;
104
        directionalLight.shadow.camera.bottom = - d;
105

106
        directionalLight.shadow.camera.near = 1;
107
        directionalLight.shadow.camera.far = 4;
108

109
        directionalLight.shadow.bias = - 0.002;
110

111
    }
112

113
    function onWindowResize() {
114

115
        camera.aspect = window.innerWidth / window.innerHeight;
116
        camera.updateProjectionMatrix();
117

118
        renderer.setSize( window.innerWidth, window.innerHeight );
119

120
    }
121

122
    function animate() {
123

124
        requestAnimationFrame( animate );
125

126
        render();
127
        stats.update();
128

129
    }
130

131
    function render() {
132

133
        const timer = Date.now() * 0.0005;
134

135
        camera.position.x = Math.cos( timer ) * 3;
136
        camera.position.z = Math.sin( timer ) * 3;
137

138
        camera.lookAt( cameraTarget );
139

140
        renderer.render( scene, camera );
141

142
    }