#

luxiaotao1123

2021-12-28 ebf2ca66bd8d6324080d52298b7a737483110062

#

 static/js/app.js

@@ -30,7 +30,7 @@
        this.direction = new THREE.Vector3();
        this.raycaster = null;
        this.prevTime = performance.now();//上一次render的时间
        this.backgroundType = true;
        this.backgroundType = false;

        this.start = function () {
            this.initMain();
@@ -65,20 +65,7 @@
        }
        this.initCamera = function () {
            if (this.camera === null) {
                //声明一个透视相机，
                // 视角：60，
                // 纵横比aspect:全屏，使用的是浏览器的宽度/高度
                //近平面near：0.1
                //远平面视角far:10000
                this.camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 50000);
                /*
                设置相机位置，注意threejs中的坐标系采用的是右手坐标系
                 */
                // this.camera.position.x = 0;
                // this.camera.position.y = 1000;
                // this.camera.position.z = 600;
                // //相机的朝向
                // this.camera.lookAt(0, 0, 0);
                this.camera.position.set( -350, 600, 1100 );
                this.camera.lookAt( this.scene.position );
                //将相机放到场景中
@@ -91,54 +78,46 @@
        this.initRenderer = function () {
            this.renderer = new THREE.WebGLRenderer();

            // this.renderer.outputEncoding = THREE.sRGBEncoding;
            // this.renderer.toneMapping = THREE.ACESFilmicToneMapping;
            // this.renderer.toneMappingExposure = 0.5;

            // this.renderer.outputEncoding = THREE.sRGBEncoding;
            // this.renderer.shadowMap.enabled = true;
            // this.renderer.toneMapping = THREE.ReinhardToneMapping;
            //
            this.renderer = new THREE.WebGLRenderer({
                antialias: true,
                logarithmicDepthBuffer: true
            });
            this.renderer.setSize(window.innerWidth, window.innerHeight);
            this.renderer.setPixelRatio( window.devicePixelRatio );
            this.renderer.setSize( window.innerWidth, window.innerHeight );
            this.renderer.shadowMap.enabled = true;
            this.renderer.shadowMap.type = THREE.BasicShadowMap;
            this.dom = document.getElementById("container");
            this.dom.appendChild( this.renderer.domElement );

            this.dom.appendChild(this.renderer.domElement);

        }
        this.initLight = function () {

            //首先添加个环境光
            let ambient = new THREE.AmbientLight(0xffffff, 1); //AmbientLight,影响整个场景的光源
            ambient.position.set(0, 0, 0);
            this.addObject(ambient);
            //添加平行光,平行光类似于太阳光
            let directionalLight = new THREE.DirectionalLight(0xffffff, 0.3);//模拟远处类似太阳的光源
            directionalLight.position.set(0, 200, 0);
            this.addObject(directionalLight);
            //设置点光源
            let pointLight1 = new THREE.PointLight(0xffffff, 0.3);
            pointLight1.position.set(-500, 200, 0);
            this.addObject(pointLight1);
            let pointLight2 = new THREE.PointLight(0xffffff, 0.3);
            pointLight2.position.set(500, 200, 0);
            this.addObject(pointLight2);

            // const bulbGeometry = new THREE.SphereGeometry( 0.02, 16, 8 );
            // var bulbLight = new THREE.PointLight( 0xffee88, 1, 100, 2 );
            //
            // var bulbMat = new THREE.MeshStandardMaterial( {
            //     emissive: 0xffffee,
            //     emissiveIntensity: 1,
            //     color: 0x000000
            // } );
            // bulbLight.add( new THREE.Mesh( bulbGeometry, bulbMat ) );
            // bulbLight.position.set( -500, 22, 0 );
            // bulbLight.castShadow = true;
            // this.addObject( bulbLight );
            //
            // var hemiLight = new THREE.HemisphereLight( 0xddeeff, 0x0f0e0d, 0.02 );
            // this.addObject( hemiLight );
            // 添加平行光,平行光类似于太阳光
            // let directionalLight = new THREE.DirectionalLight(0xffffff, 0.3);//模拟远处类似太阳的光源
            // directionalLight.position.set(0, 200, 0);
            // this.addObject(directionalLight);
            // //设置点光源
            // let pointLight1 = new THREE.PointLight(0xffffff, 0.3);
            // pointLight1.position.set(-500, 200, 0);
            // this.addObject(pointLight1);
            // let pointLight2 = new THREE.PointLight(0xffffff, 0.3);
            // pointLight2.position.set(500, 200, 0);
            // this.addObject(pointLight2);

            // 阴影聚光灯
            let pointLight = new THREE.SpotLight(0xFFFAFA,1);
            pointLight.position.set(0, 1500, 2500);
            pointLight.castShadow = true;
            pointLight.shadow.camera.near = 2000;
            pointLight.shadow.camera.far = 10000;
            pointLight.shadow.mapSize.height = 100000;
            pointLight.shadow.mapSize.width = 100000;
            // 将所有创建的物体加入到场景中去
            this.addObject(pointLight);
        }
        this.initOrbitControl = function () {
            this.orbitControl = new OrbitControls(this.camera, this.renderer.domElement);

 static/js/object/StoreConvey.js

@@ -46,8 +46,11 @@
                            color: 0x000000
                        });
                    }
                    child.castShadow = true;
                    child.receiveShadow = true;
                }
            });

            chainList.map(item => {
                that.object.addObject(customize(obj.clone(), item));
            })
