logo
publist
写文章

简介

该用户还未填写简介

擅长的技术栈

可提供的服务

暂无可提供的服务

学习 clip-path属性 和 常用方式

clip-path 属性clip-path 属性是 clip 属性的升级版。clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。clip 属性只能作用于 position 为 absolute 和 fixed 的元素且剪裁区域只能是正方形。第一类值 basic-shape 一种形状,由不同的函数绘制。第二类值 clip-source 用 <url>

#css#html5
Three.js - 渲染器(WebGLRenderer)(二)

简介在three.js中内置了很多渲染器,选择什么渲染器都是根据需求来判断的。本节我们详细了解最常用的渲染器 WebGLRenderer渲染器(WebGLRenderer)WebGLRenderer主要作用就是把相机视椎体中的三维场景渲染成一个二维图片显示在画布上实例化new WebGLRenderer()接受一个对象参数作为渲染器的行为配置。不传参数都会执行其默认值。常用配置:canvas 与渲

#前端#javascript
Three.js - 加载 .OBJ 格式模型(十六)

.objobj文件是3D模型文件格式。它包含的信息都是几何体顶点相关数据,不包含动画、材质特性、粒子等信息。使用第一步当然是找UI设计要文件了,这里没有UI就自己到网上下载了一个文件。创建基础代码,这里使用方向光和半球光让模型更立体。<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /&g

#前端#javascript
Three.js - 可视化地图下钻功能(二十二)

简介地图下钻听起来是很厉害的技术,当你明白后会发现,实现它非常的简单。实现思路获取GeoJSON格式的全国数据,绘制中国地图场景。监听点击事件,判断下钻的省市。获取所点击省份GeoJSON格式的数据,绘制省份地图场景。切换场景展示省份地图。绘制中国地图前面的章节已经绘制过了,这里只需要进行一些小改动。之前的公用方法中projection()函数是全局方法,当地图下钻后中心点是要修改的,所以使用参数

#前端#javascript
实现一镜到底动画

简介本文会讲解如何使用框架实现一个,一镜到底动画。使用 "pixi.js": "^5.3.7"、"gsap": "^3.6.0"、"alloytouch": "^0.3.0" 这三个框架。pixi.jsPixi 是一个超快的2D渲染引擎。Pixi教程Pixijs API我们这里主要使用它来管理,动画中要在界面上展示的图片和手动绘制的图形。先创建 Pixi 应用// 设置样式 自适应画布宽高<

Three.js - 物体碰撞检测(二十六)

简介碰撞检测在three.js开发中是很常见的。最常见的两种方式实现:使用.Raycaste()在物体的各个顶点发出射线,计算是否和其他物体相交。使用.Box3在物体上创建包围盒,计算两个物体包围盒是否相交。本节介绍第一种碰撞检测法。Raycasterorigin — 光线投射的原点向量。direction — 射线的方向向量,应该归一化。near — 所有返回的结果应该比 near 远。near

#javascript#前端
Three.js - 透视相机(PerspectiveCamera)(三)

简介在three.js中,摄像机的作用就是不断的拍摄我们创建好的场景,然后通过渲染器渲染到屏幕中。想通过不同的角度观看场景,就需要修改摄像机的位置来拍摄场景。本文详细介绍的是透视相机(PerspectiveCamera) 它是用来模拟人眼所看到的景象,它也是3D场景的渲染中使用得最普遍的投影模式。透视相机(PerspectiveCamera)根据视锥的范围给渲染器提供需要渲染的场景范围。实例化ne

#前端#javascript
到底了