h5获取canvasCode 返回空 uni.createSelectorQuery().in(this).select('#myCanvas').fields()

2***@qq.com (作者)

<template>

<view style="position: relative;width:100%;height:100%;margin:0;padding:0;">

<view style="height: 130px;position:absolute;width:100%;z-index:999;margin:0;padding:0;top:0;left:0;">

<view class="ccard-item flex" style="text-overflow: ellipsis; padding: 5px">

<picker @change="bindPickerChange" class="cuspicker" range-key="lable" :range="partNumberList"

style="width: 100%; border: 1px solid #cccccc; height: 40rpx; padding: 5px;border-radius: 20px;">

<text class="cuIcon-close" style="float: right;font-size:32rpx;" @click.stop="clearValue"></text>

<view class="picker cuspicker_item" style="padding-left: 4px;">{{partNumber?partNumber:'请选择料号' }}

</view>

</picker>

</view>

<view style="padding: 5px; font-weight: 500; font-size: 14px;">

车辆装载展示

</view>

<view class="vehicle">

<view>

<view class="ccard-item flex" style="text-overflow: ellipsis;">

<text class="title">供应商：</text>

<text>{{model.supplier}}</text>

</view>

</view>

<view>

<view class="ccard-item flex" style="text-overflow: ellipsis;">

<text class="title">容器：</text>

<text>{{model.boxTypeName}}</text>

</view>

</view>

<view>

<view class="ccard-item flex" style="text-overflow: ellipsis;">

<text class="title">物料：</text>

<text>{{model.productName}}</text>

</view>

</view>

<view>

<view class="ccard-item flex" style="text-overflow: ellipsis;">

<text class="title">数量：</text>

<text>{{model.qty}}</text>

</view>

</view>

</view>

</view>

<view style="z-index:1;" class="canvas-container">

<canvas class='myCanvas' id='myCanvas' ref="myCanvas" canvas-id="myCanvas" type="webgl"

style="'width:400px; height:'400px'" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"

@click="mouseClick" />

</view>

</view>

</template>

<script>

import * as THREE from './threeWeapp/three.weapp.js'

import {

getCurrentInstance

} from 'vue';

import {

OrbitControls

} from './three/OrbitControls.js'

