threejs
蜗牛速度额
这个作者很懒,什么都没留下…
展开
-
three.js 如何解决orbitcontrols 右键拖拽和放大缩小功能失效的问题
前言本文主要给大家介绍了关于Three.js利用orbitcontrols插件(轨道控制)控制模型交互动作的相关内容,以及在引入插件时候,碰到右键拖拽和滚轮放大缩小功能没法实现的解决方案。首先引入插件,文件地址在官方案例的 examples/js/controls/OrbitControls.js。import OrbitControls from 'three/examples/j...原创 2018-07-26 09:21:17 · 11884 阅读 · 2 评论 -
Threejs 三大组件 -- 场景、相机、渲染器
Three.js 中,要渲染物体到网页中,必备3个组件:场景 scene、相机 camera、渲染器 renderer。场景 scene场景是所有物体的容器。在Threejs中,场景只有一种,用 THREE.Scene 表示,构建场景如下var scene = new THREE.Scene();场景组件包括: 相机 — 决定哪些东西要渲染到屏幕上光源 — 对材质如何...原创 2018-09-27 20:42:30 · 2149 阅读 · 0 评论 -
threejs 使用ThreeBSP库进行Three.js网格组合 (源码)
import * as THREE from 'three';let BACK;let COPLANAR;let EPSILON;let FRONT;let SPANNING;let Timelimit;let returning;let bind = function(fn, me) { return function() { return fn.apply(me,...原创 2018-10-18 09:55:32 · 2221 阅读 · 0 评论 -
three.js 通过 Reflector.js 创建镜面反射
类似境面反射可以使用CubeCamera但是CubeCamera更适用于创建物体自身对环境的反射,但是如果想要创建一面镜子的话使用CubeCamera会难调试所反射物体的位置,而且镜面中的物体不会随着控制器的缩放而变动。 使用Reflector.js可以很容易的创建一面镜子,并且镜子中的对象会依据发光体的缩放而缩放,而且可以调试镜子的发光色,类似墨镜的效果。 2、使用步骤2.1、引入j...原创 2018-10-18 10:58:02 · 6039 阅读 · 0 评论 -
Threejs 创建玻璃 Refractor WaterRefractionShader
引入两个文件 import Refractor from 'three/examples/js/objects/Refractor';import WaterRefractionShader from 'three/examples/js/shaders/WaterRefractionShader';let refractorGeometry = new THREE.PlaneBuf...原创 2018-10-18 16:54:08 · 4823 阅读 · 0 评论 -
threejs GLTFExporter 导出文件 GLTFLoader加载文件
let gltfExporter = new GLTFExporter(); // 单个模型数据 obj gltfExporter.parse(obj, function (result) { console.log(result); let link = document.createElement('a'...原创 2018-10-16 16:03:49 · 7190 阅读 · 2 评论 -
three.js 多面几何体进行多面贴图 (贴图后需要再次渲染才能显现出来)
let materials = [];for (var i = 0; i < 6; ++i) { materials.push(new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture('../img/' + i + '.png',//图片的路径 {}, function()...原创 2018-11-01 11:06:51 · 4371 阅读 · 0 评论 -
threejs svg path 坐标转换
import {Shape, Vector2} from 'three';export default class Wall { constructor (result) { this.DEGS_TO_RADS = Math.PI / 180; this.DIGIT_0 = 48; this.DIGIT_9 = 57; this.COMMA = 44; ...原创 2018-11-09 11:08:06 · 1524 阅读 · 1 评论 -
threejs 根据svg创建
import {Shape, Vector2, MeshBasicMaterial, BoxGeometry, Mesh, Geometry} from 'three';export default class Wall { constructor (result) { this.DEGS_TO_RADS = Math.PI / 180; this.DIGIT_0 = 4...原创 2018-11-09 16:57:38 · 1156 阅读 · 1 评论 -
Three.js OrbitControls.js让摄像机围绕目标旋转
例子...var scene = new THREE.Scene();var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );var controls = new THREE.OrbitControls( camera );camera.posit...原创 2018-11-02 10:08:07 · 11653 阅读 · 0 评论 -
three.js 通过计算边界框使Group模型居中
box3是在3D空间中表示一个盒子或立方体,其主要目的是为了表示对象的最小边界框。 box3有两个属性max和min分别是边框的最值。 min:表示盒子的下(x,y,z)的边界 max:表示盒子的上(x,y,z)的边界 获取Group的边界最值一般加载的模型都是通过对象组合放在一个Group中的,因此想要获取模型的边界值就需要获取整个Group的最值。 使用box3的方法expandBy...原创 2018-09-07 12:42:33 · 3741 阅读 · 0 评论 -
three.js THREE.WebGLRenderer 参数
WebGLRenderer()中有一些参数我们可以设置,以下这些参数来自于官方文档: antialias: 值:true/false 含义:是否开启反锯齿,设置为true开启反锯齿。 precision: 值:highp/mediump/lowp 含义:着色精度选择。 alpha: 值:true/false 含义:是否可以设置背景色透明。 ...原创 2018-09-07 10:04:32 · 21601 阅读 · 1 评论 -
three.js - 使用 THREE.DragControls 实现模型拖拽的-错误处理
功能:鼠标略过模型出现三维坐标轴,通过点击三维坐标轴,在 x、y、z 轴上移动,并且通过点中模型任意拖拽模型。 本质上,使用鼠标拖动三维模型,就是把鼠标的拖动距离,转化为三维模型的位置或角度变化量,使用three、js的拖拽控件·DragControls.js·就可以很容容易实现。 问题:在使用webpack时,需要确保你的依赖配置 three确保在0.94.0版本,在低版本中是没有...原创 2018-07-25 09:58:16 · 8137 阅读 · 7 评论 -
Three.js 使用JSON格式保存和加载模型
前言从外部资源中加载几何体,首先我们学会如何保存和加载Three.js的JSON格式文件。案例在Three.js中导出JSON文件非常容易,并且不需要引入额外的库。你需要做的只是将THREE.Mesh导出为JSON,代码如下:// 保存数据到数据库export function addProject() { return new Promise(function(resol...原创 2018-07-30 16:01:14 · 8328 阅读 · 1 评论 -
three.js 加载MTL和OBJ文件 MTLLoader OBJLoader
three.js最新版本'75'相较以前使用的'71'版本obj模型加载的方法发生了变化。 移除了OBJMTLLoader.js,并将原来OBJLoader.js和MTLLoader.js加载方法loader.setCrossOrigin更改为loader.setPath。let mtlLoader = new MTLLoader(); mtlLoader.setBaseUrl( "...原创 2018-08-07 11:15:01 · 14768 阅读 · 0 评论 -
three.js Raycaster 射线拾取 canvas不占满整屏时射线拾取存在偏差
function initRay() { let getBoundingClientRect = canvas.getBoundingClientRect() // 屏幕坐标转标准设备坐标 let x = ((event.clientX - getBoundingClientRect .left) / canvas.offsetWidth) * 2 - 1;// 标准设备横坐标 ...原创 2018-08-12 18:21:46 · 2963 阅读 · 3 评论 -
Three.js THREE.Raycaster 射线拾取详解 (解决射线无法射到object3,group里的children)
简介由于浏览器是一个2d视口,而在里面显示three.js的内容是3d场景,所以,现在有一个问题就是如何将2d视口的x和y坐标转换成three.js场景中的3d坐标。好在three.js已经有了解决相关问题的方案,那就是THREE.Raycaster射线,用于鼠标拾取(计算出鼠标移过的三维空间中的对象)等等。THREE.Raycaster构造函数和对象方法new Raycaster(...原创 2018-08-15 17:00:02 · 13673 阅读 · 13 评论 -
three.js 加载跨域文件的解决方法
当我们使用thee.js的时候肯定会碰到利用各种请求去向服务器请求贴图。我们获取的是图片在服务器上的路径。 要解决这个问题只要设置Image的crossOrigin属性即可。于是从网上查这个属性的设置,有两种CORS模式,一是“anonymous”(匿名模式),另一种是“use-credentials”(用户授权证书模式) 这个一般是安全问题,解决方法就是我们翻到three.js的源码把对应的...原创 2018-08-26 14:59:33 · 13287 阅读 · 14 评论 -
three.js 变换大小、角度、位移控件 TransformControls.js
TransformControls.js:鼠标操控物体移动、缩放、旋转的控件(物体操作工具)该控件可以实现可视化操作三维模型,通过选中一个三维模型,然后通过控件对象的方法attach()可以把选中的三维模型与控件TransformControls绑定, 你可以把控件对象TransformControls理解为一个特殊的三维模型,比如平移状态,控件对象TransformControls就是一个三...原创 2018-09-05 13:37:22 · 14430 阅读 · 2 评论 -
three.js 后期通道处理 电脉冲 电视机效果 EffectComposer.js
EffectComposer.js 效果组合对象, 在该对象上可以添加后期处理通道,使用它来渲染场景、应用通道和输出结果。为了保证EffectComposer正常工作,至少需要引入 MaskPass.js 、RenderPass.js、 CopyShader.js、ShaderPass.js RenderPass.js 该通道会在当前场景和摄像机的基础上渲染出一个新场景 Glit...原创 2018-09-12 09:34:31 · 1691 阅读 · 0 评论 -
three.js SpotLight 光源产生阴影效果
不是所有的光源都可以投射阴影 ,这里使用聚点光源可以产生阴影 渲染器设置 // 参数:抗锯齿 this.renderer = new THREE.WebGLRenderer({antialias: true}); //告诉renderer我们需要阴影(允许阴影隐射) this.renderer.shadowMap.enabled = true; /...原创 2018-09-12 21:02:11 · 3253 阅读 · 0 评论 -
Three.js 使用顶点、面绘制模型
我们在学些WebGL基础的时候每天都是在一直研究顶点位置,法向量,绘制下标什么的。虽然复杂,但是毕竟原生,性能没得说。three.js也给我们提供了相关的接口供我们使用原生的方法绘制模型首先,我创建了一个空白的形状://立方体var cubeGeometry = new THREE.Geometry();然后添加了立方体的顶点,一共8个//创建立方体的顶点 var ve...原创 2018-09-12 21:44:54 · 3973 阅读 · 1 评论 -
Three.js 实现merge后显示相应的材质
之前,我使用merge实现过将多个网格合并成一个网格,当时只是简单的实现了一下几何体的merge,证明merge后的能够提高很大的性能。merge的几何体有弊端就是,merge以后,只是一个整体,无法再分开,也没办法判断点击的哪个物体,这只适合合并一些场景内不再修改的模型。geometry.merge由于现在的几何体分为geometry和bufferGeometry,我们分别看一下这两种几何体...原创 2018-11-08 19:39:31 · 2906 阅读 · 3 评论