@@ -59,6 +62,8 @@
                    child.material = new THREE.MeshLambertMaterial({
                        color: 0x444444
                    });
                    child.castShadow = true;
                    child.receiveShadow = true;
                }
            });
            rollerList.map(item => {

 static/js/object/StoreConvey0.js

File was deleted

 static/js/object/StoreCrn.js

@@ -26,41 +26,6 @@
    this.crnForkWidth = option.crnFork.width||20;//库位宽
    this.crnForkHeight = option.crnFork.height||30;//库位高

    // 立柱
    // var a = new THREE.Mesh(new THREE.BoxBufferGeometry(this.crnBodyLength, this.crnBodyHeight, this.crnBodyWidth), new THREE.MeshBasicMaterial({
    //     color: 0xff0000,
    //     transparent: true,
    //     opacity: .3
    // }))
    // a.name = option.crnNo + "-body";
    // a.position.x = option.crnBody.position.x;
    // a.position.y = option.crnBody.position.y + this.crnBodyHeight/2;
    // a.position.z = option.crnBody.position.z - this.crnBodyWidth/2;
    // object.addObject(a);
    // 载货台
    // var b = new THREE.Mesh(new THREE.BoxBufferGeometry(this.crnLoadLength, this.crnLoadHeight, this.crnLoadWidth), new THREE.MeshBasicMaterial({
    //     color: 0x00ff00,
    //     transparent: true,
    //     opacity: .5
    // }))
    // b.name = option.crnNo + "-load";
    // b.position.x = option.crnLoad.position.x;
    // b.position.y = option.crnLoad.position.y + this.crnLoadHeight/2;
    // b.position.z = option.crnLoad.position.z - this.crnLoadWidth/2 + 5;
    // object.addObject(b);
    // 叉牙
    // var c = new THREE.Mesh(new THREE.BoxBufferGeometry(this.crnForkLength, this.crnForkWidth, this.crnForkHeight), new THREE.MeshBasicMaterial({
    //     color: 0xff00ff,
    //     transparent: true,
    //     opacity: 1
    // }))
    // c.name = option.crnNo + "-fork";
    // c.position.x = option.crnFork.position.x;
    // c.position.y = option.crnFork.position.y + this.crnLoadHeight/2;
    // c.position.z = option.crnFork.position.z - this.crnLoadWidth/2;
    // object.addObject(c);


    const manager = new THREE.LoadingManager();
    new MTLLoader(manager)
        .setPath( '../static/model/obj/' )
@@ -71,6 +36,8 @@
                .setPath( '../static/model/obj/' )
                .load( '堆垛机本体.obj', function ( obj ) {
                    obj.traverse (function (child) {
                        child.castShadow = true;
                        child.receiveShadow = true;
                        if (child instanceof THREE.Mesh) {
                            child.material = new THREE.MeshLambertMaterial({
                                color: 0xCD6839
@@ -97,6 +64,8 @@
                .load( '载货台.obj', function ( obj ) {
                    obj.traverse (function (child) {
                        if (child instanceof THREE.Mesh) {
                            child.castShadow = true;
                            child.receiveShadow = true;
                            child.material = new THREE.MeshLambertMaterial({
                                color: 0xD2691E
                            });
@@ -122,6 +91,8 @@
                .load( '货叉.obj', function ( obj ) {
                    obj.traverse (function (child) {
                        if (child instanceof THREE.Mesh) {
                            child.castShadow = true;
                            child.receiveShadow = true;
                            child.material = new THREE.MeshLambertMaterial({
                                color: 0x363636
                            });