export default {

data() {

return {

mSceneWidth: 0, // 手机屏幕宽度

mSceneHeight: 0, // 手机屏幕高度

worldFocus: null, // 世界焦点（模型放置，相机围绕的中心）

mCanvasId: null,

mSence: null,

mCamera: null,

redCube: null,

renderAnimFrameId: null, // 渲染帧动画id

shipmentId: null,

model: {

supplier: '',

boxTypeName: '',

productName: '',

qty: ''

},

SELECTED: null,

partNumber: '',

partNumberList: ['中国', '美国', '巴西', '日本'],

};

},

// 页面加载时

onLoad(option) {

this.shipmentId = option.shipmentId;

// 获取手机屏幕宽高

this.mSceneWidth = uni.getWindowInfo().windowWidth;

this.mSceneHeight = uni.getWindowInfo().windowHeight

// 设置世界中心

this.worldFocus = new THREE.Vector3(0, 0, 0);

},

// 页面加载完毕后

onReady() {

const systemInfo = uni.getSystemInfoSync();

if (systemInfo.uniPlatform === 'mp-weixin') {

uni.createSelectorQuery().select('#myCanvas').node().exec((res) => { // 获取 canvasId

this.mCanvasId = res[0].node._canvasId;

// 注册画布

const mCanvas = THREE.global.registerCanvas(this.mCanvasId, res[0].node);

const params = {

shipmentId: this.shipmentId

}

this.$store.dispatch('miniApp/wxGetVirtualShipmentFor3D', params).then((res) => {

                    if (res && res.value && res.value.rows) {  

                        const data = res.value.rows[0].marerials  

                        this.partNumberList = data.map((item, index) => {  

                            return {  

                                lable: item,  

                                value: item  

                            }  

                        })  

                        // 开始初始化  

                        this.init(mCanvas, res.value.rows[0].capacity, res.value.rows[0].datas);  



                    }  

                })  

            });  

        } else {  

            setTimeout(() => {  

                uni.createSelectorQuery().in(this).select('#myCanvas').fields({  

                    node: true,  

                }).exec(res => {  

                    const canvas = res[0];  

                    console.log(canvas); //空的  

                });  

            }, 500)  

            // const params = {  

            //  shipmentId: this.shipmentId  

            // }  

            // this.$store.dispatch('miniApp/wxGetVirtualShipmentFor3D', params).then((res) => {  

            //  if (res && res.value && res.value.rows) {  

            //          const data = res.value.rows[0].marerials  

            //          this.partNumberList = data.map((item, index) => {  

            //              return {  

            //                  lable: item,  

            //          value: item  

            //              }  

            //          })  

            //       this.init(mCanvas, res.value.rows[0].capacity, res.value.rows[0].datas);  

            //  }  

            // })  

        }  

    },  

    // 页面卸载时  

    onUnload() {  

        // 清理渲染帧动画  

        THREE.global.canvas && THREE.global.canvas.cancelAnimationFrame(this.renderAnimFrameId);  

        // 清理canvas对象  

        THREE.global.unregisterCanvas(this.mCanvasId);  

    },  

    methods: {  

        clearValue() {  

            this.partNumber = ''  

            this.onchangeColor()  

        },  

        //选择料号  

        bindPickerChange(e) {  

            const value = e.detail.value  

            this.partNumber = this.partNumberList[value].lable  

            this.onchangeColor()  

        },  

        onchangeColor() {  

            const redCube = this.redCube  

            if (this.partNumber != "") {  

                for (var i = 0; i < redCube.children.length; i++) {  

                    var material = redCube.children[i].position.supplier + "：" + redCube.children[i].position  

                        .productName;  

                    if (material == this.partNumber) {  

                        redCube.children[i].material.color.setHex(0xCDAA7D);  

                    } else {  

                        redCube.children[i].material.color.setHex(0xc1bfbf);  

                    }  

                }  

            } else {  

                for (var i = 0; i < redCube.children.length; i++) {  

                    redCube.children[i].material.color.setHex(redCube.children[i].position.color);  

                }  

            }  

        },  

        // 触摸开始  

        touchStart(e) {  

            THREE.global.touchEventHandlerFactory('canvas', 'touchstart')(e)  

        },  

        // 触摸移动中  

        touchMove(e) {  

            THREE.global.touchEventHandlerFactory('canvas', 'touchmove')(e)  

        },  

        // 触摸结束  

        touchEnd(e) {  

            THREE.global.touchEventHandlerFactory('canvas', 'touchend')(e)  

        },  

        mouseClick(event) {  

            var raycaster = new THREE.Raycaster();  

            // 鼠标控制对象  

            const mouse = new THREE.Vector2();  



            // 得到鼠标相对于容器的坐标  

            mouse.x = (event.detail.x / this.mSceneWidth) * 2 - 1;  

            mouse.y = -(event.detail.y / this.mSceneHeight) * 2 + 1;  



            // 执行射线检测  

            raycaster.setFromCamera(mouse, this.mCamera);  

            // 判断指定的对象中哪些被该光线照射到了，在arrGroup中筛选  

            var intersects = raycaster.intersectObjects(this.redCube.children);  

            // const intersects = raycaster.intersectObjects(scene.children)  

            // 射线涉及到的物体集合  

            if (intersects.length > 0) {  

                if (this.SELECTED) {  

                    this.SELECTED.material.color.setHex(this.SELECTED.currentHex);  

                }  

                this.SELECTED = intersects[0].object;  

                // console.log(SELECTED,'SELECTEDSELECTED');  

                this.SELECTED.currentHex = this.SELECTED.material.color.getHex(); //记录当前选择的颜色  

                this.SELECTED.material.color.setHex(0xffffff);  

                const clickObj = intersects[0]  

                this.model = clickObj.object.position  

                console.log('点击的当前模型：', clickObj)  

                console.log('供应商：', clickObj.object.position.supplier)  

                console.log('容器：', clickObj.object.position.boxTypeName)  

                console.log('物料：', clickObj.object.position.productName)  

                console.log('数量：', clickObj.object.position.qty)  



            } else {  

                this.model.supplier = ''  

                this.model.boxTypeName = ''  

                this.model.productName = ''  

                this.model.qty = ''  

                if (this.SELECTED) this.SELECTED.material.color.set(this.SELECTED.currentHex); //恢复选择前的默认颜色  

                this.SELECTED = null;  

            }  

        },  



        init(canvas, capacity, datas) {  

            // 创建场景  

            this.mScene = new THREE.Scene();  

            this.mScene.background = new THREE.Color("#e6e6e6"); // 场景背景颜色  



            // 创建摄像机  

            this.mCamera = new THREE.PerspectiveCamera(50, this.mSceneWidth / this.mSceneHeight, 0.1, 1000);  

            this.mCamera.position.set(capacity.capacity_length * 10, capacity.capacity_height * 12, capacity  

                .capacity_width * 8);  

            this.mCamera.lookAt(this.worldFocus);  



            // 创建光线  

            const light1 = new THREE.HemisphereLight(0xffffff, 0x444444); // 半球光（天空颜色，地面颜色，光照强度）  

            light1.position.set(0, 20, 0);  

            this.mScene.add(light1);  

            const light2 = new THREE.DirectionalLight(0xffffff); // 平行光（颜色， 光照强度）  

            light2.position.set(0, 0, 20);  

            this.mScene.add(light2);  



            // 创建渲染器  

            const renderer = new THREE.WebGLRenderer({  

                canvas: canvas,  

                antialias: true,  

                alpha: true  

            });  

            renderer.setSize(this.mSceneWidth, this.mSceneHeight);  



            // 创建控制器  

            const controls = new OrbitControls(this.mCamera, renderer.domElement);  

            controls.target.set(this.worldFocus.x, this.worldFocus.y, this.worldFocus.z); // 摄像机围绕旋转的中心  

            controls.enablePan = false; // 禁止摄像机平移  

            controls.enableDamping = true; // 设置阻尼，需要在 update 调用  

            controls.dampingFactor = 0.09;  



            // 渲染（闭包）  

            var render = () => {  

                // 帧动画  

                this.renderAnimFrameId = canvas.requestAnimationFrame(render);  



                //光源跟随相机  

                var vector = this.mCamera.position.clone();  

                light2.position.set(vector.x, vector.y, vector.z);  



                // 控制器  

                if (controls.enabled) controls.update();  

                // 渲染场景  

                renderer.render(this.mScene, this.mCamera);  

            };  



            var intcapacity = (capacity) => {  



                var vehicleCube = new THREE.Object3D();  



                var spaceLength = (capacity.capacity_length) * 3;  

                var spaceWidth = (capacity.capacity_width) * 3;  

                var spaceHeight = (capacity.capacity_height) * 3;  



                var lineGeometry = new THREE.Geometry();  

                var lineMaterial = new THREE.LineBasicMaterial({  

                    color: 0x000000,  

                    linewidth: 2  

                });  



                var circleGeometry = new THREE.SphereGeometry(0.4, 8, 8);  

                var circleMaterial = new THREE.MeshBasicMaterial({  

                    color: 0x000000  

                });  



                var cubeArray = [];  

                var circleArray = [];  



                lineGeometry.vertices.push(new THREE.Vector3(spaceLength, spaceHeight, spaceWidth),  

                    new THREE  

                    .Vector3(spaceLength, -spaceHeight, spaceWidth));  

                cubeArray.push(lineGeometry);  



                lineGeometry = new THREE.Geometry();  

                lineGeometry.vertices.push(new THREE.Vector3(spaceLength, spaceHeight, spaceWidth),  

                    new THREE  

                    .Vector3(spaceLength, spaceHeight, -spaceWidth));  

                cubeArray.push(lineGeometry);  



                lineGeometry = new THREE.Geometry();  

                lineGeometry.vertices.push(new THREE.Vector3(spaceLength, spaceHeight, -spaceWidth),  

                    new THREE  

                    .Vector3(spaceLength, -spaceHeight, -spaceWidth));  

                cubeArray.push(lineGeometry);  



                lineGeometry = new THREE.Geometry();  

                lineGeometry.vertices.push(new THREE.Vector3(spaceLength, -spaceHeight, -spaceWidth),  

                    new THREE  

                    .Vector3(spaceLength, -spaceHeight, spaceWidth));  

                cubeArray.push(lineGeometry);  



                lineGeometry = new THREE.Geometry();  

                lineGeometry.vertices.push(new THREE.Vector3(-spaceLength, spaceHeight, spaceWidth),  

                    new THREE  

                    .Vector3(-spaceLength, -spaceHeight, spaceWidth));  

                cubeArray.push(lineGeometry);  



                lineGeometry = new THREE.Geometry();  

                lineGeometry.vertices.push(new THREE.Vector3(-spaceLength, spaceHeight, spaceWidth),  

                    new THREE  

                    .Vector3(-spaceLength, spaceHeight, -spaceWidth));  

                cubeArray.push(lineGeometry);  



                lineGeometry = new THREE.Geometry();  

                lineGeometry.vertices.push(new THREE.Vector3(-spaceLength, spaceHeight, -spaceWidth),  

                    new THREE  

                    .Vector3(-spaceLength, -spaceHeight, -spaceWidth));  

                cubeArray.push(lineGeometry);  



                lineGeometry = new THREE.Geometry();  

                lineGeometry.vertices.push(new THREE.Vector3(-spaceLength, -spaceHeight, -spaceWidth),  

                    new THREE  

                    .Vector3(-spaceLength, -spaceHeight, spaceWidth));  

                cubeArray.push(lineGeometry);  



                lineGeometry = new THREE.Geometry();  

                lineGeometry.vertices.push(new THREE.Vector3(spaceLength, spaceHeight, spaceWidth),  

                    new THREE  

                    .Vector3(-spaceLength, spaceHeight, spaceWidth));  

                cubeArray.push(lineGeometry);  



                lineGeometry = new THREE.Geometry();  

                lineGeometry.vertices.push(new THREE.Vector3(spaceLength, spaceHeight, -spaceWidth),  

                    new THREE  

                    .Vector3(-spaceLength, spaceHeight, -spaceWidth));  

                cubeArray.push(lineGeometry);  



                lineGeometry = new THREE.Geometry();  

                lineGeometry.vertices.push(new THREE.Vector3(spaceLength, -spaceHeight, spaceWidth),  

                    new THREE  

                    .Vector3(-spaceLength, -spaceHeight, spaceWidth));  

                cubeArray.push(lineGeometry);  



                lineGeometry = new THREE.Geometry();  

                lineGeometry.vertices.push(new THREE.Vector3(spaceLength, -spaceHeight, -spaceWidth),  

                    new THREE  

                    .Vector3(-spaceLength, -spaceHeight, -spaceWidth));  

                cubeArray.push(lineGeometry);  



                for (var i = 0; i < cubeArray.length; i++) {  

                    vehicleCube.add(new THREE.Line(cubeArray[i], lineMaterial));  

                }  



                //     var lineGeometry = new THREE.Geometry();//生成几何体  

                //     lineGeometry.vertices.push(new THREE.Vector3(spaceLength, -spaceHeight, -spaceWidth));//线段的两个顶点  

                //     lineGeometry.vertices.push(new THREE.Vector3(spaceLength*1.3, -spaceHeight, -spaceWidth));  



                //     var line = new THREE.Line(lineGeometry, new THREE.LineDashedMaterial({  

                //         color: 0x000000,//线段的颜色  

                //         dashSize: 1,//短划线的大小  

                //         gapSize: 3//短划线之间的距离  

                //     }));  

                //     line.computeLineDistances();//不可或缺的，若无，则线段不能显示为虚线  

                //     vehicleCube.add(line);  



                //     var lineGeometry = new THREE.Geometry();//生成几何体  

                //     lineGeometry.vertices.push(new THREE.Vector3(spaceLength, -spaceHeight, spaceWidth));//线段的两个顶点  

                //     lineGeometry.vertices.push(new THREE.Vector3(spaceLength*1.3, -spaceHeight, spaceWidth));  



                //     var line = new THREE.Line(lineGeometry, new THREE.LineDashedMaterial({  

                //         color: 0x000000,//线段的颜色  

                //         dashSize: 1,//短划线的大小  

                //         gapSize: 3//短划线之间的距离  

                //     }));  

                //     line.computeLineDistances();//不可或缺的，若无，则线段不能显示为虚线  

                //     vehicleCube.add(line);  



                this.mScene.add(vehicleCube);  



            };  



            var initUnit = (capacity, unitArray) => {  



                var spaceLength = (capacity.capacity_length) * 3;  

                var spaceWidth = (capacity.capacity_width) * 3;  

                var spaceHeight = (capacity.capacity_height) * 3;  



                var cubeSize = 6;  



                this.redCube = new THREE.Object3D();  



                for (var i = 0; i < unitArray.length; i++) {  



                    var unitLength = (unitArray[i].length) * cubeSize;  

                    var unitWidth = (unitArray[i].width) * cubeSize;  

                    var unitHeight = (unitArray[i].height) * cubeSize;  



                    var unitX1 = unitArray[i].x;  

                    var unitY1 = unitArray[i].y;  

                    var unitZ1 = unitArray[i].z;  



                    var unitX = (unitArray[i].x) * cubeSize;  

                    var unitY = (unitArray[i].y) * cubeSize;  

                    var unitZ = (unitArray[i].z) * cubeSize;  



                    //立方体  

                    var cubeGeometry = new THREE.CubeGeometry(unitLength, unitHeight, unitWidth);  



                    //创建边框  

                    var cubeEdges = new THREE.EdgesGeometry(cubeGeometry, 2);  

                    var edgesMtl = new THREE.LineBasicMaterial({  

                        color: 0x454545  

                    });  

                    var cubeLine = new THREE.LineSegments(cubeEdges, edgesMtl);  



                    var cubeMaterial = new THREE.MeshLambertMaterial({  

                        color: unitArray[i].color * 0xffffff,  

                        opacity: 1  

                    }); //   

                    var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);  



                    cube.position.x = -spaceLength + unitX + unitLength / 2;  

                    cube.position.y = -spaceHeight + unitZ + unitHeight / 2;  

                    cube.position.z = spaceWidth - unitY - unitWidth / 2; // - (this.mSceneWidth/2);  

                    cube.position.name = JSON.stringify(unitArray[i]);  

                    cube.position.id = unitArray[i].id;  

                    cube.position.unitNo = unitArray[i].unit_no;  

                    cube.position.supplier = unitArray[i].order_release__origin_name;  

                    cube.position.productName = unitArray[i].product_name;  

                    cube.position.boxTypeName = unitArray[i].box_type__name;  

                    cube.position.qty = unitArray[i].qty;  

                    cube.position.length = unitArray[i].length;  

                    cube.position.width = unitArray[i].width;  

                    cube.position.height = unitArray[i].height;  

                    cube.position.color = unitArray[i].color * 0xffffff;  

                    cube.position.x1 = unitX1;  

                    cube.position.y1 = unitY1;  

                    cube.position.z1 = unitZ1;  



                    cube.add(cubeLine);  

                    this.redCube.add(cube);  



                }  

                this.mScene.add(this.redCube);  



            }  



            intcapacity(capacity);  

            initUnit(capacity, datas);  

            render();  



        }  



    }  

}  

</script>

<style>

.vehicle {

padding: 20rpx;

}

</style>

2024-10-28 14:08

2***@qq.com (作者)

返回的是空对象

2024-10-28 14:09