![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
threejs点滴知识
文章平均质量分 89
弹琴弹琴
这个作者很懒,什么都没留下…
展开
-
Three.js (六) 物体的点击和碰撞
点击和碰撞都需要使用光线投射Raycaster( origin : Vector3, direction : Vector3, near : Float, far : Float )origin —— 光线投射的原点向量。direction —— 向射线提供方向的方向向量,应当被标准化。near —— 返回的所有结果比near远。near不能为负值,其默认值为0。far —— 返回的所有结果都比far近。far不能小于near,其默认值为Infinity(正无穷。)使用光线投射实例的inters转载 2021-11-17 15:34:13 · 1494 阅读 · 0 评论 -
Three.js (四) 插件工具(dat.GUI、stats、ThreeBSP、OrbitControls)
dat.GUIdat.GUI 是一个轻量级的图形用户界面库,可以很容易地创建出能够改变代码变量的界面组件。定义一个 JavaScript 对象(这里假设叫做 controls),该对象将保存希望通过 dat.GUI 改变的属性。基础设置创建一个GUI实例,并其添加待监听的对象、对象中具体的监听值、其他配置。当用户对 dat.GUI 控件进行操作时,对应的属性值也会同步修改。var gui = new dat.GUI();var controls = new function () { t转载 2021-11-17 15:32:41 · 1528 阅读 · 0 评论 -
Three.js (三) 模型、材质、纹理、网格
模型 Geometry精灵(Sprite)精灵是一个总是面朝着摄像机的方形平面,不会投射任何阴影。精灵的构造函数只接收一个SpriteMaterial材料对象,其通常使用半透明的纹理。var spriteMap = new THREE.TextureLoader().load( "sprite.png" );var spriteMaterial = new THREE.SpriteMaterial( { map: spriteMap, color: 0xffffff } );var sprite转载 2021-11-17 15:31:45 · 1515 阅读 · 0 评论 -
Three.js (二) 光源、投影、光晕
光源光的通用属性fex:光的颜色,用16进制颜色表示(如0x00FF00)intensity:光的强度,默认为1castShadow:是否启用阴影 默认为false。环境光与半球光不能投射阴影。产生投影的光线需配置投影区域属性限制投影范围(节省性能)每种光都有辅助线,将光源作为参数传入辅助线构造函数即可生成实例var helper = new THREE.HemisphereLightHelper(hemiLight);scene.add(helper);环境光THREE.转载 2021-11-17 15:30:32 · 1254 阅读 · 0 评论 -
Three.js (一) 场景、相机、渲染器
概述WebGL把 JavaScript和 OpenGL ES 2.0结合在一起,从而为前端开发者提供了使用 JavaScript编写 3D效果的能力,并为 HTML5Canvas提供硬件 3D加速渲染。Canvas区别于原本的 2dcontext,还可以作为WebGL的载体提供 webglcontext 。Three.js 是使用 JavaScript对 WebGL接口进行封装与简化而形成的一个易用的 3D库。Three.js基本组件关系对比真实世界视觉形成兼容性转载 2021-11-17 15:28:32 · 581 阅读 · 0 评论