Three.js 扇形圆形

最近需要一个类似轮播的3d效果，6个轮播，每页图片280*300，记录下案例demo

当前版本104

直接下载官网案例：https://github.com/mrdoob/three.js/

参考学习案例：https://techbrood.com/threejs/examples/#webgl_geometry_shapes

我的代码：

<!DOCTYPE html>
<html lang="en">
<head><title>three.js webgl - geometry - shapes</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><style>body {font-family: Monospace;background-color: #f0f0f0;margin: 0px;overflow: hidden;}</style>
</head>
<body><script src="../build/three.js"></script><script src="js/libs/stats.min.js"></script><script>var container, stats;var camera, scene, renderer;var group;var targetRotation = 0;var targetRotationY = 0;var targetRotationOnMouseDown = 0;var targetRotationOnMouseDownY = 0;var mouseX = 0;var mouseXOnMouseDown = 0;var mouseY = 0;var mouseYOnMouseDown = 0;var windowHalfY= window.innerHeight / 2;var windowHalfX = window.innerWidth / 2;init();animate();function init() {container = document.createElement( 'div' );document.body.appendChild( container );scene = new THREE.Scene();scene.background = new THREE.Color( 0x071f6f );camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 5000 );camera.position.set( 0, 0, 1000 );scene.add( camera );var light = new THREE.PointLight( 0xffffff, 0.8 );camera.add( light );group = new THREE.Group();group.position.y = 50;scene.add( group );var loader = new THREE.TextureLoader();/***  @作用 添加特殊材质*/var texture = loader.load( "textures/UV_Grid_Sm.jpg" );//特殊材质// it's necessary to apply these settings in order to correctly display the texture on a shape geometrytexture.wrapS = texture.wrapT = THREE.RepeatWrapping;texture.repeat.set( 0.008, 0.008 );function addShapeDRN( shape, extrudeSettings, color, x, y, z, rx, ry, rz, s ) {// flat shape with texture// note: default UVs generated by ShapeBufferGeometry are simply the x- and y-coordinates of the vertices/*** ShapeBufferGeometry形状缓冲几何体*/var geometry = new THREE.ShapeBufferGeometry( shape );/*** 网格（Mesh）* MaterialPhong网格材质(MeshPhongMaterial)一种用于具有镜面高光的光泽表面的材质。* **/var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { side: THREE.DoubleSide, map: texture } ) );mesh.position.set( x, y, z - 175 );mesh.rotation.set( rx, ry, rz );mesh.scale.set( s, s, s );group.add( mesh );// extruded shape挤压成形/*** ExtrudeBufferGeometry* 挤压缓冲几何体* 从一个形状路径中，挤压出一个BufferGeometry。* *//*** 网格（Mesh）* MaterialPhong网格材质(MeshPhongMaterial)一种用于具有镜面高光的光泽表面的材质。* **/var geometry = new THREE.ExtrudeBufferGeometry( shape, extrudeSettings );var material =new THREE.MeshPhongMaterial( { color: color ,opacity:0.8,transparent:true } )var mesh = new THREE.Mesh( geometry,material );mesh.position.set( x, y, z - 75 );mesh.rotation.set( rx, ry, rz );mesh.scale.set( s, s, s );group.add( mesh );var mesh2=mesh.clone();mesh2.rotateZ(Math.PI*2/6)group.add( mesh2 );var mesh3=mesh2.clone();mesh3.rotateZ(Math.PI*2/6)group.add( mesh3 );var mesh4=mesh3.clone();mesh4.rotateZ(Math.PI*2/6)group.add( mesh4 );var mesh5=mesh4.clone();mesh5.rotateZ(Math.PI*2/6)group.add( mesh5 );var mesh6=mesh5.clone();mesh6.rotateZ(Math.PI*2/6)group.add( mesh6 );}// Arc circle圆弧drn/*** absarc ( x : Float, y : Float, radius : Float, startAngle : Float, endAngle : Float, clockwise : Float ) : null* x, y -- 弧线的绝对中心。* radius -- 弧线的半径。* startAngle -- 起始角，以弧度来表示。*endAngle -- 终止角，以弧度来表示。*clockwise -- 以顺时针方向创建（扫过）弧线。默认值为false。* @type {Shape}*//***.arc ( x : Float, y : Float, radius : Float, startAngle : Float, endAngle : Float, clockwise : Float ) : nullx, y -- 弧线的中心来自上次调用后的偏移量。radius -- 弧线的半径。startAngle -- 起始角，以弧度来表示。endAngle -- 终止角，以弧度来表示。clockwise -- 以顺时针方向创建（扫过）弧线。默认值为false。*/var arcShapeDrn01 = new THREE.Shape();//  需要长：280，高300 平分6分，60度，中间有间隙取50度，  通过公式，为L=n× π× r/180，L=α× r。其中n是圆心角度数，r是半径，L是圆心角弧长得 r=320,n=50,弧度=280，arcShapeDrn01.moveTo( 310, 0 );arcShapeDrn01.lineTo( 320, 0 );arcShapeDrn01.absarc( 0, 0, 320, 0, Math.PI * 2/6/6*5, false );arcShapeDrn01.absarc( 0, 0, 310,Math.PI * 2/6/6*5,0, true );var arcShapeDrn02=arcShapeDrn01/***curveSegments — int，曲线上点的数量，默认值是12。steps — int，用于沿着挤出样条的深度细分的点的数量，默认值为1。depth — float，挤出的形状的深度，默认值为100。bevelEnabled — bool，对挤出的形状应用是否斜角，默认值为true。bevelThickness — float，设置原始形状上斜角的厚度。默认值为6。bevelSize — float。斜角与原始形状轮廓之间的延伸距离，默认值为bevelThickness-2。bevelSegments — int。斜角的分段层数，默认值为3。extrudePath — THREE.CurvePath对象。一条沿着被挤出形状的三维样条线。UVGenerator — Object。提供了UV生成器函数的对象。*/var extrudeSettings = { depth: 300, bevelEnabled: false, bevelSegments: 9, steps: 2, bevelSize: 0, bevelThickness: 0 };addShapeDRN( arcShapeDrn02, extrudeSettings, 0x6188d2, 0, 0, 0, 0, 0, 0, 1 );renderer = new THREE.WebGLRenderer( { antialias: true } );renderer.setPixelRatio( window.devicePixelRatio );renderer.setSize( window.innerWidth, window.innerHeight );container.appendChild( renderer.domElement );stats = new Stats();container.appendChild( stats.dom );document.addEventListener( 'mousedown', onDocumentMouseDown, false );document.addEventListener( 'touchstart', onDocumentTouchStart, false );document.addEventListener( 'touchmove', onDocumentTouchMove, false );window.addEventListener( 'resize', onWindowResize, false );}function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize( window.innerWidth, window.innerHeight );}function onDocumentMouseDown( event ) {event.preventDefault();document.addEventListener( 'mousemove', onDocumentMouseMove, false );document.addEventListener( 'mouseup', onDocumentMouseUp, false );document.addEventListener( 'mouseout', onDocumentMouseOut, false );mouseXOnMouseDown = event.clientX - windowHalfX;mouseYOnMouseDown = event.clientY - windowHalfY;targetRotationOnMouseDown = targetRotation;targetRotationOnMouseDownY = targetRotationY;}function onDocumentMouseMove( event ) {mouseX = event.clientX - windowHalfX;mouseY = event.clientY - windowHalfY;targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;targetRotationY = targetRotationOnMouseDownY + ( mouseY - mouseYOnMouseDown ) * 0.02;}function onDocumentMouseUp() {document.removeEventListener( 'mousemove', onDocumentMouseMove, false );document.removeEventListener( 'mouseup', onDocumentMouseUp, false );document.removeEventListener( 'mouseout', onDocumentMouseOut, false );}function onDocumentMouseOut() {document.removeEventListener( 'mousemove', onDocumentMouseMove, false );document.removeEventListener( 'mouseup', onDocumentMouseUp, false );document.removeEventListener( 'mouseout', onDocumentMouseOut, false );}function onDocumentTouchStart( event ) {if ( event.touches.length == 1 ) {event.preventDefault();mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;mouseYOnMouseDown = event.touches[ 0 ].pageY - windowHalfY;targetRotationOnMouseDown = targetRotation;targetRotationOnMouseDownY = targetRotationY;}}function onDocumentTouchMove( event ) {if ( event.touches.length == 1 ) {event.preventDefault();mouseX = event.touches[ 0 ].pageX - windowHalfX;mouseY = event.touches[ 0 ].pageY - windowHalfY;targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;targetRotationY = targetRotationOnMouseDownY + ( mouseY - mouseYOnMouseDown ) * 0.05;}}//function animate() {requestAnimationFrame( animate );render();stats.update();}function render() {group.rotation.z += ( targetRotation - group.rotation.z ) * 0.05;group.rotation.x += ( targetRotationY - group.rotation.x ) * 0.05;renderer.render( scene, camera );}</script></body>
</html>

我的效果

Three.js 扇形圆形相关推荐

moment转换时间戳_酷炫时间轮盘：JS元素圆形布局制作时间轮盘动画效果
点击右上方红色按钮关注"web秀",让你真正秀起来前言前段时间看抖音,有人用时间轮盘作为动态的桌面壁纸,感觉很好玩,于是突发奇想,可以用JS来实现这个功能. 来来来,先看看成果 ...
html js 扇形统计图_canvas绘制扇形统计图
今天偷懒了,把上次的作业代码记录在这里好了. 绘制简单的扇形统计图需要用到JS插件,绘制完以后的代码是这样的: 今天有点晚了把代码记录一下: *{ margin:0px; padding:0px;} ...
css实现圆形钟表,js+css3圆形指针时钟代码
js代码 var divH = document.getElementsByClassName("time_h") var divM = document.getElementsB ...
html5圆形旋转菜单js,jquery 圆形旋转图片滚动切换效果
这个效果比较特别,可爱,所以在外面网站没怎么看到过,有兴趣的朋友可以下载后自己使用. PS: 经过修改已经兼容大众浏览器. 效果图: 在线演示:http://demo.jb51.net/js/Imag ...
HTML+CSS+JS实现 ❤️圆形倒数秒计时器❤️
html js 扇形统计图_Html5饼图绘制实现统计图的方法
这篇文章我们来讲一下在网站建设中,Html5饼图绘制实现统计图的方法.本文对大家进行网站开发设计工作或者学习都有一定帮助,下面让我们进入正文. Html5提供了强大的绘图API,让我们能够使用java ...
html chart标签,用 Chart.js 画扇形图并显示标签
chart.js 扇形图 var ctx = document.getElementById("myChart").getContext('2d'); var myChart = ...
css画扇形的几种实现方式
前言前两天做了360前端星技术测验,其中有个UI效果实现是这样的 (请实现如图warning标志,其中圆的半径是100px,并且保证圆始终垂直居中页面显示) 核心技术难点是: 1. 扇形的实现 2. ...
cytoscape.js初级篇
cytoscape.js初级篇系列文章前言 cytoscape依赖引用 cytoscape扩展依赖引用创建Cytoscape组件创建Cytoscape模板容器创建Cytoscape实例对象 ...

Three.js 扇形圆形

Three.js 扇形圆形相关推荐

最新文章

热门文章