三角(Triangle)

翻译
三角Triangle

示例

在这里插入图片描述

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();


0 点赞
评论
举报

评论区

不超过500字