threejs
关注
分享
扫一扫
文章平均质量分 60
那年我七岁
学徒一个，在学习过程中遇到无数的问题，于是来到这里记录一下。
展开
-
Threejs 传入顶点数据 设置
threejs 什么都写好了，于是我就把自己的webgl 迁移到threejs上实现加载自己定义的json文件，得到顶点，法向量，颜色的数据，怎么在threejs 中设置？ var geometry = new THREE.BufferGeometry();把得到数据设置到attribute 中；geometry.addAttribute( 'position', new ...原创 2018-09-10 14:23:32 · 5373 阅读 · 0 评论 -
Threejs 中的后期处理
主要的核心代码：var renderPass = new THREE.RenderPass(scene, camera);//renderPass 通道：它只会渲染场景，但不会把结果输出到场景上var effectFilm = new THREE.FilmPass(0.8, 0.325, 256, false);//FilmPass通道：它可以把结果输出到场景上effectFilm....原创 2018-09-07 12:33:31 · 5156 阅读 · 0 评论 -
three.js 中设置透明背景
类似这样的，canvas感觉是透明的，里面的3D在上面，通常做地球旋转之类的效果， webgl 设置：setClearColor（1.0,1.0,1.0,1.0） rgba格式最后一个参数就是alphathree.js设置：renderer = new THREE.WebGLRenderer( { antialias: true,alpha:true } );rend...原创 2018-10-08 10:48:15 · 23914 阅读 · 5 评论 -
threejs 不能显示中文解决方法
threejs 自带的只能显示字母和数字，我们可以用.tff 的字体转成json，使用网上工具：https://github.com/gero3/facetype.js运行index.hmtl文件如下； 选择windows 自带的字体选择最小的哪一个，就可以了；放到项目中替换以前的json文件；...原创 2018-10-23 18:23:26 · 1554 阅读 · 0 评论 -
threejs 不管物体是不是在里面都能看见它（去掉深度）
外挂中常见，z-index = 0;就是没有深度的意思；比如：原样去掉深度检测： 设置材质如下：THREE.MeshPhongMaterial({ color: colorMaterial, opacity: 0.4, transparent: false, vertexColors: THREE.NoColors, ...原创 2018-10-24 17:58:25 · 5362 阅读 · 0 评论 -
threejs 自定义材质
代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>shader</title> <style> body {原创 2018-12-17 11:00:27 · 2399 阅读 · 0 评论 -
threejs 自定义材质 熔浆，云雾效果
效果如下：它其实就是使用了两种图片在着色器中经过拉伸，扭曲得到的效果；需要两张图片：上面那种云雾的很重要，它可以勉去在着色器中随机的运算，代码如下：<!DOCTYPE html><html lang="en"><head> <title>three.js shader教程</title> ...原创 2018-12-17 11:11:14 · 3758 阅读 · 2 评论 -
Threejs 官网镜子demo源码分析
效果如下：这个功能其实跟webgl 编程指南中的纹理demo一样的思路思路是把相机放在镜子的位置，所形成材质，贴在镜子上面，这个有区别的是，它还计算了相机的位置，通过相机位置拿到与镜子镜像的相机位置，所形成的纹理；demo 如下：<!DOCTYPE html><html lang="en"> <head> ...原创 2018-12-18 16:23:08 · 3357 阅读 · 0 评论