邵阳建网站,网络营销策划论文,南宁网站建设人才招聘,wordpress七牛云使用26. Three.js案例-自定义多面体
实现效果 知识点
WebGLRenderer
WebGLRenderer 是 Three.js 中用于渲染场景的主要类。它支持 WebGL 渲染#xff0c;并提供了多种配置选项。
构造器
new THREE.WebGLRenderer(parameters)
参数类型描述parametersObject可选参数对象…26. Three.js案例-自定义多面体
实现效果 知识点
WebGLRenderer
WebGLRenderer 是 Three.js 中用于渲染场景的主要类。它支持 WebGL 渲染并提供了多种配置选项。
构造器
new THREE.WebGLRenderer(parameters)
参数类型描述parametersObject可选参数对象用于配置渲染器。
常用参数
antialias布尔值是否开启抗锯齿默认为 false。alpha布尔值是否允许透明背景默认为 false。premultipliedAlpha布尔值是否使用预乘 alpha默认为 true。preserveDrawingBuffer布尔值是否保留绘图缓冲区默认为 false。stencil布尔值是否创建模板缓冲区默认为 true。depth布尔值是否创建深度缓冲区默认为 true。logarithmicDepthBuffer布尔值是否使用对数深度缓冲区默认为 false。
方法
setSize(width, height, updateStyle): 设置渲染器的尺寸。setClearColor(color, alpha): 设置渲染器的背景颜色和透明度。render(scene, camera): 渲染场景。
Scene
Scene 是 Three.js 中用于存储所有场景对象的容器。
构造器
new THREE.Scene()
PerspectiveCamera
PerspectiveCamera 是 Three.js 中用于创建透视相机的类。
构造器
new THREE.PerspectiveCamera(fov, aspect, near, far)
参数类型描述fovNumber视野角度以度为单位。aspectNumber相机的宽高比。nearNumber近裁剪面距离。farNumber远裁剪面距离。
SpotLight
SpotLight 是 Three.js 中用于创建聚光灯的类。
构造器
new THREE.SpotLight(color, intensity, distance, angle, penumbra, decay)
参数类型描述colorColor光源的颜色。intensityNumber光源的强度默认为 1。distanceNumber光源的最大影响距离默认为 0无限远。angleNumber聚光灯的角度默认为 π/3。penumbraNumber半影区域的比例默认为 0。decayNumber光照衰减默认为 1。
PolyhedronGeometry
PolyhedronGeometry 是 Three.js 中用于创建多面体几何体的类。
构造器
new THREE.PolyhedronGeometry(vertices, indices, radius, detail)
参数类型描述verticesArray顶点数组每个顶点包含三个坐标值。indicesArray面索引数组每个面包含三个顶点索引。radiusNumber多面体的半径默认为 1。detailNumber细分级别默认为 0。
MeshLambertMaterial
MeshLambertMaterial 是 Three.js 中用于创建 Lambert 材质的类。
构造器
new THREE.MeshLambertMaterial(parameters)
参数类型描述colorColor材质的颜色。opacityNumber材质的透明度默认为 1。transparentBoolean是否启用透明默认为 false。sideNumber渲染哪一面默认为 THREE.FrontSide。wireframeBoolean是否使用线框模式默认为 false。
Mesh
Mesh 是 Three.js 中用于创建网格对象的类。
构造器
new THREE.Mesh(geometry, material)
参数类型描述geometryGeometry网格的几何体。materialMaterial网格的材质。
OrbitControls
OrbitControls 是 Three.js 中用于创建轨道控制器的类用于控制相机的旋转、缩放和平移。
构造器
new THREE.OrbitControls(camera, domElement)
参数类型描述cameraCamera控制的相机对象。domElementHTMLElement控制器绑定的 DOM 元素。
代码
!DOCTYPE html
html
headmeta charsetUTF-8script srcThreeJS/three.js/scriptscript srcThreeJS/jquery.js/scriptscript srcThreeJS/OrbitControls.js/script
/head
body
center idmyContainer/center
script// 创建渲染器var myRenderer new THREE.WebGLRenderer({antialias: true});myRenderer.setSize(window.innerWidth, window.innerHeight);myRenderer.setClearColor(white, 1.0);$(#myContainer).append(myRenderer.domElement);// 创建场景var myScene new THREE.Scene();// 创建相机var myCamera new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 1000);myCamera.position.set(-8.43, 122.11, 1.63);myCamera.lookAt(myScene.position);// 创建光源var myLight new THREE.SpotLight(white);myLight.position.set(0, 60, 30);myScene.add(myLight);// 创建自定义多面体var myVertices [1, 0, 1, 1, 0, -1, -1, 0, -1, -1, 0, 1, 0, 1, 0];var myFaces [0, 1, 2, 2, 3, 0, 0, 1, 4, 1, 2, 4, 2, 3, 4, 3, 0, 4];var myGeometry new THREE.PolyhedronGeometry(myVertices, myFaces, 1, 1);var myMaterial new THREE.MeshLambertMaterial({color: cyan});var myMesh new THREE.Mesh(myGeometry, myMaterial);myMesh.scale.set(32, 32, 32);myScene.add(myMesh);// 渲染自定义多面体animate();function animate() {myRenderer.render(myScene, myCamera);requestAnimationFrame(animate);}// 创建轨道控制器var myOrbitControls new THREE.OrbitControls(myCamera);
/script
/body
/html演示链接
示例链接
