模型

模型背景怎么取消，感谢

发布于 2026-05-13 11:04:22

就是这块白色背景很难看，怎么改成透明的呢？
找了很久没找到，感谢

4458339e-e83b-48ad-873e-7a2f0104d347.png

查看更多

关注者
0
被浏览
40
关注问题 我来回答 分享 收藏 感谢 举报
地虎降天龙
地虎降天龙 图形社区官方人员 8小时前
也许宇宙中最反直觉的真理是，你给别人的越多，你得到的也越多。

请问你是用iframe嵌入的嘛
1、
const renderer = new THREE.WebGLRenderer({
alpha: true
})
2、
renderer.setClearColor(0x000000, 0)
3、
html, body {
background: transparent;
}

赞同 0 7 条回复 收藏 感谢 举报
wangmou
wangmou 8小时前
这家伙很懒，什么也没写！

非常感谢您的回答，我是用iframe嵌入的，这是我的源码，按您的要求改了，还不行，我找不出是哪里出错了

<template>
    <loading useResourceManager ></loading>
    <TresCanvas v-bind="tcConfig"><TresOrthographicCamera :position="[-1.18,9.78,10.81]" 
            :left="-1000" :right="1000" :top="620" :bottom="-620"
            :zoom="58.79" :near="-100" :far="10000" ></TresOrthographicCamera>
        <OrbitControls makeDefault :target="new THREE.Vector3(3.15,0.97,-1.03)" ></OrbitControls>
        <TresAmbientLight :color="0xffffff" :intensity="0.5" ></TresAmbientLight>
        <viewportGizmo v-bind="viewportConfig" ></viewportGizmo>

                <floor :fState="fState" :gridState="gridState" ></floor>
                <skylight v-bind="sState" ></skylight>
                <glbsList v-if="Resource.hasAllFinished.value" ></glbsList>
                <extendMeshes v-if="Resource.hasAllFinished.value" ></extendMeshes>
                <tresProcessing ></tresProcessing>
                <basiceEnv v-bind="basiceEnvState" ></basiceEnv>
        </TresCanvas>
</template>
<script setup lang="ts">
import * as THREE from 'three'
import { OrbitControls } from '@tresjs/cientos'
import { viewportGizmo } from 'PLS/useViewportGizmo'
import { Resource } from 'PLS/resourceManager'
import { basiceEnv } from 'PLS/skyBox'
import { yangyangLoading as loading } from 'PLS/UIdemo'
import { weatherCanvas } from 'PLS/digitalCity'
import floor from '../components/floor.vue'
import weather from '../components/weather.vue'
import skylight from '../components/skylight.vue'
import glbsList from '../components/glbsList.vue'
import tresProcessing from '../components/tresProcessing.vue'
import extendMeshes from '../components/extendMeshes.vue'
import dynamicComMeshes from '../components/dynamicComMeshes.vue'
import { useWebDataRuntime } from '@/common/webDataSource'
const fState = {"color":"#C2C2C2","shadowColor":"#8C8C8C","receiveShadow":true,"edge":0.35,"scale":2.93}
const gridState = {"cellSize":0.59,"cellThickness":1,"cellColor":"#404040","sectionColor":"#2F2F2F","sectionSize":3.1,"sectionThickness":2.38,"fadeDistance":22,"fadeStrength":1,"infiniteGrid":true}
const basiceEnvState = {"type":"sunset","on":false,"environmentIntensity":0.6,"environmentRotations":{"x":0,"y":0,"z":0}}
const wState = {"isRain":false,"isSnow":false,"isCloud":false,"rainConfig":{"type":"rain","speed":10,"size":5,"count":100,"intensity":1,"lightning":false,"lightningStrength":0.55,"color":"#fff"},"snowConfig":{"type":"snow","speed":10,"size":5,"count":100,"intensity":1,"color":"#fff"},"cloudConfig":{"color":"#ffffff","segments":56,"volume":0.1,"opacity":0.8,"seed":0,"fade":10,"growth":10,"speed":0.06,"bounds":{"x":15.8,"y":0,"z":15.8},"position-y":6}}
const sState = {"curTime":14.2,"direct":0.5,"intensity":1,"shadowIntensity":0.78,"toneMapping":1,"toneMappingExposure":1.06}
const pState = {"isOpenList":{"Bloom":false,"chromaticAberration":false},"configList":{"Bloom":{"radius":0.85,"intensity":4,"luminance-threshold":0.1,"luminance-smoothing":0.3,"mipmap-blur":false},"chromaticAberration":{"offsetX":0.07,"offsetY":0.07,"radialModulation":true,"modulationOffset":0}}}
const viewSettingsState = {"antialias":true,"shadows":true,"powerPreference":"high-performance"}
const renderer = new THREE.WebGLRenderer({
alpha: true
})
renderer.setClearColor(0x000000, 0)
const tcConfig = {
    clearColor: '#201919',
    windowSize: true,
    shadows: viewSettingsState.shadows,
    toneMapping: THREE.ACESFilmicToneMapping,
    toneMappingExposure: 0.6,
    shadowMapType: THREE.PCFSoftShadowMap,
    powerPreference: viewSettingsState.powerPreference,
    antialias: viewSettingsState.antialias,
}

