示例

HTML

 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script><body><canvas id="myCanvas"></canvas></body>

CSS

 *{margin: 0;}canvas {display: block;width: 100%;height: 100%;margin: auto;position: fixed;overflow: hidden;}

JS

    window.addEventListener('load', init);function init() {// レンダラーを作成const renderer = new THREE.WebGLRenderer({canvas: document.querySelector('#myCanvas'),antialias: true});renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(window.innerWidth , window.innerHeight);renderer.setClearColor(0x0000ff, 1.0);console.log(renderer);const scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight);camera.position.set(0, 0, 500);window.addEventListener( 'resize', function(){onWindowResize(camera, renderer);}, false );const circleList = [];for (var i = 0; i < 10; i++) {circleList[i] = new Circle(i*i*2);scene.add(circleList[i]);}tick();function tick() {for (var i = 0; i < circleList.length; i++) {circleList[i].update(i);}renderer.render(scene, camera);requestAnimationFrame(tick);}}class Circle extends THREE.Object3D {constructor(size) {super();this.size = size;this.material = new THREE.LineBasicMaterial({color: 0xff0000});this.geometry = new THREE.Geometry();for (var i = 0; i < 361; i++) {const radian = i/360 * Math.PI * 2;this.geometry.vertices.push(new THREE.Vector3(Math.cos(radian)*this.size,Math.sin(radian)*this.size,30));}this.line = new THREE.Line( this.geometry, this.material );this.add( this.line );}update(i) {this.line.rotation.x += 0.001+i*0.001;this.line.rotation.y += 0.001+i*0.001;this.line.rotation.z += 0.001+i*0.001;}}function onWindowResize(camera, renderer) {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize( window.innerWidth, window.innerHeight );}

线圆示例（Line Circle）相关推荐

OpenCV示例学习（二）：基本图形绘制算子：line(),circle(),fillPoly(), ellipse()
OpenCV示例学习(二): 基本图形绘制算子:line(),circle(),fillPoly(), ellipse() #include <opencv2/opencv.hpp>usi ...
Openlayers 根据坐标点画点线圆多边形
根据坐标点画点线圆多边形,代码如下 Geometry type Point LineString Polygon Circle None Bezier 绘制绘制圆形绘制线段绘制多边形绘制单 ...
python根据坐标点画线_Openlayers 根据坐标点画点线圆多边形
根据坐标点画点线圆多边形,代码如下 Geometry type Point LineString Polygon Circle None Bezier 绘制绘制圆形绘制线段绘制多边形绘制单个点 ...
python使用matplotlib可视化线图（line plot）、移除可视化结果的所有坐标轴信息（remove all axis in matplotlib graph）
python使用matplotlib可视化线图(line plot).移除可视化结果的所有坐标轴信息(remove all axis in matplotlib graph) 目录
python使用matplotlib可视化线图（line plot）、设置X轴坐标的下限和上限数值（setting the lower and upper bound of the x axis）
python使用matplotlib可视化线图(line plot).设置X轴坐标的下限和上限数值(setting the lower and upper bound of the x axis) 目 ...
python使用matplotlib可视化线图（line plot）、在可视化图像中的指定位置添加横线(add horizontal line in matplotlib plot)
python使用matplotlib可视化线图(line plot).在可视化图像中的指定位置添加横线(add horizontal line in matplotlib plot) 目录
python使用matplotlib可视化线图（line plot）、将可视化图像的图例（legend）放置在图像外部、底部区域
python使用matplotlib可视化线图(line plot).将可视化图像的图例(legend)放置在图像外部.底部区域(put legend outside and in bottom re ...
python使用matplotlib可视化线图（line plot）、并自定义线条的粗细(线条的宽度、 line width in Matplotlib)
python使用matplotlib可视化线图(line plot).并自定义线条的粗细(线条的宽度. line width in Matplotlib) 目录
python使用matplotlib可视化线图（line plot）、使用invert_yaxis函数将Y轴坐标反序（invert the y axis in matplotlib）
python使用matplotlib可视化线图(line plot).使用invert_yaxis函数将Y轴坐标反序(invert the y axis in matplotlib) 目录

线圆示例（Line Circle）

线圆示例（Line Circle）

示例

HTML

CSS

JS

线圆示例（Line Circle）相关推荐

最新文章

热门文章