虐人心

虐人心

32 文章 19521 浏览

Three.js 保持模型相对曲面表面姿态 从一个向量旋转到另一个向量

一个移动的模型出现在其它模型表面的不同位置,希望相对模型表面切面或者说法线方向保持一个特定的姿态。 应用场景: 移动几何平面始终垂直其它模型表面法线方向——鼠标在三维场景中移动,一个几何平面跟着鼠标移动,鼠标移动的过程中会指向一个模型表面的位置,希望控制移动的几何平面始终平行于当前位置曲面的切面,或者说移动的几何平面始终垂直曲面的法线方向。 比如三维场景中,一个人在地面上走动,希望人的姿态始终垂直…

虐人心 2021-09-26 08:52:00 浏览 936 评论 0 收藏 0

图片作为 Three.js 背景

通过 Threejs 场景对象 Scene 的背景属性 .background 可以把一张图片作为 Threejs 渲染的背景。 var scene = new THREE.Scene(); // 创建一个纹理图片加载器加载图片 var textureLoader = new THREE.TextureLoader(); // 加载背景图片 var texture = textureLoader.…

虐人心 2021-09-20 21:20:23 浏览 843 评论 0 收藏 0

Three.js 模型居中

Threejs 通过外部数据生成的模型或者加载外部模型的时候,得到的三维模型是不居中的,希望通过 threejs 的一些方法实现居中操作。 几何体居中 .center() 如果加载的或生成的模型对象只有一个网格模型,不是多个模型对象组成的层级模型,可以通过控制网格模型模型几何体的方式居中。 // 网格模型模型的几何体居中 Mesh.geometry.center() 关于几何体 .center()…

虐人心 2021-08-28 19:25:07 浏览 834 评论 0 收藏 0

Three.js 环境贴图 .envMap

Three.js 环境贴图 .envMap 字面意思就是三维模型周边环境,比如你渲染一个立方体,立方体放在一个屋子里面,屋子里面的周边环境肯定影响立方体的渲染效果,目的是为了渲染该立方体而不是立方体周围环境,为了更方便所以没必要创建立方体周边环境所有物体的网格模型,可以通过图片来表达立方体周边的环境。 创建一个立方体盒子作为天空盒使用,然后把一个环境中上下左右前后六张视图图片作为立方体盒子的纹理贴…

虐人心 2021-08-23 23:42:31 浏览 878 评论 0 收藏 0

Three.js 球体 SphereGeometry

通过 Threejs 的几何体类 SphereGeometry 可以创建一个球体。 Threejs 构造函数 SphereGeometry 的参数1设置的是球体的半径值,参数2和参数3设置的球体经纬度两个方向的细分数,参数 2 默认值 8,参数 3 默认值 6,如果不设置这两参数直接执行 new THREE.SphereGeometry(8); 创建一个球体,你通过球体网格模型表面可以看到,球体像…

虐人心 2021-07-30 19:37:30 浏览 912 评论 0 收藏 0

组织你的 Sass 文件

组织文件是每个项目的重要一步,特别是如果你半年重新打开这个项目的时候,你会发现,文件组织得好,对于你理解项目会有很大的帮助。 如果你从未接触过 Sass,你可以先阅读一下 Sass 指南。 Sass 到目前为止有两种语法书写格式。第一种称之为 SCSS(Sassy CSS),并且在整个规范中都使用这种语法格式,也是 CSS 语法的一种扩展。这意味着每个有效的 CSS 文件也是有效的 SCSS 文件…

虐人心 2021-07-28 23:07:30 浏览 826 评论 0 收藏 0

Sass Guidelines 项目文件管理

经常会有初学者问,使用Sass时要如何管理自己项目中的文件。也有不少同行朋友针对此问题做过总结与探讨,网上相关的案例也不少,比如说很好的参照案例有:Bootstrap 和 Foundation 等。在 Sass Guidelines 中也特意针对 这一部分做了详细的描述。作者将文件结构按七合一模式向大家展开介绍,并且如何与组件结合在一起管理。 结构 在项目开发周期中,构建一个CSS项目可能会是你遇…

虐人心 2021-07-17 10:03:37 浏览 942 评论 0 收藏 0

Three.js 本地矩阵 .materix 和世界矩阵 .matrixWorld

在学习本地矩阵 .materix 之前你应该先对 WebGL 的旋转、平移、缩放等变换矩阵有一定的认知,在了解世界矩阵.matrixWorld之前你应该现对象Three.js中层级模型的概念有一定的了解,Threejs如何通过Group来创建一个父子关系层级模型。 一个对象的本地矩阵.materix包含了该对象的旋转、平移和缩放变换,本地矩阵是平移矩阵、缩放矩阵和旋转矩阵的乘积。 一个对象的世界矩…

虐人心 2021-07-17 09:59:32 浏览 875 评论 0 收藏 0

Three.js 雾化效果 Fog 和 FogExp2

开发 Web3D 应用有时候需要实现一个雾化的效果,简单说就是场景中越远的位置看起来越模糊,Three.js引擎提供了两个雾 Fog 和指数雾 FogExp2 两个类。 Three.js场景对象 Scene 具有一个雾化属性.fog,该属性的属性值是雾对象 Fog 或指数雾对象 FogExp2。如果你想模拟一个雾化效果只需要在threejs代码中设置场景对象的 .fog 属性就可以。 通过构造函数…

虐人心 2021-07-16 21:39:24 浏览 822 评论 0 收藏 0

Three.js 点击选中多个模型

开发 Web3D 应用有时候需要通过鼠标连续点击选中多个三维模型或者说几何体,对于这个问题也比较简单,如果你有这个疑问,首先说明你应该了解如何通过 Threejs 的射线对象选中一个模型,如果你不了解可以去学习一下。 在一个三维场景中,通过鼠标单击选中一个三维模型对象,可以通过JavaScript代码设置单选和多选两种模式。默认情况下设置为单选模式,比如鼠标单击选中一个模型颜色变化,鼠标继续单击其…

虐人心 2021-07-15 22:04:27 浏览 816 评论 0 收藏 0

简介

有一天你能到我的心里去,你会看到那里全是你给的伤悲。

32 文章
6 评论
19521 人气
更多

推荐作者

qq_81h7fk

文章 0 评论 0

Aik

文章 0 评论 0

爱上歆随懿恫

文章 0 评论 0

qq_rvKjBH

文章 0 评论 0