const viewportConfig = {
    size: 100,
    lineWidth: 2,
    type: 'sphere',
    placement: 'bottom-right',
    offset: {
        right: 10,
    },
}

    Resource.loadResources([
    
            { functionName: 'GLTFLoader', url: './plugins/shuiChang/glbs/floor.glb' },
            
            { functionName: 'GLTFLoader', url: './plugins/shuiChang/glbs/gasTank.glb' },
            
            { functionName: 'GLTFLoader', url: './plugins/shuiChang/glbs/oilTruck.glb' },
            
            { functionName: 'GLTFLoader', url: './plugins/shuiChang/glbs/floor.glb' },
            
            { functionName: 'GLTFLoader', url: './plugins/shuiChang/glbs/cCringUnit.glb' },
            
            { functionName: 'GLTFLoader', url: './plugins/shuiChang/glbs/house.glb' },
            
            { functionName: 'GLTFLoader', url: './plugins/shuiChang/glbs/ccUnit.glb' },
            
            { functionName: 'GLTFLoader', url: './plugins/shuiChang/glbs/oilHeater.glb' },
            
            { functionName: 'GLTFLoader', url: './plugins/shuiChang/glbs/tower.glb' },
            
            { functionName: 'GLTFLoader', url: './plugins/shuiChang/glbs/oilTank.glb' },
            
            { functionName: 'GLTFLoader', url: './plugins/shuiChang/glbs/machine.glb' },
            
            { functionName: 'GLTFLoader', url: './plugins/shuiChang/glbs/srUnit.glb' },
            
            { functionName: 'GLTFLoader', url: './plugins/shuiChang/glbs/tank2.glb' },
            
            { functionName: 'GLTFLoader', url: './plugins/shuiChang/glbs/gtUnit.glb' },
            
            { functionName: 'GLTFLoader', url: './plugins/shuiChang/glbs/flaringDevice.glb' },
            
    ])
    </script>
    <style type="text/css">
        html, body {
        background: transparent;
        }
    </style>
0 回复 举报
wangmou
wangmou 8小时前
这家伙很懒，什么也没写！

请问是不是只有iframe，才会出现此问题呢？用qiankun微前端方案就不会出现此问题吗？

0 回复 举报
地虎降天龙
地虎降天龙 8小时前
也许宇宙中最反直觉的真理是，你给别人的越多，你得到的也越多。

你先改成我这样，然后你再根据修改调整

<template>
    <loading useResourceManager ></loading>
    <TresCanvas v-bind="tcConfig"><TresOrthographicCamera :position="[-1.18,9.78,10.81]" 
            :left="-1000" :right="1000" :top="620" :bottom="-620"
            :zoom="58.79" :near="-100" :far="10000" ></TresOrthographicCamera>
        <OrbitControls makeDefault :target="new THREE.Vector3(3.15,0.97,-1.03)" ></OrbitControls>
        <TresAmbientLight :color="0xffffff" :intensity="0.5" ></TresAmbientLight>
        <viewportGizmo v-bind="viewportConfig" ></viewportGizmo>
                <floor :fState="fState" :gridState="gridState" ></floor>
                <glbsList v-if="Resource.hasAllFinished.value" ></glbsList>
                <extendMeshes v-if="Resource.hasAllFinished.value" ></extendMeshes>
        </TresCanvas>
