效果展示#

关于Threejs#

Three.js是基于原生WebGL封装运行的三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。

Iframe#

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

为了方便引入，采用iframe框架，可以有效减少引入处的代码长度。

源码仓库#

点我

仓库内3d文件夹下面即是所有源代码。如果不需要自定义修改，建议复制整个文件夹到你的目录内，如果需要自定义模型和样式，请参照下面的关键代码解释

关键代码#

如果需要更改js文件的位置需要修改 html 文件里面的位置和 stl.js 文件内的位置。

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

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

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

    let container, stats;

    let camera, cameraTarget, scene, renderer;

    init();
    animate();

    function init() {

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

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

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

        // Ground
        //
        const plane = new THREE.Mesh(
            new THREE.PlaneGeometry( 40, 40 ),
            new THREE.MeshPhongMaterial( { color: 0x999999, specular: 0x101010 } )
        );
        plane.rotation.x = - Math.PI / 2;
        plane.position.y = - 0.5;
        scene.add( plane );

        plane.receiveShadow = true;


        

        const loader = new STLLoader();
        

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

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

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

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

            mesh.castShadow = true;
            mesh.receiveShadow = true;

            scene.add( mesh );

        } );

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

        addShadowedLight( 1, 1, 1, 0xffffff, 1.35 );
        addShadowedLight( 0.5, 1, - 1, 0xffaa00, 1 );
        // renderer

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

        renderer.shadowMap.enabled = true;

        container.appendChild( renderer.domElement );

        // stats

        stats = new Stats();
        container.appendChild( stats.dom );

        //

        window.addEventListener( 'resize', onWindowResize );

    }

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

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

        directionalLight.castShadow = true;

        const d = 1;
        directionalLight.shadow.camera.left = - d;
        directionalLight.shadow.camera.right = d;
        directionalLight.shadow.camera.top = d;
        directionalLight.shadow.camera.bottom = - d;

        directionalLight.shadow.camera.near = 1;
        directionalLight.shadow.camera.far = 4;

        directionalLight.shadow.bias = - 0.002;

    }

    function onWindowResize() {

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

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

    }

    function animate() {

        requestAnimationFrame( animate );

        render();
        stats.update();

    }

    function render() {

        const timer = Date.now() * 0.0005;

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

        camera.lookAt( cameraTarget );

        renderer.render( scene, camera );

    }