bigpatten的博客

针对上一篇博文抛出的问题，下面来说说如何解决我们知道三维场景是可以随意旋转角度的，所以我们的动态贴图一定不能将角度写死，或者说我们需要将动态贴图跟随场景的旋转而旋转，这样就能达到动态贴图的正面始终面向我们的效果，这样就不会出现当场景旋转至某一角度时看不见动态贴图的现象了。但是想想这样并不好实现，我们知道相机在三维场景中就相当于一双眼睛一样，它在哪个位置我们就可以看到场景中哪个位置的物体。这么说，我们不就可以同过相机来实现我们的功能了吗？只需将动态贴图始终跟随相机的角度不就可以达到我们想要的效果了吗？接

问题一：关于使用轨道控制器：THREE.OrbitControls 出现的问题。问题描述：当场景使用轨道控制器后，致使页面中的输入框或单选或复选按钮全部失效的问题分析问题原因：该问题是由于轨道控制器的工作原理造成的，当模型不是全屏状态(body中)渲染，而是在局部渲染时会出现该问题。解决办法是：// 第二个参数默认为body 如果您的场景是局部渲染的，请确保使用它(即场景渲染的容器)controls = new THREE.OrbitControls(that.camera, that.re

效果图：实际效果，图中的贴图是可以动的一、准备工作1、静态文件2、首先你要引入相关依赖：threejs核心依赖: http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.min.js兼容检测器: http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.min.js运行帧数监测器: http://www.yanhuangxueyuan.com/ver

采用DRACO压缩并加载gltf模型的用法，以VUE开发为例首先，在官方文件中找到对模型进行压缩 所需要的文件 位置大概在项目的examples/js/libs/draco/gltf下，我们可以放在项目的public目录下，如下图所示：下面来安装gltf-pipeline；该插件的作用是把现有的gltf格式模型进行压缩，跟图片压缩一样。缩小体积，更快的加载。npm i -g gltf-pipeline用法：在命令行或终端中输入以下命令，格式为：gltf-pipeline -i 原始文件

1. 引入Threejs我们可以在public下的index.html文件中引入：2. 相关依赖文件可以在main.js文件中引入3. 模型可以放在public文件夹下新建static文件夹放入其中function loadGlt(obj) { //为模型添加添加天空盒子环境贴图反光材质 var path = 'static/surround/' var urls = [ path + 'you.jpg',

现实环境中，人们之所以能看得到物体，是因为有光，物体的材质反射光到人眼中。在ThreeJS中有几种光源，去模拟现实环境。最常见的四种分别为：环境光( AmbientLight )：笼罩在整个空间无处不在的光点光源( PointLight )：向四面八方发射的单点光源聚光灯( SpotLight )：发射出锥形状的光， 模拟手电筒，台灯等光源平行光( DirectinalLight )：平行的一束光，模拟从很远处照射的太阳光其他还有半球光光源( HemisphereLight )，平面光光源(.

创建场景添加天空盒子相关代码如下：var scene = new THREE.Scene() //创建场景 var path = 'static/surround/' //注意加载的图片是有顺序的，分别是：右 => 左 => 上 => 下 => 前 => 后 六张宽高、格式相同的图片 //我们可以想象一下一个正方体盒子，而我们的模型就位于正方体盒子内部一样。 var urls = [ path + '4.jpg', path +

首先来看下THREE.WebGLRenderer可以设置的参数如下：var renderer = new THREE.WebGLRenderer({ //创建渲染器对象 // canvas: document.getElementById('can3d'), //渲染器绘制其输出的画布， alpha: false, // 画布是否包含alpha（透明度）缓冲区。默认值为false。 premultipliedAlpha: true, //渲染器是否会假设颜色具有 预乘alpha。默