<div class="modal-body" id="giftSorderModalBody">

</div>

<script src="<?php echo get_file_root(); ?>/employform/threejs/model/STLLoader.js"></script>
<script src="<?php echo get_file_root(); ?>/employform/threejs/model/TrackballControls.js"></script>
<script>
    var container, controls;
    var camera, scene, renderer;
    var mesh;
    init();
    animate();

    function init() {
        container = document.createElement('div');
        document.getElementById("three").appendChild(container);

        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
        camera.position.set( 0, 5, 10 );
        cameraTarget = new THREE.Vector3(0, -0.25, 0);
        scene = new THREE.Scene();
        scene.fog = new THREE.Fog(0x72645b, 2, 15);

        //灯光
        scene = new THREE.Scene();

        var ambiColor="#538682";
        var ambiLight=new THREE.AmbientLight(ambiColor);
        scene.add(ambiLight);
        var light = new THREE.DirectionalLight('#fff',0.5,0,2);
        light.position.set(0, 0, 99).normalize();
        scene.add(light);

        const qlight = new THREE.PointLight('#fff',1,0,2)//颜色，强度，光照距离，0表示无限，光衰减
        qlight.position.set(100,-60,20)//点光位置
        scene.add(qlight);
        const Alight = new THREE.PointLight('#fff',1,0,2)//颜色，强度，光照距离，0表示无限，光衰减
        Alight.position.set(-100,60,-20)//点光位置
        scene.add(Alight);



        //模型文件
        var loader = new THREE.STLLoader();
        loader.load('test/LC1.stl', function (geometry) {

            var mat = new THREE.MeshPhongMaterial( { ambient: 0x0e7e3e, color: 0x0e7e3e, specular: 0x111111, shininess: 200 } );
            var mesh = new THREE.Mesh(geometry, mat);
            mesh.rotation.x = -0.5 * Math.PI; //将模型摆正
            mesh.scale.set(0.1, 0.1, 0.1); //缩放
            geometry.center(); //居中显示
            mesh.position.set(0, -0.25, 0.6);
            mesh.castShadow = true;
            mesh.receiveShadow = true;
            scene.add(mesh);

        });


        renderer = new THREE.WebGLRenderer({
            antialias: true, // true/false表示是否开启反锯齿
            alpha: true, // true/false 表示是否可以设置背景色透明
            precision: 'mediump', // highp/mediump/lowp 表示着色精度选择
            premultipliedAlpha: true, // true/false 表示是否可以设置像素深度（用来度量图像的分辨率）
            preserveDrawingBuffer: true, // true/false 表示是否保存绘图缓冲
            maxLights: 6, // 最大灯光数
            stencil: false, // false/true 表示是否使用模板字体或图案
            useQuaternion: true

        });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.gammaInput = true;

        //背景颜色
        renderer.setClearColor(0x6e6e6e );
        renderer.setPixelRatio(window.devicePixelRatio);
        //宽高
        renderer.setSize(1562, 666);
        container.appendChild(renderer.domElement);
        controls = new THREE.TrackballControls(camera, renderer.domElement);

    }

    function animate() {
        //静止
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
        controls.update();

        //自动转动
        // requestAnimationFrame(animate);
        // controls.update();
        // render();
    }


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


    function render() {
        var timer = Date.now() * 0.0002;
        camera.position.x = Math.cos(timer) * 3;
        camera.position.z = Math.sin(timer) * 3;
        camera.lookAt(cameraTarget);
        renderer.render(scene, camera);
    }
</script>

延伸阅读

1. 没有了
2. js点击下载文件并修改文件名