threejs当物体旋转到一定角度后消失或者背面消失不见【已解决】

撑起自己半边天

于 2024-03-19 11:35:24 发布

阅读量1.1k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： threejs 文章标签：前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_43840289/article/details/136836873

文章讲述了在使用three.js渲染几何体时，由于默认单面渲染导致物体旋转后背面不可见的问题，作者通过设置MeshBasicMaterial的side属性为THREE.DoubleSide解决了这个问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

threejs当物体旋转到一定角度后消失或者背面消失不见

场景：当你渲染一个几何体的时候发现背部不可见，旋转到移动角度又会莫名消失
原代码：

		...
      for(let i = 0; i < tlen; i ++){
   
   
      	...
        const material = new THREE.MeshBasicMaterial( {
   
    map

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

撑起自己半边天

关注关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Three 之 three.js （webgl）旋转属性函数的简单整理，以及基于此实现绕轴旋转的简单案例

仙魁XAN

04-22

8135

Three 之 three.js （webgl）旋转函数的简单整理，以及实现绕轴旋转的简单案例目录 Three 之 three.js （webgl）旋转函数的简单整理，以及实现绕轴旋转的简单案例一、简单介绍二、案例简单示意图三、案例旋转的实现原理四、注意事项五、该案例的大概实现步骤六、关键代码一、简单介绍 Three js 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。本节介绍， three.js （webgl）中几个常用旋转函数的整理，并在此

threejs texture旋转后，看不到了

qq_37200686的博客

11-09

254

【代码】threejs texture旋转后，看不到了。

参与评论您还未登录，请先登录后发表或查看评论

threejs:当物体转到一定角度,有些面消失了解决方案

weixin_42755384的博客

05-18

6362

使用:side: THREE.DoubleSide. 例如: var rectShape = new THREE.Shape(); rectShape.moveTo( 0, 0 ); rectShape.lineTo( 0, rectWidth ); rectShape.lineTo( rectLength, rectWidth ); rectShape.lineT...

使用threejs的轨道控制器滑动滚轮物体消失

sfumato的博客

01-26

566

今天使用轨道控制器时突然发现滑动滚轮物体消失，打印相机到零点距离要么为零要么为NAN。原因：对浏览器做了缩放。将浏览器缩放为正常大小即可。

threejs加载模型旋转某些角度，部分消失问题

tutouxiaoyaonie的博客

10-12

2203

threejs加载模型旋转某些角度，部分消失问题

Three.js旋转到某个角度模型消失的问题

eevee_1的博客

11-18

4090

除了渲染方向之外(FrontSide,BackSide,DoubleSide)设置要正确之外，还要注意模型的实际中心点位置。如果模型实际中心点位置跑到了相机的视锥体外面也会导致模型消失。某些动画师或者模型师导出不规范的模型时会出现此类问题。如果要把某个模型或者全部mesh改为即使物体中心点看不到也不消失可以这样： //遍历子物体，如果是mesh就让他不裁剪消失 model.trave...

three.js 模型材质变黑的以及背面消影问题

firefoxddk的博客

07-25

1325

three.js模型材质变黑的以及背面消影问题。

【记录】Three.js模型背面没有纹理

qq_42216823的博客

09-24

453

Three.js模型背面没有纹理因为是Three.js的渲染器默认是背面剔除的 var gl = renderer.domElement.getContext('webgl'); gl.disable(gl.CULL_FACE); 修改前：修改后：

Threejs 透明物体包裹问题，某些角度内部的会消失

大英雄不该去雪山打滚

08-13

2072

上方截图来源网址就是两个透明的球，一个在内一个在外，内部的会出问题，比如这个人就是内部的不透明了，我遇到的是内部的在某些角度会消失，给了好几种解决方案。

threejs 物体根据相机位置显示_threejs：将相机平稳地旋转到物体上

weixin_39934675的博客

12-20

2396

我刚刚开始研究three.js，我在编写一个函数时遇到了一些麻烦，该函数将对象位置(Vector3)和时间(以毫秒为单位)作为参数，并逐渐旋转摄像头以在此时面对它 . 基本上是内置lookAt方法的lerp版本 .首先，我尝试使用tweenjs来获得平滑的旋转过渡 . 对于开始和结束参数，我创建了一个虚拟对象，并将其位置，旋转和四元数设置为与摄像机相同，然后我使用它上的lookAt函数面向对象，并...

threeJs二维(平面)图形旋转角度后不显示

qq_39274328的博客

11-04

2242

前言：公司领导最近让我和组长搞一个3D的模型演示，要用到threeJS技术，我嘛本来也就是个刚毕业的前端实习生，三大框架还没搞明白呢让我玩3D技术，领导有任务也只能硬着头皮上了问题概述：二维图形也就是平面图导入到场景中，只在特定的角度下显示，旋转后就看不见了。旋转前：旋转一定角度后：问题原因：在代码中输出此场景的对象后发现，其属性material下面的side属性是关键参数： /...

webgl shader 边缘检测

03-30

webgl、threejs、shader检测边缘，并且渲染出边框，可以更改边框的大小颜色等，使通过shader检测边缘

three.js材质反面不可见的问题

lgldl的博客

03-23

1437

three.js材质反面不可见的问题在声明材质时加入side:THREE.DoubleSide(默认为THREE.FrontSide。其他选项有THREE.BackSide（背面）和THREE.DoubleSide（双面）。) new THREE.MeshBasicMaterial({color:0xffffff,wireframe:false,side:THREE.DoubleSide}) 加入前加入后 ...

threejs-自定义着色器材质

qq_37987033的博客

08-23

2440

使用react hooks + threejs，采用RawShaderMaterial与着色器GLSL绘出图形，例子比较简单，附带着色器语言的基本用法讲解，记录的也比较详细，相信不熟悉着色器编程的小伙伴们也能看懂。

关于 Threejs 模型旋转问题(笔记)

biyusr的专栏

04-29

6131

用到一个基础的 three.js 的拖拽旋转, 梳理了一下资料, 欧拉角旋转的问题定义的话看 Wiki, 数学描述太晦涩, 没细看https://zh.wikipedia.org/wiki... 简单的描述就是定义了沿着 X Y Z 方向的依次旋转, 来模拟空间当中的任何一个旋转, 但是用欧拉角描述旋转有问题, 就是一个空间旋转这里是拆成三个旋转来描述的, 存在问题, 就是不同的多个旋转合并是可能得到一个旋转的, 所以这种描述并不精确, 实际当中就导致一些问题了, 数学上有一些问题, 然.

three.js学习笔记（一）：THREE.Materail五种基础材质的使用

qq_43641110的博客

02-10

5006

THREE.Materail五种基础材质的基本使用：属性介绍，代码示例

three.js(3)：点、线、面（颜色插值，几何体三种渲染方式）

spider_man

08-26

4605

参考：http://www.yanhuangxueyuan.com/Three.js_course/face.html 直线模型对象两个顶点确定一条直线，构造函数THREE.Vector3()可以用来创建一个顶点位置，下面代码中Vector3(10,0,0)表示三维笛卡尔坐标系中顶点坐标(10,0,0), vertices是几何体对象的顶点坐标属性，从Javascript语言的角度看vertices是数组对象，push()是Javascript语言支持的方法，用于给数组增加元素。 &lt

Three.js学习8：基础贴图

最新发布

九天翔龙的技术博客

02-08

2922

贴图，就是把图片贴在 3D 物体材质的表面，让它具有一定的纹理，来为 3D 物体添加细节的一种方法。这使我们能够添加表面细节，而无需将这些细节建模到我们的3D对象中，从而大大精简3D模型的多边形边数，提高模型渲染性能。

【three.js :语法】Three.js中常用三种材质的属性简介

weitaming1的博客

01-12

2180

转载：THREE.JS中常用的3种材质 —- ID：标识材质 name：名称 opacity：透明度，结合transparent使用，范围为0~1 transparent：是否透明，如果为true则结合opacity设置透明度。如果为false则物体不透明 visible：是否可见，false则看不见，默认可以看见 side：侧面，觉得几何体的哪一面应用这个材质，默认为THREE.Fr...

threejs物体旋转

04-05

要将Three.js中的物体旋转，可以使用物体的rotation属性。rotation属性是一个Three.js的Euler角度对象，它定义了物体的旋转角度。以下是一个简单的示例，演示如何将物体绕Y轴旋转： ```javascript // 创建一个立方体 var geometry = new THREE.BoxGeometry(1, 1, 1); var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); var cube = new THREE.Mesh(geometry, material); // 将立方体添加到场景中 scene.add(cube); // 定义旋转速度 var rotationSpeed = 0.01; // 渲染函数 function render() { // 将立方体绕Y轴旋转 cube.rotation.y += rotationSpeed; // 渲染场景 renderer.render(scene, camera); // 循环调用渲染函数 requestAnimationFrame(render); } // 调用渲染函数 render(); ``` 在上面的示例中，我们创建了一个立方体，并将它添加到场景中。然后，我们定义了一个旋转速度变量，并在渲染函数中将立方体绕Y轴旋转。最后，我们使用requestAnimationFrame()函数循环调用渲染函数以实现动画效果。您可以通过修改旋转速度变量来改变立方体的旋转速度，并通过修改cube.rotation.y属性来改变立方体的旋转方向。