![](https://img-blog.csdnimg.cn/692e029a6b904613b476b59783ee34d4.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
threejs
3d网页
Jessica巨人
不认真的人比认真的人多太多了,你认真你就赢了,你不认真你就真的输了。
展开
-
threejs效果 Thanos Portal特效
转载 2021-12-27 17:08:27 · 212 阅读 · 1 评论 -
微信小程序开发工程目录
小程序的文件类型.wxml (结构,类似于html)标签名字:由HTML(< div>、< p>、< span>…)------- 微信小程序的WXML ()wx:if 、wx:for、{{}}<view id="overlay-bottom"> <image id="experience" class="primary-button" src="/images/experience@2x.png" bind:tap="exper原创 2021-11-05 15:44:56 · 1219 阅读 · 0 评论 -
threejs环境配置及出现问题
下载node.js:nodejs.org/en/ .msi64位安装vscode:code.visualstudio.com Downloadvscode设置中文设置golive终端-》新建终端,输入 npm run dev:遇到问题:问题1:问题1解决:兼容性以管理员打开https://www.imooc.com/article/300474没有全局安装cnpm https://blog.csdn.net/qq_40638006/article原创 2021-10-13 15:42:59 · 1063 阅读 · 0 评论 -
threejs1模板+实现创建个无材质的球(无操作)+roiss
import {WebGLRenderer,PerspectiveCamera, Scene, SphereGeometry, MeshBasicMaterial, Mesh,DoubleSide}from "three"var renedrer,camera,control,scene;function init() { renedrer=new WebGLRenderer({}); document.body.appendChild(renedrer.domElement);原创 2021-10-18 16:48:26 · 259 阅读 · 0 评论 -
threejs2创建小球和辅助器(可控制)
import {WebGLRenderer,PerspectiveCamera, Scene, AxesHelper,SphereGeometry, HemisphereLight,MeshBasicMaterial,MeshPhongMaterial, Mesh,DoubleSide}from "three"import{OrbitControls}from "three/examples/jsm/controls/OrbitControls"var renedrer,camera,control,s原创 2021-10-18 17:28:16 · 257 阅读 · 0 评论 -
threejs3加载模型
import {WebGLRenderer,PerspectiveCamera, Scene, AxesHelper,SphereGeometry, HemisphereLight,MeshBasicMaterial,MeshPhongMaterial, Mesh,DoubleSide}from "three"import{OrbitControls}from "three/examples/jsm/controls/OrbitControls"import{MTLLoader}from "three/原创 2021-10-18 18:13:59 · 415 阅读 · 0 评论 -
threejs4模型后处理UnrealBloomPass和GUI按钮
import {WebGLRenderer, PerspectiveCamera, Scene, Mesh, SphereGeometry, MeshPhongMaterial, DoubleSide, Vector3, HemisphereLight, AxesHelper, ObjectLoader, Vector2, DirectionalLight, PlaneGeometry, TextureLoader, MirroredRepeatWrapping, RepeatWrapping,原创 2021-10-19 15:30:58 · 618 阅读 · 0 评论 -
threejs5plane纹理涉及+平铺偏移流动
import {WebGLRenderer, PerspectiveCamera, Scene, Mesh, SphereGeometry, MeshPhongMaterial, DoubleSide, Vector3, HemisphereLight, AxesHelper, ObjectLoader, Vector2, DirectionalLight, PlaneGeometry, MirroredRepeatWrapping, RepeatWrapping, ClampToEdg原创 2021-10-19 18:03:36 · 717 阅读 · 0 评论 -
threejs6加载模型(类型)
效果图:import * as THREE from "three"import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"import { AxesHelper, DirectionalLight, HemisphereLight, SphereBufferGeometry } from "three";import{MTLLoader} from "three/examples/jsm/loaders/M原创 2021-10-20 16:59:51 · 734 阅读 · 0 评论 -
threejs7 实现背景图和360全景图的加载
import { BufferGeometry, DirectionalLight, HemisphereLight, SphereBufferGeometry, TextureLoader,CubeTextureLoader } from "three";scene.background = new TextureLoader().load("../assets/bg3.jpg")效果图2:代码2:import * as THREE from "three"import { OrbitCon原创 2021-10-21 17:02:48 · 1040 阅读 · 0 评论 -
threejs 8随机生成千个cube和点击选中模型
有滑动条和白边:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> html,bod原创 2021-10-21 19:02:14 · 441 阅读 · 0 评论 -
threejs9 框选模型
按住空格键control.enabled=false,框选模型变成红色。/** * 框选 */import * as THREE from "three"import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"import { AmbientLight, AxesHelper, BoxBufferGeometry, DirectionalLight, HemisphereLight, Mesh, Mesh原创 2021-10-22 16:09:02 · 1429 阅读 · 0 评论 -
threejs10 Material-shaderMaterial
var sphereGeometry = new SphereBufferGeometry(5, 12, 12);var material = new THREE.MeshPhongMaterial();var sphereMesh = new THREE.Mesh(sphereGeometry, material)scene.add(sphereMesh);var shaderMaterial = new THREE.ShaderMaterial( { vertexS原创 2021-10-25 16:45:31 · 1054 阅读 · 1 评论 -
threejs 11 postprocessing后处理
RenderPass是最基础的一个pass。EffectComposer合成器import * as THREE from "three"import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"import { DirectionalLight, HemisphereLight, SphereBufferGeometry } from "three";import{EffectComposer} from原创 2021-10-26 15:18:01 · 470 阅读 · 0 评论 -
threejs 12 animation动画
import * as THREE from "three"import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"import { AnimationActionLoopStyles, AnimationClip, AnimationMixer, BoxBufferGeometry, Clock, DirectionalLight, HemisphereLight, KeyframeTrack, SphereBu原创 2021-10-26 17:47:45 · 322 阅读 · 0 评论 -
threejs 13 纹理texture-canvasTexture
import * as THREE from "three"import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"import { DirectionalLight, HemisphereLight, SphereBufferGeometry } from "three";var renderer = new THREE.WebGLRenderer({ antialias: true });// rende原创 2021-10-27 11:42:44 · 1131 阅读 · 0 评论 -
threejs14精灵模型Sprite模拟树林效果
import * as THREE from "three"import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"import { DirectionalLight, DoubleSide, HemisphereLight, SphereBufferGeometry} from "three";import{EffectComposer} from "three/examples/jsm/postprocess转载 2021-10-28 10:17:53 · 782 阅读 · 0 评论 -
threejs15自定义相机控制器
轨道控制器import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"var control = new OrbitControls(camera, renderer.domElement);control.autoRotate=true;围绕物体旋转var clock=new THREE.Clock();var timer=0;function updateCamera(delta) { tim原创 2021-10-28 16:53:06 · 432 阅读 · 0 评论 -
threejs 16 渲染器Renderers
webgl渲染器 renderer = new THREE.WebGLRenderer(); renderer.physicallyCorrectLights = true; renderer.gammaInput = true;//默认为 false. 如果设置了该参数,表示所有纹理和颜色应当使用预乘的gamma值来输入。 renderer.gammaOutput = true;//默认为 false. 如果设置了该参数,表示所有纹理和颜色应当使用预乘的gamma值来输出。原创 2021-10-29 18:09:22 · 541 阅读 · 0 评论 -
threejs17 粒子-下雪
/** * 3 下雪粒子 */import * as THREE from "three"import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"import { BoxBufferGeometry, Float32BufferAttribute, HemisphereLight, Mesh, MeshPhongMaterial, SphereBufferGeometry } from "three";i原创 2021-12-22 15:20:18 · 1838 阅读 · 1 评论