</template>
<script setup lang="ts">
import * as THREE from 'three'
import { OrbitControls } from '@tresjs/cientos'
import { viewportGizmo } from 'PLS/useViewportGizmo'
import { Resource } from 'PLS/resourceManager'
import { yangyangLoading as loading } from 'PLS/UIdemo'
import { weatherCanvas } from 'PLS/digitalCity'
import floor from '../components/floor.vue'
import weather from '../components/weather.vue'
import glbsList from '../components/glbsList.vue'
import extendMeshes from '../components/extendMeshes.vue'
import dynamicComMeshes from '../components/dynamicComMeshes.vue'
import { useWebDataRuntime } from '@/common/webDataSource'
const fState = {"color":"#C2C2C2","shadowColor":"#8C8C8C","receiveShadow":true,"edge":0.35,"scale":2.93}
const gridState = {"cellSize":0.59,"cellThickness":1,"cellColor":"#404040","sectionColor":"#2F2F2F","sectionSize":3.1,"sectionThickness":2.38,"fadeDistance":22,"fadeStrength":1,"infiniteGrid":true}
const basiceEnvState = {"type":"sunset","on":false,"environmentIntensity":0.6,"environmentRotations":{"x":0,"y":0,"z":0}}
const wState = {"isRain":false,"isSnow":false,"isCloud":false,"rainConfig":{"type":"rain","speed":10,"size":5,"count":100,"intensity":1,"lightning":false,"lightningStrength":0.55,"color":"#fff"},"snowConfig":{"type":"snow","speed":10,"size":5,"count":100,"intensity":1,"color":"#fff"},"cloudConfig":{"color":"#ffffff","segments":56,"volume":0.1,"opacity":0.8,"seed":0,"fade":10,"growth":10,"speed":0.06,"bounds":{"x":15.8,"y":0,"z":15.8},"position-y":6}}
const sState = {"curTime":14.2,"direct":0.5,"intensity":1,"shadowIntensity":0.78,"toneMapping":1,"toneMappingExposure":1.06}
const pState = {"isOpenList":{"Bloom":false,"chromaticAberration":false},"configList":{"Bloom":{"radius":0.85,"intensity":4,"luminance-threshold":0.1,"luminance-smoothing":0.3,"mipmap-blur":false},"chromaticAberration":{"offsetX":0.07,"offsetY":0.07,"radialModulation":true,"modulationOffset":0}}}
const viewSettingsState = {"antialias":true,"shadows":true,"powerPreference":"high-performance"}
const tcConfig = {
    windowSize: true,
    shadows: viewSettingsState.shadows,
    toneMapping: THREE.ACESFilmicToneMapping,
    toneMappingExposure: 0.6,
    shadowMapType: THREE.PCFSoftShadowMap,
    powerPreference: viewSettingsState.powerPreference,
    antialias: viewSettingsState.antialias,
    alpha: true,
    clearColor: '#000000',
    clearAlpha: 0,
}

const viewportConfig = {
    size: 100,
    lineWidth: 2,
    type: 'sphere',
    placement: 'bottom-right',
    offset: {
        right: 10,
    },
}

    Resource.loadResources([
    
            { functionName: 'GLTFLoader', url: './plugins/shuiChang/glbs/floor.glb' },
            
            { functionName: 'GLTFLoader', url: './plugins/shuiChang/glbs/gasTank.glb' },
            
            { functionName: 'GLTFLoader', url: './plugins/shuiChang/glbs/oilTruck.glb' },
            
            { functionName: 'GLTFLoader', url: './plugins/shuiChang/glbs/floor.glb' },
            
            { functionName: 'GLTFLoader', url: './plugins/shuiChang/glbs/cCringUnit.glb' },
            
            { functionName: 'GLTFLoader', url: './plugins/shuiChang/glbs/house.glb' },
            
            { functionName: 'GLTFLoader', url: './plugins/shuiChang/glbs/ccUnit.glb' },
            
            { functionName: 'GLTFLoader', url: './plugins/shuiChang/glbs/oilHeater.glb' },
            
            { functionName: 'GLTFLoader', url: './plugins/shuiChang/glbs/tower.glb' },
            
            { functionName: 'GLTFLoader', url: './plugins/shuiChang/glbs/oilTank.glb' },
            
            { functionName: 'GLTFLoader', url: './plugins/shuiChang/glbs/machine.glb' },
            
            { functionName: 'GLTFLoader', url: './plugins/shuiChang/glbs/srUnit.glb' },
            
            { functionName: 'GLTFLoader', url: './plugins/shuiChang/glbs/tank2.glb' },
            
            { functionName: 'GLTFLoader', url: './plugins/shuiChang/glbs/gtUnit.glb' },
            
            { functionName: 'GLTFLoader', url: './plugins/shuiChang/glbs/flaringDevice.glb' },
            
    ])
    </script>
