3D-webGL-three.js
前端webGL栏目,主要是关于three.js相关的知识总结。
页神建辑-思而后学
总是让我做自我简介,真不知道介绍什么好了~~~~~
展开
-
three.js顶点概念知识点
three.js-顶点点let geometry = new THREE.BufferGeometry();let vertices = new Float32Array([ 0, 0, 0, //顶点1坐标 50, 0, 0, //顶点2坐标 0, 100, 0, //顶点3坐标 0, 0, 10, //顶点4坐标 0, 0, 100, //顶点5坐标 50, 0, 10, //顶点6坐标]);let attribue = new THREE.B原创 2021-04-04 18:15:12 · 558 阅读 · 0 评论 -
three.js立方体六面贴图做法解析
three.js立方体六面图片贴图// 案例1var path = "resources/textures/cube/pisa/";var format = '.png';var urls = [ path + 'px' + format, path + 'nx' + format, path + 'py' + format, path + 'ny' + format, path + 'pz' + format, path + 'nz' + format];let geometry = n原创 2021-03-29 23:31:12 · 1537 阅读 · 0 评论 -
three.js-EffectComposer辉光使用展示
three.js辉光EffectComposer – 效果合成器import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer';import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass';import { OutlinePass } from 'three/examples/jsm/postprocessing/O原创 2021-03-23 22:52:43 · 579 阅读 · 0 评论 -
three.js-外部载入模型动画实现
载入模型动画实现模型本身自带动画(三维软件制作),如何在模型导入到网页后使动画生效声明mixers数组用于保存动画声明clockdata() { return { mixers:[], clock:new THREE.Clock(),}},Methods: { Init(){let loader = new FBXLoader();loader.load('resources/demo-models/model/view2.fbx', fbx =>原创 2021-03-21 00:43:56 · 564 阅读 · 1 评论 -
three.js-模型线框化
模型线框wireframe支持线框模式的材质有MeshBasicMaterial、MeshDepthMaterial、MeshLambertMaterial…基础模型线框模式:let sphereGeometry = new THREE.SphereGeometry(10, 30, 30);let meshMaterial = new THREE.MeshBasicMaterial({color:0xaaafff});meshMaterial.wireframe = true;let sphe原创 2021-03-21 00:39:45 · 1511 阅读 · 0 评论 -
three.js-tween-camera相机视角平滑转换
camera相机视角平滑过渡转换使用tween特性进行视角的平滑过渡。过渡方式释义Linear线性匀速运动效果Quadratic二次方的缓动(t^2)Cubic三次方的缓动(t^3)Quartic四次方的缓动(t^4)Quintic五次方的缓动(t^5)Sinusoidal正弦曲线的缓动(sin(t))Exponential指数曲线的缓动(2^t)Circular圆形曲线的缓动(sqrt(1-t^2))Elastic指原创 2021-03-21 00:35:33 · 1976 阅读 · 0 评论 -
three.js抗锯齿
three.js抗锯齿原创 2020-12-06 00:04:16 · 710 阅读 · 0 评论 -
vue-three.js使用解析知识点
three.js库three.js是JavaScript实现webGl-3D的一个第三方库。具体信息不多扯。官网:https://threejs.org/中文网:http://www.webgl3d.cn/vue中使用three.js库####### 安装npm install three --save组件内引入import * as Three from 'three';代码示例<template> <div> <div id="c原创 2020-12-03 21:55:59 · 828 阅读 · 3 评论