上海专业网站建站公,嘉兴seo排名扣费,广州站图片,佛山禅城区网站建设公司28. Three.js案例-创建圆角矩形并进行拉伸
实现效果 知识点
WebGLRenderer (WebGL渲染器)
WebGLRenderer 是 Three.js 中用于渲染 3D 场景的主要渲染器。
构造器
WebGLRenderer( parameters : Object )
参数类型描述parametersObject渲染器的配置参数#xff0c;可选。 …28. Three.js案例-创建圆角矩形并进行拉伸
实现效果 知识点
WebGLRenderer (WebGL渲染器)
WebGLRenderer 是 Three.js 中用于渲染 3D 场景的主要渲染器。
构造器
WebGLRenderer( parameters : Object )
参数类型描述parametersObject渲染器的配置参数可选。
常用参数
antialias布尔值是否开启抗锯齿默认为 false。alpha布尔值是否允许透明默认为 false。precision字符串指定着色器的精度可选值为 low, medium, high。
方法
setSize(width, height): 设置渲染器的尺寸。setClearColor(color, alpha): 设置渲染器的背景颜色和透明度。
PerspectiveCamera (透视相机)
PerspectiveCamera 是 Three.js 中用于创建透视投影相机的对象。
构造器
PerspectiveCamera(fov, aspect, near, far)
参数类型描述fovNumber视野角度单位为度。aspectNumber相机的宽高比。nearNumber近裁剪面距离。farNumber远裁剪面距离。
方法
position.set(x, y, z): 设置相机的位置。lookAt(vector): 设置相机的朝向。
Scene (场景)
Scene 是 Three.js 中用于存储和管理所有 3D 对象的容器。
构造器
Scene()
方法
add(object): 向场景中添加对象。remove(object): 从场景中移除对象。
PointLight (点光源)
PointLight 是 Three.js 中用于创建点光源的对象。
构造器
PointLight(color, intensity, distance, decay)
参数类型描述colorColor光源的颜色。intensityNumber光源的强度默认为 1。distanceNumber光源的最大影响距离默认为 0表示无限远。decayNumber光源的衰减系数默认为 1。
方法
position.set(x, y, z): 设置光源的位置。
Shape (形状)
Shape 是 Three.js 中用于创建自定义 2D 形状的对象。
构造器
Shape(points)
参数类型描述pointsArray一系列 Vector2 点用于定义形状的轮廓。
方法
moveTo(x, y): 移动到指定点。lineTo(x, y): 从当前点画直线到指定点。quadraticCurveTo(cpx, cpy, x, y): 从当前点画二次贝塞尔曲线到指定点。
ExtrudeGeometry (拉伸几何体)
ExtrudeGeometry 是 Three.js 中用于创建拉伸几何体的对象。
构造器
ExtrudeGeometry(shape, options)
参数类型描述shapeShape要拉伸的 2D 形状。optionsObject拉伸选项可选。
常用选项
depth: 拉伸深度默认为 100。bevelEnabled: 是否启用倒角默认为 true。bevelThickness: 倒角厚度默认为 6。bevelSize: 倒角大小默认为 1。bevelOffset: 倒角偏移默认为 0。bevelSegments: 倒角段数默认为 1。extrudePath: 拉伸路径可以是一个 Curve 对象。
Mesh (网格)
Mesh 是 Three.js 中用于创建网格对象的类。
构造器
Mesh(geometry, material)
参数类型描述geometryGeometry网格的几何体。materialMaterial网格的材质。
方法
translateX(amount): 沿 X 轴移动指定距离。translateY(amount): 沿 Y 轴移动指定距离。translateZ(amount): 沿 Z 轴移动指定距离。scale.set(x, y, z): 设置网格的缩放比例。
MeshPhongMaterial (网格Phong材质)
MeshPhongMaterial 是 Three.js 中用于创建 Phong 着色材质的对象。
构造器
MeshPhongMaterial(parameters)
参数类型描述parametersObject材质的配置参数可选。
常用参数
color: 材质的颜色。specular: 高光颜色默认为 0x111111。shininess: 高光强度默认为 30。
OrbitControls (轨道控制器)
OrbitControls 是 Three.js 中用于控制相机旋转、缩放和平移的控制器。
构造器
OrbitControls(camera, domElement)
参数类型描述cameraCamera控制的相机对象。domElementDOMElement控制器绑定的 DOM 元素。
方法
update(): 更新控制器状态。
代码
!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 myCamera new THREE.PerspectiveCamera(45, 1, 1, 1000);myCamera.position.set(200, 200, 200);myCamera.lookAt({x: 0, y: 0, z: 0});// 创建场景var myScene new THREE.Scene();// 创建点光源var myPointLight new THREE.PointLight(white);myPointLight.position.set(320, 200, 400);myScene.add(myPointLight);// 创建圆角矩形var myShape new THREE.Shape();var x 0, y 0, myWidth 30, myHeight 40, myRadius 6;myShape.moveTo(x, y myRadius);myShape.lineTo(x, y myHeight - myRadius);myShape.quadraticCurveTo(x, y myHeight, x myRadius, y myHeight);myShape.lineTo(x myWidth - myRadius, y myHeight);myShape.quadraticCurveTo(x myWidth, y myHeight, x myWidth, y myHeight - myRadius);myShape.lineTo(x myWidth, y myRadius);myShape.quadraticCurveTo(x myWidth, y, x myWidth - myRadius, y);myShape.lineTo(x myRadius, y);myShape.quadraticCurveTo(x, y, x, y myRadius);// 设置拉伸圆角矩形的路径var myCurve new THREE.CatmullRomCurve3([new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 30, 0)]);// 创建拉伸之后的圆角矩形var myGeometry new THREE.ExtrudeGeometry(myShape, {extrudePath: myCurve});var myMaterial new THREE.MeshPhongMaterial({color: cyan});var myMesh new THREE.Mesh(myGeometry, myMaterial);myMesh.translateX(100);myMesh.translateZ(100);myMesh.translateY(0);myScene.add(myMesh);// 渲染圆角矩形animate();var step 0;function animate() {myRenderer.render(myScene, myCamera);step step 0.01;var myScale 2 * Math.sin(step) 2;myMesh.scale.y myScale;myMesh.scale.x 2;myMesh.scale.z 2;requestAnimationFrame(animate);}// 创建轨道控制器var myOrbitControls new THREE.OrbitControls(myCamera);
/script
/body
/html演示链接
示例链接
