threejs 学习
开发场景Vue模板
<template>
</template>
<script>
import * as THREE from 'three'
export default {
mounted(){
initModel()
},
methods: {
initModel(){
const scene = new THREE.Scene()
/*
Scene:创建一个新的场景
属性：fog、overrideMaterial(强制场景使用渲染材质)、autoupdate、background
方法：toJSON meta--包含有元数据的对象
dispose() 清除内部所缓存的场景相关的数据
继承OBject3D，isScene=true、type=’Scene‘
*/
const camera = new THREE.perspectiveCamera(45,window.innerWidth / window.innerHeight,0.1,1000)
scene.add(camera)
/*
透视投影、模拟人眼所看到的景象，3d渲染中使用最普遍的投影方式
参数：fov 摄像机视锥体垂直视野角度
aspect 摄像机视锥体长宽比
near 锥体近端面
far 锥体远端面
属性：aspect、far、filmGauge胶片尺寸（默认35毫米）、filmOffset 水平偏离中心偏移量，默认0、focus、fov、isPerspectiveCamera、near、view、zoom：缩放倍数
方法：clearViewOffset、getEffectiveFOV(以角度返回当前直视野角度)、getFilmHeight、getFilmWidth、getFocalLength（焦距）setFocalLength、setViewOffset（fullWidth：float，fullHeight：float，x:float，y：float，height：float）、updateProjectionMatrix(更新摄像机投影矩阵)、toJSON
*/
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth,window.innerHeight)
document.querySelector('.containerCanvas').appendChild(renderer.domElement)
/*
parameters：参数对象
canvas：一个供渲染绘制其输出的canvas它和下面的domElement属性对应，没有传则会创建一个canvas
context：可用于将渲染器附加到已有的渲染环境
precision：着色器精度。highp、mediump、lowp。默认highp
alpha：canvas是否包含alpha。默认false
premultipliedAlpha:renderer是否建设颜色有premultiplied Alpha。默认true
antialias：是否执行抗锯齿，默认false
stencil：绘图缓存是否有一个至少8位的模板缓存，默认false
preserveDrawingBuffer：是否保留缓存直到手动清除或者被覆盖，默认false
powerPreference：提示用户代理怎样的配置更适合用于当前webGL
failIfMajorPerformanceCaveat：
depth：绘图缓存是否有一个至少6位的深度缓存，默认true
logarithmicDepthBuffer：是否使用对数深度缓存，处理巨大的比例差异
属性：
autoClear：定义渲染是否在渲染每一帧之前自动清除其输出
autoClearColor：是否清除颜色缓存，默认true
autoClearDepth：是否清除深度缓存
autoClearStencil：是否清除模板缓存
capabilities：包含当前渲染环境的功能细节的对象
clipplingPlane：用户定义的剪裁平面
domElement：一个canvas，渲染其在其上绘制输出
extensions：检查是否支持各种WebGL扩展
gammaFactor：float，默认2
gammaInput：如果设置，所有纹理和颜色都会预乘gamma，默认false
gammaOutput：期望所有纹理和颜色需要乘以gamma输出。默认false
info：包含有关图形板内存和渲染过程的一系列统计信息
localClippingEnabled：定义渲染器是否考虑对象级剪切平面，默认false
maxMorphTargets：默认8，一个着色器中允许的最大MorphTargets数，标准材质只允许8个
maxMorphNormals：默认4，色器中允许的最大MprphNormal数，标准材质只允许4个
physicallyCorrectLights：是否使用物理上正确的光照模式，默认false lights/physical
properties:渲染内部使用，以跟踪各种子对象属性
renderLists：在内部用于处理场景渲染对象的排序
shadowMap：如果使用，它包含阴影题图的引用
shadowMap.enabled、shadowMap.autoUpdate、shadowMap.needsUpdate、shadowMap.type
sortObjects：默认true，是否对对象进行排序
state：包含设置的context状态的各种属性的函数
toneMapping：默认LinearToneMapping。
toneMappingWhitePoint：色调映射的白点，默认1
方法：
clear：（color：boolean，depth：Boolean，stencil：Boolean）
clearColor（）、clearDepth（）、clearStencil（）
clearTarget：（renderTarget，color，depth，stencil）
compile：（scene，camera）使用相机编译场景中的所有材质
copyFramebufferToTexture（position：Vector2，texture：Texture，level：number)
将纹理的所有像素复制到一个已有的从给定位置开始的纹理中
dispose（）处理当前的渲染环境
forceContextLoss：模拟WebGL环境的丢失
getClearAlpha：返回一个表示当前alpha的float 0-1
getClearColor：返回当前颜色值
getContext：返回环境
getContextAttributes:返回WebGL环境在创建的视乎所设置的属性
getActiveCubeFace（） getActiveMipmapLevel()
getRenderTarget（）返回当前renderTarget
getCurrentViewport（） 返回当前视口
getDrawingBufferSize():返回包含渲染器绘图缓存宽度和高度的对象
getPixelRatio：返回使用设备像素比
getSize（）canvas的宽度和高度的对象
initTexture（texture)
resetGLState（）
readRenderTargetPixels（renderTarget，x，y，width，height，buffer，activeCubefaceIndex）
render（scene，camera，renderTarget，forceClear）
用相机渲染一个场景
渲染一般是在canvas上完成的，或者是renderTarget（如果有指定）
如果forceClear值为true，那么颜色、深度、及模板缓存将会在渲染之前清除，即使渲染器的antoClear属性为false
即便foeceClear设为true，也可以通过autoClearColor。。。设为false来阻止对应缓存被清除
renderBufferImmediate（object3d，shaderprogram，material）
setAnimationLoop（callback）可用来代替requestAnimationFrame的内置函数
setClearAplha：0~1
setClearColor：（color，alpha）
setPixelRatio：
setRenderTarget（renderTarget，activeCubeface,activeMipmapLevel)
setScissor（x，y，width，height）
设置剪裁区域
setScissorTest：启用或禁用剪裁检测
setSize（width，height，updateStyle）
setViewPort（x,y,width,height)将视口大小设置为
*/
}
}
}
</script>
浙公网安备 33010602011771号