绿色三角旋转

最新推荐文章于 2023-04-20 21:10:57 发布

Super_Calvin

最新推荐文章于 2023-04-20 21:10:57 发布

阅读量172

点赞数

分类专栏： # 几何图形文章标签：三角

本文链接：https://blog.csdn.net/weixin_45544796/article/details/109469674

版权

几何图形专栏收录该内容

89 篇文章 2 订阅

订阅专栏

三角

示例
CSS
JS

更多有趣示例尽在 知屋安砖社区

示例

在这里插入图片描述

CSS

body {
  margin: 0px;
}

JS

let scene = new THREE.Scene(),
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000),
  renderer = new THREE.WebGLRenderer({
    alpha: true
  }), // init like this
  group = new THREE.Group(),
  extrudeOptionsGold = {
    amount: 1,
    bevelEnabled: true,
    bevelSegments: 2,
    steps: 2,
    bevelSize: 2,
    bevelThickness: 15
  };

renderer.setClearColor(0x0d9263, 1);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

/** Gold Pieces **/
let goldTriShape1 = new THREE.Shape();
goldTriShape1.moveTo(0, 90);
goldTriShape1.lineTo(-50, 0);
goldTriShape1.lineTo(50, 0);
goldTriShape1.lineTo(0, 90); //This will close path

let goldTriGeom1 = new THREE.ExtrudeGeometry(goldTriShape1, extrudeOptionsGold),
  goldTriMesh1 = new THREE.Mesh(goldTriGeom1, new THREE.MeshBasicMaterial({
    color: 0xC4A956
  }));

let goldTriShape2 = new THREE.Shape();
goldTriShape2.moveTo(-50, 0);
goldTriShape2.lineTo(-100, -90);
goldTriShape2.lineTo(0, -90);
goldTriShape2.lineTo(-50, 0);

var goldTriGeom2 = new THREE.ExtrudeGeometry(goldTriShape2, extrudeOptionsGold);
var goldTriMesh2 = new THREE.Mesh(goldTriGeom2, new THREE.MeshBasicMaterial({
  color: 0xC4A956
}));

let goldTriShape3 = new THREE.Shape();
goldTriShape3.moveTo(50, 0);
goldTriShape3.lineTo(0, -90);
goldTriShape3.lineTo(100, -90);
goldTriShape3.lineTo(50, 0);

let goldTriGeom3 = new THREE.ExtrudeGeometry(goldTriShape3, extrudeOptionsGold),
  goldTriMesh3 = new THREE.Mesh(goldTriGeom3, new THREE.MeshBasicMaterial({
    color: 0xC4A956
  }));

scene.add(goldTriMesh1);
scene.add(goldTriMesh2);
scene.add(goldTriMesh3);

camera.position.z = 500;

function init() {
  goldTriMesh1.position.y = 500;
  goldTriMesh2.position.y = -500;
  goldTriMesh2.position.x = -500;
  goldTriMesh3.position.y = -500;
  goldTriMesh3.position.x = 500;
}

function animate() {
    bringPiecesTogether();
    requestAnimationFrame(animate);
    render();
}


function render() {
  renderer.render(scene, camera);
}


function bringPiecesTogether() {
  let desiredPosition = 0;
  
  if (goldTriMesh1.position.y !== desiredPosition) {
    goldTriMesh1.position.y -= 4;
    goldTriMesh2.position.y += 4;
    goldTriMesh2.position.x += 4;
    goldTriMesh3.position.y += 4;
    goldTriMesh3.position.x -= 4;
    
    goldTriMesh1.rotateX(.07);
    goldTriMesh1.rotateY(.07);
    goldTriMesh1.rotateZ(.015);
    
    goldTriMesh2.rotateX(.07);
    goldTriMesh2.rotateY(.07);
    goldTriMesh2.rotateZ(.015);
    
    goldTriMesh3.rotateX(.07);
    goldTriMesh3.rotateY(.07);
    goldTriMesh3.rotateZ(.015);
  } else {
    goldTriMesh1.rotateY(.01);
    goldTriMesh2.rotateY(.01);
    goldTriMesh3.rotateY(.01);
  }
}

init();
animate();
render();