电子商务网站建设与管理最新试卷,青岛不错的网站公司,百度推广怎么使用教程,WordPress移动站36. Three.js案例-创建带光照和阴影的球体与平面
实现效果 知识点
Three.js基础
WebGLRenderer
WebGLRenderer 是Three.js中最常用的渲染器#xff0c;用于将场景渲染到网页上。
构造器
new THREE.WebGLRenderer(parameters)参数类型描述parametersobject可选参数#…36. Three.js案例-创建带光照和阴影的球体与平面
实现效果 知识点
Three.js基础
WebGLRenderer
WebGLRenderer 是Three.js中最常用的渲染器用于将场景渲染到网页上。
构造器
new THREE.WebGLRenderer(parameters)参数类型描述parametersobject可选参数用于配置渲染器。包括但不限于 antialias抗锯齿、alpha透明度等。
方法
setPixelRatio(value): 设置设备像素比。setSize(width, height): 设置渲染器的尺寸。setClearColor(color, alpha): 设置渲染器的背景颜色。shadowMap.enabled: 启用或禁用阴影映射。render(scene, camera): 渲染场景。
Scene
Scene 是Three.js中的场景对象用于存储所有需要渲染的对象。
构造器
new THREE.Scene()Camera
PerspectiveCamera 是Three.js中的一种透视相机用于模拟人眼的视觉效果。
构造器
new THREE.PerspectiveCamera(fov, aspect, near, far)参数类型描述fovfloat视野角度单位为度。aspectfloat相机宽高比。nearfloat近裁剪面距离。farfloat远裁剪面距离。
方法
position.set(x, y, z): 设置相机的位置。lookAt(vector): 设置相机的朝向。
PointLight
PointLight 是Three.js中的点光源用于模拟从一个点发出的光。
构造器
new THREE.PointLight(color, intensity, distance, decay)参数类型描述colorcolor光源颜色。intensityfloat光源强度。distancefloat光源的最大影响距离。如果为0则表示无限远。decayfloat光源衰减系数。默认值为1。
属性
castShadow: 是否投射阴影。distance: 光源的最大影响距离。intensity: 光源强度。
SphereBufferGeometry
SphereBufferGeometry 用于创建一个球体几何体。
构造器
new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength)参数类型描述radiusfloat球体半径。widthSegmentsint经度方向上的分段数。默认值为8。heightSegmentsint纬度方向上的分段数。默认值为6。phiStartfloat球体起始经度。默认值为0。phiLengthfloat球体经度范围。默认值为2π。thetaStartfloat球体起始纬度。默认值为0。thetaLengthfloat球体纬度范围。默认值为π。
Mesh
Mesh 是Three.js中的网格对象用于将几何体和材质组合在一起。
构造器
new THREE.Mesh(geometry, material)参数类型描述geometryGeometry几何体对象。materialMaterial材质对象。
属性
castShadow: 是否投射阴影。receiveShadow: 是否接收阴影。
PlaneGeometry
PlaneGeometry 用于创建一个平面几何体。
构造器
new THREE.PlaneGeometry(width, height, widthSegments, heightSegments)参数类型描述widthfloat平面的宽度。heightfloat平面的高度。widthSegmentsint宽度方向上的分段数。默认值为1。heightSegmentsint高度方向上的分段数。默认值为1。
MeshStandardMaterial
MeshStandardMaterial 是Three.js中的一种标准材质支持物理光照模型。
构造器
new THREE.MeshStandardMaterial(parameters)参数类型描述parametersobject可选参数用于配置材质。包括但不限于 color颜色、roughness粗糙度、metalness金属度等。
代码
!DOCTYPE html
html
headmeta charsetUTF-8script srcThreeJS/three.js/scriptscript srcThreeJS/jquery.js/script
/head
body
div idmyContainer/div
script// 创建渲染器var myRenderer new THREE.WebGLRenderer();myRenderer.setPixelRatio(window.devicePixelRatio);myRenderer.setSize(480, 320);myRenderer.setClearColor(white, 1);myRenderer.shadowMap.enabled true;$(#myContainer).append(myRenderer.domElement);// 创建场景var myScene new THREE.Scene();// 创建相机var myCamera new THREE.PerspectiveCamera(45, 480 / 320, 0.1, 1000);myCamera.position.set(4, 4, 2);myCamera.position.multiplyScalar(2);myCamera.lookAt(new THREE.Vector3(0, 0, 0));// 创建点光源var myPointLight new THREE.PointLight(white);myPointLight.position.set(0, 6, 0);myPointLight.distance 380;myPointLight.castShadow true;myScene.add(myPointLight);// 创建球体var mySphereGeometry new THREE.SphereBufferGeometry(2, 36, 36);var mySphereMaterial new THREE.MeshNormalMaterial({wireframe: true, transparent: true});var mySphereMesh new THREE.Mesh(mySphereGeometry, mySphereMaterial);mySphereMesh.position.set(0, 2.5, 0);mySphereMesh.castShadow true;myScene.add(mySphereMesh);// 创建平面var myPlaneGeometry new THREE.PlaneGeometry(120, 120, 1, 1);var myPlaneMaterial new THREE.MeshStandardMaterial({color: white});var myPlaneMesh new THREE.Mesh(myPlaneGeometry, myPlaneMaterial);myPlaneMesh.rotateX(-Math.PI / 2);myPlaneMesh.rotateZ(-Math.PI / 7);myPlaneMesh.position.set(0, -3.5, 0);myPlaneMesh.receiveShadow true;myScene.add(myPlaneMesh);// 渲染场景myRenderer.render(myScene, myCamera);
/script
/body
/html演示链接
示例链接
