Three - 程序员宅基地

Three.js所有材质的属性及实例应用

Three.js所有材质：MeshBasicMaterial（网格基础材质）、MeshDepthMaterial（网格深度材质）、MeshNormalMaterial（网格法向材质）、MeshLambertMaterial（网格Lambert材质）、MeshPhongMaterial（网格Phong材质）、...

Three.js阴影

标签： three.js

使用灯光后，场景中就会产生阴影。物体的背面确实在黑暗中，这称为核心阴影。我们缺少的是落下的阴影，即对象在其他对象上创建阴影。本文主要探索是落下的阴影的相关内容。

three.js加载坦克3D模型源码实例

标签： three.js 3D模型

three.js加载坦克3D模型obj文件，并实现光照，旋转等功能。含所有必须的js文件及坦克obj模型文件。

three.js学习笔记(十三)——真实渲染

标签： javascript 前端 three.js

const directionalLight = new THREE.DirectionalLight('#ffffff',1) directionalLight.position.set(0.25,3,-2.25) scene.add(directionalLight) gui.add(directionalLight, 'intensity').min(0).max(10)

Threejs进阶之十一：使用FontLoader和TextGeometry创建三维文字

标签： javascript 前端 vue.js

详细介绍了使用FontLoader和TextGeometry创建三维文字的方法，包括如何将ttf格式的文件转换为json格式的文字文件，如何加载汉字以及如何给文字产生倒影等效果的方法

Three.js学习四——模型导入

标签： javascript 学习 three.js

通过Three.js的材质和几何体，我们可以很方便的创建基础3D模型，但涉及到复杂模型时，一般是由专业建模工具生成模型文件再导入的方式将模型引入到我们的3D场景中进行使用。以GLTF加载器(GLTFLoader)为例，加载gltf...

three.js通过THREE.Geometry.merge()函数合并网格(vue中使用three.js49)

标签： three.js webgl vue

通过THREE.Geometry.merge函数合并网格1.demo效果2.涉及知识点2.1 为什么合并网格2.2 THREE.Geometry.merge()函数2.3 网格合并产生的影响3.实现要点3.1 创建随机位置的小立方体3.2 合并网格对象3.3 重绘网格对象4....

Three.js - 实现一辆坦克沿路径行驶（十二）

标签： javascript 前端 three.js

简介本节主要讲解，通过几何体组合成一个坦克形状的物体。... import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r132/build/three.module.js' import { OrbitControls }

three.js 入门三：buffergeometry贴图属性（position、index和uvs）

标签： javascript 贴图开发语言

threejs中如何在buffergeometry中贴图

Three.js和其它webgl框架

标签： three.js webgl

什么是WEBGL？ WebGL (Web图形库) 是一种JavaScript API，用于在任何兼容的Web浏览器中呈现交互式3D和2D图形，而无需使用插件。...（MDN简介）在我的理解，WebGL给我们提供了一系列的图形接口，能够让我们通过js去...

threejs坑记录-笔记

标签： three.js

重叠显示闪烁解决办法： renderer = new THREE.WebGLRenderer( { antialias: true, logarithmicDepthBuffer: true } );

2天赚了4个W，手把手教你用Threejs搭建一个Web3D汽车展厅 | 大帅老猿threejs特训

标签： javascript 前端

前言事情是这样的，前段时间外包工头老杨又来找我了，说某汽车大品牌要开发一个网页展厅，希望可以在网页里360度展示它家新款汽车的3d模型，还要可以让用户DIY汽车部件的颜色。image.png可能很多朋友看完此文后会...

用Threejs做一只会动的3D玉兔祝大家中秋快乐

标签： threejs 3d

中秋佳节征文，以此文提前祝朋友们中秋佳节快乐，幸福安康。

three.js之光源

标签： javascript 开发语言 ecmascript

光源是对于自然界光照的模拟，往往为了更好的渲染场景，需要设置不同的光源，设置不同的光照强度。

container = document.getElementById('threejs') camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 300000 ) camera.position.set( 0, 150, 400 ) scene = new THREE.Scene...

Three.js（十四）—— 模型文件加载

标签： javascript 开发语言 ecmascript

文章目录14、Three.js 加载外部模型文件14.1 Three.js 数据结构、导入导出Threejs导出模型信息自定义模型加载器文件加载Three.js导出的模型数据14.2 加载 stl 文件并解析stl文件数据结构通过STLLoader.js加载.stl...

Three.js建模基础

在Three.js中，一个可见的物体是由几何体和材料构成的。在这个教程中，我们将学习如何从头开始创建新的网格几何体，研究Three.js为处理几何对象和材质所提供的相关支持。 1、索引面集/Indexed Face Sets Three.js中...

ThreeJS 测距功能

标签： webgl three.js

文章目录选点绘线动态绘制线段和显示距离文字居中撤销操作测距功能，也就是选择两点，计算它们的距离，实现效果大致如下：上图中主要涉及几个操作： ...动态绘制线段动态绘制距离确定两点后将距离文字...

Threejs入门，拖拽，缩放，三维

标签： javascript vue.js 前端

ㅤㅤㅤ ㅤㅤㅤ ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ（多数人在人潮汹涌的世间，白白挤了一生，从来不知道哪里才是他所想要到达的地方，而有目标的人却始终不忘记自我的方向，所以他能打开出路，走向成功。...

threejs的转场动画 (基于Tween实现)、平滑切换场景

标签：动画 javascript 前端

threejs的转场动画 (基于Tween实现)、平滑切换场景

Three.js（十二）——骨骼动画、变形动画

标签：动画 javascript 3d

文章目录12、骨骼动画、变形动画12.1 骨骼动画原理相关类Bone骨架SkeletonGeometry(.skinWeights 和 .skinIndices 属性)骨骼网格模型 SkinnedMesh程序创建一个骨骼动画程序实现骨骼动画解析外部骨骼动画模型皮肤顶点...

three.js-简单上手

标签： javascript 前端开发语言

three.js 简单上手，入门webgl 领域

Three 之 three.js （webgl）基础第一个入门 Web 3D 场景

标签： threejs webgl 前端

Three 之 three.js （webgl）基础第一个入门 Web 3D 场景目录 Three 之 three.js （webgl）基础第一个入门 Web 3D 场景一、简单介绍二、Three 中构建场景主要的三要素三、场景（Scene）四、摄像机...

three.js实现全套3d测距功能(附完整代码)

标签： threejs three three.js

网上关于测距的实现都是比较片面的,没有完整的例子,最近因为需求,有对相关需求进行实现,给出我的实现方案,供大家参考效果图: 完整代码: <!DOCTYPE html> <html lang="en">...meta name="viewport" c

three.js使用CubeCamera创建反光效果，动态环境贴图实现，立方体全景贴图(vue中使用three.js83)

标签： three.js CubeCamera 动态环境贴图

使用CubeCamera创建反光效果1.demo效果2. 实现要点2.1 创建立方体相机CubeCamera2.2 使用动态环境贴图材质2.3 render中更新...const cubeCamera = new THREE.CubeCamera( near, far, cubeRenderTarget) 参数说明 near