threejs
关注
分享
扫一扫
Kinghiee
Front-end Developer
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
threeJS 自定义路径曲线（CatmullRomCurve3）
一、效果图二、案例中用到的重要函数或设置this.curve = new THREE.CatmullRomCurve3( [① //起点 new THREE.Vector3(-10, 0, 10), //中间节点 new THREE.Vector3(-5,10,-10), new THREE.Vector3(2, 5, -5), //终点 new THREE.Vector3(10, 0, 10),原创 2020-07-30 20:07:51 · 11544 阅读 · 0 评论 -
threeJS 物体贴花
官方案例一、效果二、总体步骤① 创建场景② 创建相机③ 创建物体④创建渲染器 创建status、OrbitControls和gui⑤ 添加监听函数页面架构<template> <div class="box3"></div></template><script></script><style></style>导入文件,创建变量和函数 import * as T原创 2020-07-30 09:52:51 · 1276 阅读 · 0 评论 -
threeJS 裁剪物体
一、效果图二、案例中用到的重要函数分析 new THREE.MeshLambertMaterial({ color:new THREE.Color().setHSL(Math.random(),0.5,0.5),① side:THREE.DoubleSide,② clippingPlanes:this.planes,③ clipIntersection:true④ })this.renderer.localClippingEnabl原创 2020-07-28 18:28:30 · 4888 阅读 · 2 评论 -
vue+three+layui 实现后台登陆页面
效果图代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=1200, initial-scale=1.0, minimum-scale=1.0, maximum-scal...原创 2020-05-03 12:05:30 · 1581 阅读 · 3 评论 -
threeJS 通过组件形式和vueJS结合
效果图导入文件npm install three --save-dev import * as THREE from "./node_modules/three/build/three.module.js"; import {OrbitControls} from "./node_modules/three/examples/jsm/controls/OrbitControl...原创 2020-05-02 16:41:29 · 5294 阅读 · 3 评论 -
threeJS 创建逼真海洋落日
本博客参考官方案例效果图总体步骤① 创建场景② 创建相机③创建渲染器④ 创建物体⑤ 创建status和OrbitControlshtml代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewpo...原创 2020-05-02 09:16:39 · 3137 阅读 · 1 评论 -
threeJS 创建反光效果
参看博客Three.js 使用cubeCamera相机创建反光效果效果图总体步骤① 创建场景② 创建相机③ 创建物体④ 创建渲染器html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport"...原创 2020-05-01 21:33:31 · 4863 阅读 · 1 评论 -
threeJS 创建视频纹理贴图(冰雪奇缘视频)
本例来源官方案例效果图总体步骤① 创建场景和相机②创建物体③ 创建渲染器html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style>...原创 2020-04-30 11:41:39 · 2317 阅读 · 0 评论 -
threeJS JSON加载器和创建蓝色天空
本例来源官方案例效果图总体步骤① 创建场景② 创建相机③ 创建物体*** 创建顶点着色器*** 创建片元着色器④创建渲染器html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</ti...原创 2020-04-29 17:06:47 · 1979 阅读 · 4 评论 -
threeJS 双场景双相机创建立方体环境贴图和全景贴图
本例来源于官方案例效果图立方体贴图全景贴图总体步骤① 创建场景和相机②创建物体③ 创建渲染器④创建GUIhtml代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> ...原创 2020-04-29 09:47:19 · 2818 阅读 · 3 评论 -
threeJS创建粒子波浪
本例来源于官方案例效果图总体步骤① 创建场景② 创建相机③ 创建物体*** 创建顶点着色器*** 创建片元着色器④创建渲染器html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</t...原创 2020-04-28 20:47:53 · 11151 阅读 · 4 评论 -
threeJS 创建漫天飘雪
本例来源官方案例效果图总体步骤① 创建场景② 创建相机③ 创建物体④创建渲染器html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style>...原创 2020-04-28 15:26:56 · 475 阅读 · 1 评论 -
threeJS 创建第一视角大海
注：例子来源于官方案例效果图总体步骤① 创建场景② 创建相机③ 创建物体④创建渲染器html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style&...原创 2020-04-27 16:07:56 · 1732 阅读 · 1 评论 -
threeJS RectAreaLight(区域光)
效果图注：第一张开启了gammaInput/Output，第二张没有开启THREE.RectAreaLigh 语法new THREE.RectAreaLight用于创建平面光光源构造器函数，该函数有四个变量，分别是color，intensity，width，height，以上四个参数都是可选参数，如果不传都会按照默认的值来创建平面光光源。color：(可选参数) 十六进制数字表示的光...原创 2020-04-26 14:58:04 · 2378 阅读 · 3 评论 -
threeJS创建六面不同图片的正方形(纹理贴图)
效果图总体步骤① 创建场景② 创建相机③ 创建物体④创建渲染器html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> ...原创 2020-04-24 21:14:34 · 3867 阅读 · 1 评论 -
threeJS 创建地月系
效果图总体步骤① 创建场景② 创建相机③ 创建物体④创建渲染器html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> ...原创 2020-04-24 09:19:43 · 950 阅读 · 3 评论 -
threeJS 创建逼真地球
效果图总体步骤① 创建场景② 创建相机③ 创建物体④创建渲染器html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> ...原创 2020-04-23 22:10:57 · 2030 阅读 · 2 评论 -
three插件实现3D拖拽，旋转
效果图代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>旋转，平移，缩放</title> <style> *{ margin: 0; ...原创 2019-12-31 22:27:34 · 2243 阅读 · 0 评论