<style>
html,
body,
#app {
    margin: 0;
    background: transparent !important;
}

canvas {
    background: transparent !important;
}
</style>
0 回复 举报
地虎降天龙
地虎降天龙 8小时前
也许宇宙中最反直觉的真理是，你给别人的越多，你得到的也越多。

我觉得你思路还有调整，你可能对three了解的很少
你这种先把 tvt.js的背景换成你现在的背景，然后iframe平铺全屏，不用透明
最后把你的周围的图标，放在 iframe的上一层

0 回复 举报
wangmou
wangmou 8小时前
这家伙很懒，什么也没写！

@hawk86104 大佬，太感谢了，我研究了两天，可以了

0 回复 举报
wangmou
wangmou 8小时前
这家伙很懒，什么也没写！

@hawk86104 因为公司要搞数字孪生，我也是刚接触，我试试您说的

0 回复 举报
地虎降天龙
地虎降天龙 7小时前
也许宇宙中最反直觉的真理是，你给别人的越多，你得到的也越多。

@wangmou 好的感谢你们的支持，希望创造出更多的产品，后面也多多给我们支持

0 回复 举报
请登录后再发布评论，点击登录
追加回复
登录 注册新账号
1 个回答

撰写答案

请登录后再发布答案，点击登录
登录 注册新账号

相关问题

1
引入模型后给模型添加事件
2
Blender粒子效果导出gitf格式粒子效果就没了
3
单个模型动画以及事件
4
模型点击事件怎么只命中模型而不命中模型的内部模型
5
实现机房容量统计功能

热门文章

1
几何学——坐标系概括
2
几何学——欧拉角与万向锁看这一篇就够了(含threejs demo演示)
3
超详细讲解UE5材质基础
4
WebGL通常的错误提示以及解决方法
5
几何学——矩阵基础知识汇总
6
初步探讨一下Shader中的SDF应用
7
几何学——矢量的几何运算
8
shader通常的错误提示以及解决方法
9
关于homeassistant的数字家居 免费开源部署文档 都在这里
10
svg / gif免费下载的资源网站分享

热门问题

1
UE5中，新建关卡为什么是漆黑一片？如何设置？
2
Cesium展示3D格点数据（原始数据为nc格点数据）进行体绘制渲染思路
3
最近想学习webgl，不知道从哪里入手，请问有什么具体学习路线嘛？
4
threejs怎么生成antv或者deckgl具有聚合效果的热力图
5
webgl怎么添加git动图呢
6
煤矿三维数字点云项目需求
7
cesium绘制路线,然后模型根据路线运动动画
8
Threejs/webgl高级人才招聘
9
视口设置有区别导致帧缓冲的纹理渲染不出来
10
请教一下关于cesium的GIS方面的问题，街道数据的获得

热门标签

shader WebGL cesium threeJS 招聘 gis vue3 区域场景编辑器 模型 TvT 模型加载 区域编辑器 glsl 地图数据 vite 点击事件 城市gis VUE 绘制点 建模 three UE5 自定义着色器 vue3-ts-cesium-map-show cesium贴图材质 插件 WEBGIS useTresContext goview @tresjs/core texture 实现热力图 模型加载报错 求助 3d tiles 模拟导航 三维图表 goview组件 插件购买确认 动画 事件 需求 开发 模型获取 javascript html css 集成tvt.js插件子应用 3D算法渲染 base深圳龙华大和

等待解答

问
北京先觉至诚科技有限公司 诚邀技术合伙人
问
招聘web3d编辑器开发工程师
问
招3D前端开发工程师-上海
问
方舆科技webgis前端开发工程师
问
当在组件中引入useTresContext时模型不显示，控制台报错的问题
问
3D算法渲染工程师招聘
问
深圳知名运动相机招聘。
问
硅谷base初创招聘软件工程师
问
TvT或Threejs中报错，Uncaught TypeError: ‘get‘ on proxy: property ‘modelViewMatrix‘ is a read-only and non
问
基于mapbox的风场交互问题

推荐达人

hh-hang
hh-hang
0个答案 0次被采纳
三维老哥
三维老哥
0个答案 0次被采纳
发呆的石头
发呆的石头
3个答案 0次被采纳
kanz
kanz
2个答案 0次被采纳
JesueLike
JesueLike
3个答案 0次被采纳

发布
问题

分享
好友

手机
浏览

扫码手机浏览