文字堆积网站,黑龙江企业网站建设公司,用r语言 做网站点击热力图,网站快速建设视频33. Three.js案例-创建带阴影的球体与平面
实现效果 知识点
WebGLRenderer (WebGL渲染器)
WebGLRenderer 是 Three.js 中用于渲染 3D 场景的核心类。它负责将场景中的对象绘制到画布上。
构造器
new THREE.WebGLRenderer(parameters)参数类型描述parametersObject可选参数…33. Three.js案例-创建带阴影的球体与平面
实现效果 知识点
WebGLRenderer (WebGL渲染器)
WebGLRenderer 是 Three.js 中用于渲染 3D 场景的核心类。它负责将场景中的对象绘制到画布上。
构造器
new THREE.WebGLRenderer(parameters)参数类型描述parametersObject可选参数对象用于配置渲染器的各种属性。
常用参数
antialias布尔值是否开启抗锯齿默认为 false。alpha布尔值是否允许透明背景默认为 false。premultipliedAlpha布尔值是否使用预乘 alpha默认为 true。preserveDrawingBuffer布尔值是否保留绘图缓冲区默认为 false。depth布尔值是否创建深度缓冲区默认为 true。stencil布尔值是否创建模板缓冲区默认为 true。logarithmicDepthBuffer布尔值是否使用对数深度缓冲区默认为 false。powerPreference字符串指定 GPU 的性能偏好可选值为 default、high-performance 或 low-power。
方法
setPixelRatio(value)设置设备像素比。setSize(width, height, updateStyle)设置渲染器的尺寸。setClearColor(color, alpha)设置渲染器的背景颜色。render(scene, camera)渲染场景。
Scene (场景)
Scene 是 Three.js 中用于存储和管理所有 3D 对象的容器。
构造器
new THREE.Scene()PerspectiveCamera (透视相机)
PerspectiveCamera 是 Three.js 中用于创建透视投影的相机。
构造器
new THREE.PerspectiveCamera(fov, aspect, near, far)参数类型描述fovNumber视野角度以度为单位。aspectNumber相机的宽高比。nearNumber近裁剪面距离小于该距离的对象不会被渲染。farNumber远裁剪面距离大于该距离的对象不会被渲染。
方法
position.set(x, y, z)设置相机的位置。lookAt(vector)使相机看向指定的点。
SpotLight (聚光灯)
SpotLight 是 Three.js 中用于创建聚光灯的光源。
构造器
new THREE.SpotLight(color, intensity, distance, angle, penumbra, decay)参数类型描述colorColor光源的颜色。intensityNumber光源的强度默认为 1。distanceNumber光源的最大影响距离默认为 0无限远。angleNumber光源的光照角度默认为 Math.PI/3。penumbraNumber光源的半影区域默认为 0。decayNumber光源的衰减默认为 1。
属性
castShadow布尔值是否投射阴影默认为 false。
Mesh (网格)
Mesh 是 Three.js 中用于创建 3D 对象的基本类。
构造器
new THREE.Mesh(geometry, material)参数类型描述geometryGeometry网格的几何体。materialMaterial网格的材质。
属性
castShadow布尔值是否投射阴影默认为 false。receiveShadow布尔值是否接收阴影默认为 false。
SphereBufferGeometry (球体几何体)
SphereBufferGeometry 是 Three.js 中用于创建球体几何体的类。
构造器
new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength)参数类型描述radiusNumber球体的半径。widthSegmentsNumber经度方向上的分段数默认为 8。heightSegmentsNumber纬度方向上的分段数默认为 6。phiStartNumber经度起始角度默认为 0。phiLengthNumber经度范围默认为 2 * Math.PI。thetaStartNumber纬度起始角度默认为 0。thetaLengthNumber纬度范围默认为 Math.PI。
PlaneGeometry (平面几何体)
PlaneGeometry 是 Three.js 中用于创建平面几何体的类。
构造器
new THREE.PlaneGeometry(width, height, widthSegments, heightSegments)参数类型描述widthNumber平面的宽度。heightNumber平面的高度。widthSegmentsNumber宽度方向上的分段数默认为 1。heightSegmentsNumber高度方向上的分段数默认为 1。
MeshNormalMaterial (网格法线材质)
MeshNormalMaterial 是 Three.js 中用于显示网格法线的材质。
构造器
new THREE.MeshNormalMaterial(parameters)参数类型描述parametersObject可选参数对象用于配置材质的各种属性。
常用参数
wireframe布尔值是否以线框模式显示默认为 false。transparent布尔值是否允许透明默认为 false。
MeshStandardMaterial (网格标准材质)
MeshStandardMaterial 是 Three.js 中用于创建物理上准确的标准材质。
构造器
new THREE.MeshStandardMaterial(parameters)参数类型描述parametersObject可选参数对象用于配置材质的各种属性。
常用参数
color颜色值材质的颜色。metalness浮点数金属度默认为 0。roughness浮点数粗糙度默认为 1。
Vector3 (三维向量)
Vector3 是 Three.js 中用于表示三维向量的类。
构造器
new THREE.Vector3(x, y, z)参数类型描述xNumber向量的 x 分量。yNumber向量的 y 分量。zNumber向量的 z 分量。
方法
set(x, y, z)设置向量的各个分量。multiplyScalar(scalar)将向量的各个分量乘以一个标量。
ShadowMap (阴影映射)
ShadowMap 是 Three.js 中用于启用和配置阴影映射的功能。
属性
enabled布尔值是否启用阴影映射默认为 false。
代码
!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);// 创建场景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));// 启用阴影映射myRenderer.shadowMap.enabled true;// 添加渲染器到容器$(#myContainer).append(myRenderer.domElement);// 创建聚光灯var mySpotLight new THREE.SpotLight(white);mySpotLight.position.set(-3, 46, -1);mySpotLight.distance 80;mySpotLight.angle Math.PI / 50;mySpotLight.castShadow true;myScene.add(mySpotLight);// 创建球体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演示链接
示例链接
